#190040

#3f48f2

#0aa9ff

Deep Sea



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Blue

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#190040	rgb(25, 0, 64)	hsl(260 100% 13%)	hwb(260 0% 75%)	lch(4.76 43.1 305)	lab(4.76 25 -35.1)	cmyk 61%, 100%, 0%, 75%
	#3f48f2	rgb(63, 72, 242)	hsl(240 87% 60%)	hwb(240 25% 5.1%)	lch(39.8 97.1 296)	lab(39.8 41.8 -87.6)	cmyk 74%, 70%, 0%, 5%
	#0aa9ff	rgb(10, 169, 255)	hsl(200 100% 52%)	hwb(200 3.9% 0%)	lch(65.4 55.2 256)	lab(65.4 -13.2 -53.6)	cmyk 96%, 34%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#190040

AAA - 18.82



#3f48f2

AA - 6.13



#0aa9ff

AA - 2.58



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(19.4% 0.04 -0.101), oklab(51.6% 0.007 -0.247), oklab(70.5% -0.077 -0.149))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #190040, #3f48f2, #0aa9ff)

Colors



<!-- Primary Colors -->
<color name="deep_sea_color_10">#190040</color>
<color name="deep_sea_color_20">#3f48f2</color>
<color name="deep_sea_color_30">#0aa9ff</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt