#33292F

#473C3A

#5B4F4B

#6F6260

Old



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

Grey

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#33292f	rgb(51, 41, 47)	hsl(320 11% 18%)	hwb(320 16% 80%)	lch(17.9 6.11 340)	lab(17.9 5.74 -2.1)	cmyk 0%, 20%, 8%, 80%
	#473c3a	rgb(71, 60, 58)	hsl(9.2 10% 25%)	hwb(9.2 23% 72%)	lch(26.4 5.6 33.7)	lab(26.4 4.66 3.11)	cmyk 0%, 15%, 18%, 72%
	#5b4f4b	rgb(91, 79, 75)	hsl(15 9.6% 33%)	hwb(15 29% 64%)	lch(34.7 6.29 43.1)	lab(34.7 4.6 4.3)	cmyk 0%, 13%, 18%, 64%
	#6f6260	rgb(111, 98, 96)	hsl(8 7.2% 41%)	hwb(8 38% 56%)	lch(42.8 5.99 31.7)	lab(42.8 5.1 3.14)	cmyk 0%, 12%, 14%, 56%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#33292F

AAA - 14



#473C3A

AAA - 10.63



#5B4F4B

AAA - 7.88



#6F6260

AA - 5.84



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(29.4% 0.017 -0.006), oklab(36.7% 0.014 0.008), oklab(43.8% 0.013 0.011), oklab(50.8% 0.015 0.008))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #33292F, #473C3A, #5B4F4B, #6F6260)

Colors



<!-- Primary Colors -->
<color name="old_color_10">#33292F</color>
<color name="old_color_20">#473C3A</color>
<color name="old_color_30">#5B4F4B</color>
<color name="old_color_40">#6F6260</color>

Gradient PRO

Pro feature only

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

PWA prompt