Pearl

#F2F0E6

#EBE4DB

#E0DED1

#D4D0C8

#C8C2B9

Actions

Explore the palette in different formats, and actions.

Colors overview

White

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f2f0e6	rgb(242, 240, 230)	hsl(50 32% 93%)	oklab(95% 0 0.01)	oklch(95% 0.01 97)	color(display-p3 0.95 0.94 0.91)
	#ebe4db	rgb(235, 228, 219)	hsl(34 29% 89%)	oklab(92% 0 0.01)	oklch(92% 0.01 74)	color(display-p3 0.92 0.9 0.86)
	#e0ded1	rgb(224, 222, 209)	hsl(52 19% 85%)	oklab(90% 0 0.02)	oklch(90% 0.02 100)	color(display-p3 0.88 0.87 0.82)
	#d4d0c8	rgb(212, 208, 200)	hsl(40 12% 81%)	oklab(86% 0 0.01)	oklch(86% 0.01 85)	color(display-p3 0.83 0.82 0.79)
	#c8c2b9	rgb(200, 194, 185)	hsl(36 12% 75%)	oklab(82% 0 0.01)	oklch(82% 0.01 78)	color(display-p3 0.78 0.76 0.73)

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

#F2F0E6

AA - 1.14



#EBE4DB

AA - 1.26



#E0DED1

AA - 1.35



#D4D0C8

AA - 1.53



#C8C2B9

AA - 1.76



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(95.4% -0.002 0.013), oklab(92.2% 0.004 0.014), oklab(89.9% -0.003 0.017), oklab(85.9% 0.001 0.012), oklab(81.6% 0.003 0.014))

Fallback colors



background: linear-gradient(45deg, #F2F0E6, #EBE4DB, #E0DED1, #D4D0C8, #C8C2B9)

Colors



<!-- Primary Colors -->
<color name="pearl_color_10">#F2F0E6</color>
<color name="pearl_color_20">#EBE4DB</color>
<color name="pearl_color_30">#E0DED1</color>
<color name="pearl_color_40">#D4D0C8</color>
<color name="pearl_color_50">#C8C2B9</color>

PWA prompt