Ocean

#06CDE0

#02A4EC

#0A98F2

#2276D8

#066EC5

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#06cde0	rgb(6, 205, 224)	hsl(190 95% 45%)	oklab(78% -0.12 -0.06)	oklch(78% 0.13 210)	color(display-p3 0.37 0.79 0.87)
	#02a4ec	rgb(2, 164, 236)	hsl(200 98% 47%)	oklab(68% -0.08 -0.13)	oklch(68% 0.15 240)	color(display-p3 0.29 0.63 0.9)
	#0a98f2	rgb(10, 152, 242)	hsl(200 92% 49%)	oklab(66% -0.07 -0.15)	oklch(66% 0.17 250)	color(display-p3 0.27 0.59 0.92)
	#2276d8	rgb(34, 118, 216)	hsl(210 73% 49%)	oklab(57% -0.04 -0.16)	oklch(57% 0.17 260)	color(display-p3 0.24 0.46 0.82)
	#066ec5	rgb(6, 110, 197)	hsl(210 94% 40%)	oklab(54% -0.05 -0.15)	oklch(54% 0.16 250)	color(display-p3 0.19 0.42 0.75)

 Click on a color value to copy it 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