Teal Life

#00C8B4

#44F7D3

#88FFEB

#E6F3F0

#FFBB9D

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#00c8b4	rgb(0, 200, 180)	hsl(170 100% 39%)	oklab(75% -0.13 -0.01)	oklch(75% 0.13 180)	color(display-p3 0.35 0.77 0.71)
	#44f7d3	rgb(68, 247, 211)	hsl(170 92% 62%)	oklab(88% -0.15 0.01)	oklch(88% 0.15 180)	color(display-p3 0.5 0.96 0.83)
	#88ffeb	rgb(136, 255, 235)	hsl(170 100% 77%)	oklab(92% -0.11 0)	oklch(92% 0.11 180)	color(display-p3 0.65 0.99 0.92)
	#e6f3f0	rgb(230, 243, 240)	hsl(170 35% 93%)	oklab(95% -0.01 0)	oklch(95% 0.01 180)	color(display-p3 0.91 0.95 0.94)
	#ffbb9d	rgb(255, 187, 157)	hsl(18 100% 81%)	oklab(85% 0.06 0.06)	oklch(85% 0.09 45)	color(display-p3 0.96 0.74 0.63)

 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.

#00C8B4

AA - 2.11



#44F7D3

AA - 1.35



#88FFEB

AA - 1.19



#E6F3F0

AA - 1.13



#FFBB9D

AA - 1.63



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(74.7% -0.133 -0.006), oklab(87.9% -0.15 0.011), oklab(92.5% -0.112 -0.003), oklab(95.4% -0.014 0), oklab(84.8% 0.063 0.063))

Fallback colors



background: linear-gradient(45deg, #00C8B4, #44F7D3, #88FFEB, #E6F3F0, #FFBB9D)

Colors



<!-- Primary Colors -->
<color name="teal_life_color_10">#00C8B4</color>
<color name="teal_life_color_20">#44F7D3</color>
<color name="teal_life_color_30">#88FFEB</color>
<color name="teal_life_color_40">#E6F3F0</color>
<color name="teal_life_color_50">#FFBB9D</color>

PWA prompt