#0f1c3a

#133359

#165279

#177c9b

#16b2bf

#13e5d5

Underwater



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

Green

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#0f1c3a	rgb(15, 28, 58)	hsl(220 59% 14%)	hwb(220 5.9% 77%)	lch(10.5 21.8 279)	lab(10.5 3.48 -21.6)	cmyk 74%, 52%, 0%, 77%
	#133359	rgb(19, 51, 89)	hsl(210 65% 21%)	hwb(210 7.5% 65%)	lch(20.5 26.8 269)	lab(20.5 -0.417 -26.8)	cmyk 79%, 43%, 0%, 65%
	#165279	rgb(22, 82, 121)	hsl(200 69% 28%)	hwb(200 8.6% 53%)	lch(32.7 29.2 254)	lab(32.7 -8.03 -28.1)	cmyk 82%, 32%, 0%, 53%
	#177c9b	rgb(23, 124, 155)	hsl(190 74% 35%)	hwb(190 9% 39%)	lch(47.8 31.9 232)	lab(47.8 -19.7 -25)	cmyk 85%, 20%, 0%, 39%
	#16b2bf	rgb(22, 178, 191)	hsl(180 79% 42%)	hwb(180 8.6% 25%)	lch(65.9 38.9 207)	lab(65.9 -34.6 -17.8)	cmyk 88%, 7%, 0%, 25%
	#13e5d5	rgb(19, 229, 213)	hsl(180 85% 49%)	hwb(180 7.5% 10%)	lch(82 50 187)	lab(82 -49.7 -5.83)	cmyk 92%, 0%, 7%, 10%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#0f1c3a

AAA - 16.83



#133359

AAA - 12.76



#165279

AAA - 8.34



#177c9b

AA - 4.78



#16b2bf

AA - 2.57



#13e5d5

AA - 1.59



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(23.3% -0.006 -0.06), oklab(31.9% -0.021 -0.075), oklab(42.1% -0.041 -0.078), oklab(54.7% -0.069 -0.069), oklab(69.8% -0.106 -0.048), oklab(83% -0.143 -0.015))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #0f1c3a, #133359, #165279, #177c9b, #16b2bf, #13e5d5)

Colors



<!-- Primary Colors -->
<color name="underwater_color_10">#0f1c3a</color>
<color name="underwater_color_20">#133359</color>
<color name="underwater_color_30">#165279</color>
<color name="underwater_color_40">#177c9b</color>
<color name="underwater_color_50">#16b2bf</color>
<color name="underwater_color_60">#13e5d5</color>

Gradient PRO

Pro feature only

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

PWA prompt