Violet

#752091

#ab36cf

#c957bb

#ffc871

#ffe3b1

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#752091	rgb(117, 32, 145)	hsl(290 64% 35%)	oklab(43% 0.13 -0.13)	oklch(43% 0.18 320)	color(display-p3 0.42 0.15 0.55)
	#ab36cf	rgb(171, 54, 207)	hsl(290 61% 51%)	oklab(57% 0.17 -0.16)	oklch(57% 0.23 320)	color(display-p3 0.62 0.25 0.78)
	#c957bb	rgb(201, 87, 187)	hsl(310 51% 56%)	oklab(64% 0.17 -0.09)	oklch(64% 0.19 330)	color(display-p3 0.73 0.37 0.71)
	#ffc871	rgb(255, 200, 113)	hsl(37 100% 72%)	oklab(86% 0.03 0.12)	oklch(86% 0.12 77)	color(display-p3 0.97 0.79 0.49)
	#ffe3b1	rgb(255, 227, 177)	hsl(38 100% 85%)	oklab(93% 0.01 0.07)	oklch(93% 0.07 82)	color(display-p3 0.98 0.89 0.72)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#752091

AAA - 8.85



#ab36cf

AA - 5.04



#c957bb

AA - 3.77



#ffc871

AA - 1.52



#ffe3b1

AA - 1.24



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(43.3% 0.13 -0.125), oklab(57.1% 0.169 -0.159), oklab(63.5% 0.166 -0.086), oklab(86.4% 0.027 0.119), oklab(92.7% 0.01 0.071))

Fallback colors



background: linear-gradient(45deg, #752091, #ab36cf, #c957bb, #ffc871, #ffe3b1)

Colors



<!-- Primary Colors -->
<color name="violet_color_10">#752091</color>
<color name="violet_color_20">#ab36cf</color>
<color name="violet_color_30">#c957bb</color>
<color name="violet_color_40">#ffc871</color>
<color name="violet_color_50">#ffe3b1</color>

PWA prompt