#3D2B20

#4A342A

#573D34

#64463E

#715048

Chocolate

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#3d2b20	rgb(61, 43, 32)	hsl(23 31% 18%)	hwb(23 13% 76%)	lch(19.5 12.9 55.3)	lab(19.5 7.34 10.6)	cmyk 0%, 30%, 48%, 76%
	#4a342a	rgb(74, 52, 42)	hsl(19 28% 23%)	hwb(19 16% 71%)	lch(24.1 13.8 49)	lab(24.1 9.09 10.4)	cmyk 0%, 30%, 43%, 71%
	#573d34	rgb(87, 61, 52)	hsl(15 25% 27%)	hwb(15 20% 66%)	lch(28.6 14.9 43.8)	lab(28.6 10.8 10.3)	cmyk 0%, 30%, 40%, 66%
	#64463e	rgb(100, 70, 62)	hsl(13 23% 32%)	hwb(13 24% 61%)	lch(33 16.1 39.5)	lab(33 12.4 10.2)	cmyk 0%, 30%, 38%, 61%
	#715048	rgb(113, 80, 72)	hsl(12 22% 36%)	hwb(12 28% 56%)	lch(37.5 17 38.1)	lab(37.5 13.4 10.5)	cmyk 0%, 29%, 36%, 56%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#3D2B20

AAA - 13.42



#4A342A

AAA - 11.56



#573D34

AAA - 9.89



#64463E

AAA - 8.44



#715048

AAA - 7.13



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(30.7% 0.02 0.026), oklab(34.7% 0.025 0.026), oklab(38.7% 0.031 0.026), oklab(42.5% 0.036 0.025), oklab(46.5% 0.039 0.026))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #3D2B20, #4A342A, #573D34, #64463E, #715048)

Colors



<!-- Primary Colors -->
<color name="chocolate_color_10">#3D2B20</color>
<color name="chocolate_color_20">#4A342A</color>
<color name="chocolate_color_30">#573D34</color>
<color name="chocolate_color_40">#64463E</color>
<color name="chocolate_color_50">#715048</color>

Gradient PRO

Pro feature only

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

PWA prompt