#F2E2CF

#D5C3A5

#A98F72

#836844

Chai Latte



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f2e2cf	rgb(242, 226, 207)	hsl(33 57% 88%)	hwb(33 81% 5.1%)	lch(90.8 11.9 73.5)	lab(90.8 3.37 11.4)	cmyk 0%, 7%, 14%, 5%
	#d5c3a5	rgb(213, 195, 165)	hsl(37 36% 74%)	hwb(37 65% 16%)	lch(79.7 17.8 80.1)	lab(79.7 3.06 17.6)	cmyk 0%, 8%, 23%, 16%
	#a98f72	rgb(169, 143, 114)	hsl(32 24% 55%)	hwb(32 45% 34%)	lch(61.3 20.5 70.4)	lab(61.3 6.89 19.3)	cmyk 0%, 15%, 33%, 34%
	#836844	rgb(131, 104, 68)	hsl(34 32% 39%)	hwb(34 27% 49%)	lch(46.1 25.7 73)	lab(46.1 7.51 24.5)	cmyk 0%, 21%, 48%, 49%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#F2E2CF

AA - 1.26



#D5C3A5

AA - 1.72



#A98F72

AA - 3.06



#836844

AA - 5.21



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.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(92.1% 0.009 0.029), oklab(82.4% 0.007 0.045), oklab(66.6% 0.018 0.048), oklab(53.5% 0.017 0.059))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #F2E2CF, #D5C3A5, #A98F72, #836844)

Colors



<!-- Primary Colors -->
<color name="chai_latte_color_10">#F2E2CF</color>
<color name="chai_latte_color_20">#D5C3A5</color>
<color name="chai_latte_color_30">#A98F72</color>
<color name="chai_latte_color_40">#836844</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt