#382400

#c3a97f

#fbdcc4

#fff1e5

#ffffff

Coffee

#382400

#c3a97f

#fbdcc4

#fff1e5

#ffffff



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

Brown

White

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#382400	rgb(56, 36, 0)	hsl(39 100% 11%)	hwb(39 0% 78%)	lch(16.2 24.8 73.2)	lab(16.2 7.15 23.7)	cmyk 0%, 36%, 100%, 78%
	#c3a97f	rgb(195, 169, 127)	hsl(37 36% 63%)	hwb(37 50% 24%)	lch(70.8 26 78.2)	lab(70.8 5.29 25.4)	cmyk 0%, 13%, 35%, 24%
	#fbdcc4	rgb(251, 220, 196)	hsl(26 87% 88%)	hwb(26 77% 1.6%)	lch(89.9 18.1 62.3)	lab(89.9 8.41 16)	cmyk 0%, 12%, 22%, 2%
	#fff1e5	rgb(255, 241, 229)	hsl(28 100% 95%)	hwb(28 90% 0%)	lch(96 8.32 65.8)	lab(96 3.41 7.59)	cmyk 0%, 5%, 10%, 0%
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	hwb(none 100% 0%)	lch(100 0 none)	lab(100 0 0)	cmyk 0%, 0%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#382400

AAA - 14.78



#c3a97f

AA - 2.25



#fbdcc4

AA - 1.3



#fff1e5

AA - 1.1



#ffffff

AA - 1



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(27.8% 0.013 0.057), oklab(74.7% 0.012 0.063), oklab(91.4% 0.024 0.041), oklab(96.6% 0.01 0.02), oklab(100% 0 0))

Fallback colors



background: linear-gradient(45deg, #382400, #c3a97f, #fbdcc4, #fff1e5, #ffffff)

Colors



<!-- Primary Colors -->
<color name="coffee_color_10">#382400</color>
<color name="coffee_color_20">#c3a97f</color>
<color name="coffee_color_30">#fbdcc4</color>
<color name="coffee_color_40">#fff1e5</color>
<color name="coffee_color_50">#ffffff</color>

PWA prompt