Chai

Actions

Explore the gradient in different formats, and actions.

Colors overview

Brown

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e1c2d5	rgb(225, 194, 213)	hsl(320 34% 82%)	hwb(320 76% 12%)	lch(81.5 14.7 339)	lab(81.5 13.7 -5.25)	cmyk 0%, 14%, 5%, 12%
	#bc967e	rgb(188, 150, 126)	hsl(23 32% 62%)	hwb(23 49% 26%)	lch(65.2 22 56.5)	lab(65.2 12.2 18.4)	cmyk 0%, 20%, 33%, 26%
	#7a2810	rgb(122, 40, 16)	hsl(14 77% 27%)	hwb(14 6.3% 52%)	lch(29.1 49.4 44)	lab(29.1 35.5 34.3)	cmyk 0%, 67%, 87%, 52%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e1c2d5

AA - 1.63



#bc967e

AA - 2.69



#7a2810

AAA - 9.81



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(84.6% 0.041 -0.014), oklab(70.2% 0.034 0.046), oklab(39.8% 0.096 0.071))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #e1c2d5, #bc967e, #7a2810)

Colors



<!-- Primary Colors -->
<color name="chai_color_10">#e1c2d5</color>
<color name="chai_color_20">#bc967e</color>
<color name="chai_color_30">#7a2810</color>

Gradient PRO

Pro feature only

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

PWA prompt