#F2F0E6

#EBE4DB

#E0DED1

#D4D0C8

#C8C2B9

Pearl

#F2F0E6

#EBE4DB

#E0DED1

#D4D0C8

#C8C2B9



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

White

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f2f0e6	rgb(242, 240, 230)	hsl(50 32% 93%)	hwb(50 90% 5.1%)	lch(94.7 5.13 96.6)	lab(94.7 -0.59 5.1)	cmyk 0%, 1%, 5%, 5%
	#ebe4db	rgb(235, 228, 219)	hsl(34 29% 89%)	hwb(34 86% 7.8%)	lch(91 5.45 76.1)	lab(91 1.31 5.29)	cmyk 0%, 3%, 7%, 8%
	#e0ded1	rgb(224, 222, 209)	hsl(52 19% 85%)	hwb(52 82% 12%)	lch(88.4 6.72 98.3)	lab(88.4 -0.973 6.65)	cmyk 0%, 1%, 7%, 12%
	#d4d0c8	rgb(212, 208, 200)	hsl(40 12% 81%)	hwb(40 78% 17%)	lch(83.6 4.51 85.2)	lab(83.6 0.379 4.5)	cmyk 0%, 2%, 6%, 17%
	#c8c2b9	rgb(200, 194, 185)	hsl(36 12% 75%)	hwb(36 73% 22%)	lch(78.7 5.42 79.4)	lab(78.7 0.993 5.33)	cmyk 0%, 3%, 8%, 22%

 Click a color format to copy 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