#36042c

#4c1d43

#712a63

Grapes



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

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#36042c	rgb(54, 4, 44)	hsl(310 86% 11%)	hwb(310 1.6% 79%)	lch(9.49 30.6 336)	lab(9.49 27.9 -12.6)	cmyk 0%, 93%, 19%, 79%
	#4c1d43	rgb(76, 29, 67)	hsl(310 45% 21%)	hwb(310 11% 70%)	lch(19.3 29.8 333)	lab(19.3 26.7 -13.3)	cmyk 0%, 62%, 12%, 70%
	#712a63	rgb(113, 42, 99)	hsl(310 46% 30%)	hwb(310 16% 56%)	lch(29.6 41.4 334)	lab(29.6 37.2 -18.1)	cmyk 0%, 63%, 12%, 56%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#36042c

AAA - 17.34



#4c1d43

AAA - 13.42



#712a63

AAA - 9.48



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(23.2% 0.086 -0.035), oklab(31.6% 0.081 -0.037), oklab(40.9% 0.113 -0.05))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #36042c, #4c1d43, #712a63)

Colors



<!-- Primary Colors -->
<color name="grapes_color_10">#36042c</color>
<color name="grapes_color_20">#4c1d43</color>
<color name="grapes_color_30">#712a63</color>

Gradient PRO

Pro feature only

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

PWA prompt