Teal/Pink

#00796b

#009688

#ffffff

#ff4081

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Pink

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#00796b	rgb(0, 121, 107)	hsl(170 100% 24%)	oklab(52% -0.09 0)	oklch(52% 0.09 180)	color(display-p3 0.2 0.47 0.42)
	#009688	rgb(0, 150, 136)	hsl(170 100% 29%)	oklab(60% -0.11 -0.01)	oklch(60% 0.11 180)	color(display-p3 0.26 0.58 0.53)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#ff4081	rgb(255, 64, 129)	hsl(340 100% 63%)	oklab(67% 0.23 0.02)	oklch(67% 0.23 5.7)	color(display-p3 0.92 0.32 0.51)
	#212121	rgb(33, 33, 33)	hsl(none 0% 13%)	oklab(25% 0 0)	oklch(25% 0 none)	color(display-p3 0.13 0.13 0.13)

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

#00796b

AA - 5.32



#009688

AA - 3.67



#ffffff

AA - 1



#ff4081

AA - 3.33



#212121

AAA - 16.1



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(51.7% -0.093 -0.002), oklab(60.5% -0.107 -0.006), oklab(100% 0 0), oklab(67.2% 0.227 0.023), oklab(24.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #00796b, #009688, #ffffff, #ff4081, #212121)

Colors



<!-- Primary Colors -->
<color name="teal/pink_color_10">#00796b</color>
<color name="teal/pink_color_20">#009688</color>
<color name="teal/pink_color_30">#ffffff</color>
<color name="teal/pink_color_40">#ff4081</color>
<color name="teal/pink_color_50">#212121</color>

PWA prompt