#6B3A11

#c7a644

#D4C7A1

Cookies



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#6b3a11	rgb(107, 58, 17)	hsl(27 73% 24%)	hwb(27 6.7% 58%)	lch(30.3 39 59.5)	lab(30.3 19.8 33.6)	cmyk 0%, 46%, 84%, 58%
	#c7a644	rgb(199, 166, 68)	hsl(45 54% 52%)	hwb(45 27% 22%)	lch(69.7 53.8 85.1)	lab(69.7 4.58 53.6)	cmyk 0%, 17%, 66%, 22%
	#d4c7a1	rgb(212, 199, 161)	hsl(45 37% 73%)	hwb(45 63% 17%)	lch(80.6 20.8 89.2)	lab(80.6 0.288 20.8)	cmyk 0%, 6%, 24%, 17%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#6B3A11

AAA - 9.38



#c7a644

AA - 2.34



#D4C7A1

AA - 1.68



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(40.2% 0.049 0.072), oklab(73.6% -0.001 0.122), oklab(83.1% -0.001 0.053))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #6B3A11, #c7a644, #D4C7A1)

Colors



<!-- Primary Colors -->
<color name="cookies_color_10">#6B3A11</color>
<color name="cookies_color_20">#c7a644</color>
<color name="cookies_color_30">#D4C7A1</color>

Gradient PRO

Pro feature only

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

PWA prompt