Coffee

#A57A5F

#795341

#694337

#54342A

#3A2016

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#a57a5f	rgb(165, 122, 95)	hsl(23 28% 51%)	oklab(62% 0.04 0.05)	oklch(62% 0.07 53)	color(display-p3 0.62 0.49 0.39)
	#795341	rgb(121, 83, 65)	hsl(19 30% 36%)	oklab(48% 0.04 0.04)	oklch(48% 0.06 46)	color(display-p3 0.45 0.33 0.27)
	#694337	rgb(105, 67, 55)	hsl(14 31% 31%)	oklab(42% 0.04 0.04)	oklch(42% 0.06 38)	color(display-p3 0.39 0.27 0.22)
	#54342a	rgb(84, 52, 42)	hsl(14 33% 25%)	oklab(36% 0.04 0.03)	oklch(36% 0.05 38)	color(display-p3 0.31 0.21 0.17)
	#3a2016	rgb(58, 32, 22)	hsl(17 45% 16%)	oklab(28% 0.03 0.03)	oklch(28% 0.04 42)	color(display-p3 0.21 0.13 0.09)

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

#A57A5F

AA - 3.78



#795341

AA - 6.71



#694337

AAA - 8.54



#54342A

AAA - 11.04



#3A2016

AAA - 15.02



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(61.5% 0.04 0.053), oklab(47.9% 0.04 0.042), oklab(42.3% 0.044 0.035), oklab(36.1% 0.039 0.031), oklab(27.5% 0.033 0.029))

Fallback colors



background: linear-gradient(45deg, #A57A5F, #795341, #694337, #54342A, #3A2016)

Colors



<!-- Primary Colors -->
<color name="coffee_color_10">#A57A5F</color>
<color name="coffee_color_20">#795341</color>
<color name="coffee_color_30">#694337</color>
<color name="coffee_color_40">#54342A</color>
<color name="coffee_color_50">#3A2016</color>

PWA prompt