Powderblue

#ade2d1

#e6f7f1

#ffffff

#d1ade2

#e2d1ad

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Yellow

White

Pink

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#ade2d1	rgb(173, 226, 209)	hsl(160 48% 78%)	oklab(87% -0.06 0.01)	oklch(87% 0.06 170)	color(display-p3 0.72 0.88 0.82)
	#e6f7f1	rgb(230, 247, 241)	hsl(160 52% 94%)	oklab(96% -0.02 0)	oklch(96% 0.02 170)	color(display-p3 0.91 0.97 0.95)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#d1ade2	rgb(209, 173, 226)	hsl(280 48% 78%)	oklab(80% 0.06 -0.06)	oklch(80% 0.08 310)	color(display-p3 0.8 0.68 0.87)
	#e2d1ad	rgb(226, 209, 173)	hsl(41 48% 78%)	oklab(87% 0 0.05)	oklch(87% 0.05 86)	color(display-p3 0.87 0.82 0.69)

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

#ade2d1

AA - 1.44



#e6f7f1

AA - 1.1



#ffffff

AA - 1



#d1ade2

AA - 1.94



#e2d1ad

AA - 1.5



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(87.1% -0.059 0.007), oklab(96.2% -0.019 0.002), oklab(100% 0 0), oklab(79.7% 0.059 -0.059), oklab(86.5% 0.004 0.051))

Fallback colors



background: linear-gradient(45deg, #ade2d1, #e6f7f1, #ffffff, #d1ade2, #e2d1ad)

Colors



<!-- Primary Colors -->
<color name="powderblue_color_10">#ade2d1</color>
<color name="powderblue_color_20">#e6f7f1</color>
<color name="powderblue_color_30">#ffffff</color>
<color name="powderblue_color_40">#d1ade2</color>
<color name="powderblue_color_50">#e2d1ad</color>

PWA prompt