Drink

#372823

#a3b6bc

#fffbff

#fde3c8

#f0913d

Actions

Explore the palette in different formats, and actions.

Colors overview

Brown

Grey

Orange

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#372823	rgb(55, 40, 35)	hsl(15 22% 18%)	oklab(29% 0.02 0.02)	oklch(29% 0.02 39)	color(display-p3 0.21 0.16 0.14)
	#a3b6bc	rgb(163, 182, 188)	hsl(190 16% 69%)	oklab(76% -0.02 -0.01)	oklch(76% 0.02 220)	color(display-p3 0.65 0.71 0.73)
	#fffbff	rgb(255, 251, 255)	hsl(300 100% 99%)	oklab(99% 0.01 0)	oklch(99% 0.01 330)	color(display-p3 1 0.98 1)
	#fde3c8	rgb(253, 227, 200)	hsl(31 93% 89%)	oklab(93% 0.02 0.04)	oklch(93% 0.05 68)	color(display-p3 0.98 0.89 0.8)
	#f0913d	rgb(240, 145, 61)	hsl(28 86% 59%)	oklab(74% 0.08 0.13)	oklch(74% 0.15 58)	color(display-p3 0.89 0.59 0.31)

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

#372823

AAA - 14.09



#a3b6bc

AA - 2.1



#fffbff

AA - 1.02



#fde3c8

AA - 1.23



#f0913d

AA - 2.38



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(29.3% 0.019 0.015), oklab(76.4% -0.018 -0.014), oklab(99.2% 0.006 -0.004), oklab(93% 0.017 0.042), oklab(74.2% 0.078 0.127))

Fallback colors



background: linear-gradient(45deg, #372823, #a3b6bc, #fffbff, #fde3c8, #f0913d)

Colors



<!-- Primary Colors -->
<color name="drink_color_10">#372823</color>
<color name="drink_color_20">#a3b6bc</color>
<color name="drink_color_30">#fffbff</color>
<color name="drink_color_40">#fde3c8</color>
<color name="drink_color_50">#f0913d</color>

PWA prompt