Latte

#5D4037

#7B5543

#9E6D59

#CB998C

#F0D3BD

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#5d4037	rgb(93, 64, 55)	hsl(14 26% 29%)	oklab(40% 0.03 0.03)	oklch(40% 0.04 38)	color(display-p3 0.35 0.26 0.22)
	#7b5543	rgb(123, 85, 67)	hsl(19 29% 37%)	oklab(49% 0.04 0.04)	oklch(49% 0.06 46)	color(display-p3 0.46 0.34 0.27)
	#9e6d59	rgb(158, 109, 89)	hsl(17 28% 48%)	oklab(58% 0.05 0.05)	oklch(58% 0.07 43)	color(display-p3 0.59 0.44 0.36)
	#cb998c	rgb(203, 153, 140)	hsl(12 38% 67%)	oklab(73% 0.05 0.04)	oklch(73% 0.06 35)	color(display-p3 0.77 0.61 0.56)
	#f0d3bd	rgb(240, 211, 189)	hsl(26 63% 84%)	oklab(89% 0.02 0.04)	oklch(89% 0.04 59)	color(display-p3 0.92 0.83 0.75)

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

#5D4037

AAA - 9.31



#7B5543

AA - 6.51



#9E6D59

AA - 4.38



#CB998C

AA - 2.47



#F0D3BD

AA - 1.42



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(40.2% 0.034 0.027), oklab(48.6% 0.04 0.042), oklab(58.1% 0.051 0.048), oklab(72.7% 0.052 0.036), oklab(88.5% 0.022 0.038))

Fallback colors



background: linear-gradient(45deg, #5D4037, #7B5543, #9E6D59, #CB998C, #F0D3BD)

Colors



<!-- Primary Colors -->
<color name="latte_color_10">#5D4037</color>
<color name="latte_color_20">#7B5543</color>
<color name="latte_color_30">#9E6D59</color>
<color name="latte_color_40">#CB998C</color>
<color name="latte_color_50">#F0D3BD</color>

PWA prompt