T-Purple

Actions

Explore the gradient in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#4036ff	rgb(64, 54, 255)	hsl(240 100% 61%)	hwb(240 21% 0%)	lch(37.6 113 299)	lab(37.6 54.7 -98.6)	cmyk 75%, 79%, 0%, 0%
	#7063ff	rgb(112, 99, 255)	hsl(250 100% 69%)	hwb(250 39% 0%)	lch(50.2 86.6 296)	lab(50.2 38.3 -77.7)	cmyk 56%, 61%, 0%, 0%
	#846bff	rgb(132, 107, 255)	hsl(250 100% 71%)	hwb(250 42% 0%)	lch(53.7 81.4 298)	lab(53.7 38.3 -71.9)	cmyk 48%, 58%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#4036ff

AA - 6.58



#7063ff

AA - 4.27



#846bff

AA - 3.79



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(50.7% 0.012 -0.277), oklab(60% 0.043 -0.219), oklab(62.9% 0.06 -0.202))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #4036ff, #7063ff, #846bff)

Colors



<!-- Primary Colors -->
<color name="t-purple_color_10">#4036ff</color>
<color name="t-purple_color_20">#7063ff</color>
<color name="t-purple_color_30">#846bff</color>

Gradient PRO

Pro feature only

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

PWA prompt