#4c269a

#e4d7ff

#ffdfaf

#f1884e

#191c32

Tasks

#4c269a

#e4d7ff

#ffdfaf

#f1884e

#191c32



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Purple

Orange

Black

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#4c269a	rgb(76, 38, 154)	hsl(260 60% 38%)	hwb(260 15% 40%)	lch(26.6 69.8 304)	lab(26.6 39 -57.9)	cmyk 51%, 75%, 0%, 40%
	#e4d7ff	rgb(228, 215, 255)	hsl(260 100% 92%)	hwb(260 84% 0%)	lch(88 20.6 300)	lab(88 10.2 -17.9)	cmyk 11%, 16%, 0%, 0%
	#ffdfaf	rgb(255, 223, 175)	hsl(36 100% 84%)	hwb(36 69% 0%)	lch(90.7 28.6 77)	lab(90.7 6.43 27.9)	cmyk 0%, 13%, 31%, 0%
	#f1884e	rgb(241, 136, 78)	hsl(21 85% 63%)	hwb(21 31% 5.5%)	lch(67.8 61.6 52.3)	lab(67.8 37.7 48.7)	cmyk 0%, 44%, 68%, 5%
	#191c32	rgb(25, 28, 50)	hsl(230 33% 15%)	hwb(230 9.8% 80%)	lch(10.9 15.8 285)	lab(10.9 4.04 -15.2)	cmyk 50%, 44%, 0%, 80%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#4c269a

AAA - 10.23



#e4d7ff

AA - 1.35



#ffdfaf

AA - 1.27



#f1884e

AA - 2.5



#191c32

AAA - 16.75



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(39.5% 0.063 -0.163), oklab(90.2% 0.028 -0.048), oklab(91.9% 0.015 0.07), oklab(73% 0.099 0.11), oklab(23.5% 0.005 -0.042))

Fallback colors



background: linear-gradient(45deg, #4c269a, #e4d7ff, #ffdfaf, #f1884e, #191c32)

Colors



<!-- Primary Colors -->
<color name="tasks_color_10">#4c269a</color>
<color name="tasks_color_20">#e4d7ff</color>
<color name="tasks_color_30">#ffdfaf</color>
<color name="tasks_color_40">#f1884e</color>
<color name="tasks_color_50">#191c32</color>

PWA prompt