#02a363

#33e89a

#c7f8ff

#91dcff

#0490bf

Reef

#02a363

#33e89a

#c7f8ff

#91dcff

#0490bf



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Green

Blue

Cyan

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#02a363	rgb(2, 163, 99)	hsl(160 98% 32%)	hwb(160 0.78% 36%)	lch(59 54 155)	lab(59 -49 22.8)	cmyk 99%, 0%, 39%, 36%
	#33e89a	rgb(51, 232, 154)	hsl(150 80% 55%)	hwb(150 20% 9%)	lch(82.1 64.2 157)	lab(82.1 -59.2 24.9)	cmyk 78%, 0%, 34%, 9%
	#c7f8ff	rgb(199, 248, 255)	hsl(190 100% 89%)	hwb(190 78% 0%)	lch(94.3 17.4 210)	lab(94.3 -15 -8.79)	cmyk 22%, 3%, 0%, 0%
	#91dcff	rgb(145, 220, 255)	hsl(200 100% 78%)	hwb(200 57% 0%)	lch(83.8 30.4 235)	lab(83.8 -17.5 -24.9)	cmyk 43%, 14%, 0%, 0%
	#0490bf	rgb(4, 144, 191)	hsl(200 96% 38%)	hwb(200 1.6% 25%)	lch(55.3 39.6 240)	lab(55.3 -20.1 -34.1)	cmyk 98%, 25%, 0%, 25%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#02a363

AA - 3.27



#33e89a

AA - 1.59



#c7f8ff

AA - 1.14



#91dcff

AA - 1.51



#0490bf

AA - 3.65



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(63% -0.138 0.058), oklab(82.6% -0.167 0.065), oklab(94.7% -0.045 -0.023), oklab(85.8% -0.058 -0.067), oklab(61.2% -0.078 -0.094))

Fallback colors



background: linear-gradient(45deg, #02a363, #33e89a, #c7f8ff, #91dcff, #0490bf)

Colors



<!-- Primary Colors -->
<color name="reef_color_10">#02a363</color>
<color name="reef_color_20">#33e89a</color>
<color name="reef_color_30">#c7f8ff</color>
<color name="reef_color_40">#91dcff</color>
<color name="reef_color_50">#0490bf</color>

PWA prompt