Ground

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#8f6944	rgb(143, 105, 68)	hsl(30 36% 41%)	hwb(30 27% 44%)	lch(47.7 29.6 65.5)	lab(47.7 12.3 27)	cmyk 0%, 27%, 52%, 44%
	#725938	rgb(114, 89, 56)	hsl(34 34% 33%)	hwb(34 22% 55%)	lch(39.8 24.3 72.6)	lab(39.8 7.27 23.2)	cmyk 0%, 22%, 51%, 55%
	#413727	rgb(65, 55, 39)	hsl(37 25% 20%)	hwb(37 15% 75%)	lch(23.8 12 78)	lab(23.8 2.5 11.8)	cmyk 0%, 15%, 40%, 75%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#8f6944

AA - 4.91



#725938

AA - 6.55



#413727

AAA - 11.66



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(55.1% 0.031 0.064), oklab(48.1% 0.017 0.056), oklab(34.3% 0.006 0.029))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #8f6944, #725938, #413727)

Colors



<!-- Primary Colors -->
<color name="ground_color_10">#8f6944</color>
<color name="ground_color_20">#725938</color>
<color name="ground_color_30">#413727</color>

Gradient PRO

Pro feature only

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

PWA prompt