#FFE4C4

#F5D9B3

#E8C89B

#D9B281

Latte

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffe4c4	rgb(255, 228, 196)	hsl(33 100% 88%)	hwb(33 77% 0%)	lch(92.2 20.2 72.6)	lab(92.2 6.02 19.2)	cmyk 0%, 11%, 23%, 0%
	#f5d9b3	rgb(245, 217, 179)	hsl(35 77% 83%)	hwb(35 70% 3.9%)	lch(88.3 23.3 75.3)	lab(88.3 5.9 22.5)	cmyk 0%, 11%, 27%, 4%
	#e8c89b	rgb(232, 200, 155)	hsl(35 63% 76%)	hwb(35 61% 9%)	lch(82.6 27.9 75.5)	lab(82.6 6.99 27)	cmyk 0%, 14%, 33%, 9%
	#d9b281	rgb(217, 178, 129)	hsl(33 54% 68%)	hwb(33 51% 15%)	lch(75.3 32.2 72.3)	lab(75.3 9.8 30.7)	cmyk 0%, 18%, 41%, 15%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FFE4C4

AA - 1.22



#F5D9B3

AA - 1.35



#E8C89B

AA - 1.59



#D9B281

AA - 1.97



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(93.3% 0.016 0.049), oklab(89.9% 0.015 0.057), oklab(84.9% 0.017 0.067), oklab(78.7% 0.024 0.075))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FFE4C4, #F5D9B3, #E8C89B, #D9B281)

Colors



<!-- Primary Colors -->
<color name="latte_color_10">#FFE4C4</color>
<color name="latte_color_20">#F5D9B3</color>
<color name="latte_color_30">#E8C89B</color>
<color name="latte_color_40">#D9B281</color>

Gradient PRO

Pro feature only

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

PWA prompt