Ocean

#06CDE0

#02A4EC

#0A98F2

#2276D8

#066EC5

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#06cde0	rgb(6, 205, 224)	hsl(190 95% 45%)	hwb(190 2.4% 12%)	lch(75 44.2 210)	lab(75 -38.2 -22.1)	cmyk 97%, 8%, 0%, 12%
	#02a4ec	rgb(2, 164, 236)	hsl(200 98% 47%)	hwb(200 0.78% 7.5%)	lch(63.1 49.8 251)	lab(63.1 -16.6 -46.9)	cmyk 99%, 31%, 0%, 7%
	#0a98f2	rgb(10, 152, 242)	hsl(200 92% 49%)	hwb(200 3.9% 5.1%)	lch(59.9 55.9 261)	lab(59.9 -8.43 -55.3)	cmyk 96%, 37%, 0%, 5%
	#2276d8	rgb(34, 118, 216)	hsl(210 73% 49%)	hwb(210 13% 15%)	lch(48.9 58.4 273)	lab(48.9 3.38 -58.3)	cmyk 84%, 45%, 0%, 15%
	#066ec5	rgb(6, 110, 197)	hsl(210 94% 40%)	hwb(210 2.4% 23%)	lch(45.1 53.6 270)	lab(45.1 -0.052 -53.6)	cmyk 97%, 44%, 0%, 23%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#06CDE0

AA - 1.94



#02A4EC

AA - 2.79



#0A98F2

AA - 3.09



#2276D8

AA - 4.51



#066EC5

AA - 5.19



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(77.5% -0.118 -0.059), oklab(68.3% -0.079 -0.13), oklab(66% -0.068 -0.155), oklab(57% -0.042 -0.164), oklab(53.5% -0.049 -0.151))

Fallback colors



background: linear-gradient(45deg, #06CDE0, #02A4EC, #0A98F2, #2276D8, #066EC5)

Colors



<!-- Primary Colors -->
<color name="ocean_color_10">#06CDE0</color>
<color name="ocean_color_20">#02A4EC</color>
<color name="ocean_color_30">#0A98F2</color>
<color name="ocean_color_40">#2276D8</color>
<color name="ocean_color_50">#066EC5</color>

PWA prompt