Pastel

#abe6ce

#dcedc2

#ffd3be

#ffaaa6

#ff8c94

Actions

Explore the palette in different formats, and actions.

Colors overview

Green

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#abe6ce	rgb(171, 230, 206)	hsl(160 54% 79%)	oklab(88% -0.07 0.01)	oklch(88% 0.07 170)	color(display-p3 0.72 0.9 0.81)
	#dcedc2	rgb(220, 237, 194)	hsl(84 54% 85%)	oklab(92% -0.03 0.05)	oklch(92% 0.06 130)	color(display-p3 0.88 0.93 0.78)
	#ffd3be	rgb(255, 211, 190)	hsl(19 100% 87%)	oklab(90% 0.04 0.04)	oklch(90% 0.06 47)	color(display-p3 0.97 0.83 0.76)
	#ffaaa6	rgb(255, 170, 166)	hsl(2.7 100% 83%)	oklab(82% 0.09 0.04)	oklch(82% 0.1 22)	color(display-p3 0.95 0.68 0.66)
	#ff8c94	rgb(255, 140, 148)	hsl(360 100% 77%)	oklab(77% 0.13 0.04)	oklch(77% 0.14 16)	color(display-p3 0.94 0.57 0.59)

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

#abe6ce

AA - 1.4



#dcedc2

AA - 1.23



#ffd3be

AA - 1.37



#ffaaa6

AA - 1.81



#ff8c94

AA - 2.22



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.8% -0.067 0.015), oklab(92.2% -0.034 0.049), oklab(89.9% 0.039 0.042), oklab(82% 0.093 0.039), oklab(76.7% 0.133 0.039))

Fallback colors



background: linear-gradient(45deg, #abe6ce, #dcedc2, #ffd3be, #ffaaa6, #ff8c94)

Colors



<!-- Primary Colors -->
<color name="pastel_color_10">#abe6ce</color>
<color name="pastel_color_20">#dcedc2</color>
<color name="pastel_color_30">#ffd3be</color>
<color name="pastel_color_40">#ffaaa6</color>
<color name="pastel_color_50">#ff8c94</color>

PWA prompt