Rock

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#634a3a	rgb(99, 74, 58)	hsl(23 26% 31%)	hwb(23 23% 61%)	lch(33.9 16.7 56.5)	lab(33.9 9.19 13.9)	cmyk 0%, 25%, 41%, 61%
	#ac8250	rgb(172, 130, 80)	hsl(33 37% 49%)	hwb(33 31% 33%)	lch(57.7 35.6 69.8)	lab(57.7 12.3 33.5)	cmyk 0%, 24%, 53%, 33%
	#e8c5ae	rgb(232, 197, 174)	hsl(24 56% 80%)	hwb(24 68% 9%)	lch(82.1 19.4 58)	lab(82.1 10.3 16.4)	cmyk 0%, 15%, 25%, 9%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#634a3a

AAA - 8.16



#ac8250

AA - 3.46



#e8c5ae

AA - 1.61



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(43.1% 0.025 0.034), oklab(63.6% 0.029 0.079), oklab(84.8% 0.029 0.042))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #634a3a, #ac8250, #e8c5ae)

Colors



<!-- Primary Colors -->
<color name="rock_color_10">#634a3a</color>
<color name="rock_color_20">#ac8250</color>
<color name="rock_color_30">#e8c5ae</color>

Gradient PRO

Pro feature only

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

PWA prompt