Royal

#7161EF

#957FEF

#B79CED

#DEC0F1

#EFD9CE

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#7161ef	rgb(113, 97, 239)	hsl(250 82% 66%)	oklab(59% 0.05 -0.2)	oklch(59% 0.21 280)	color(display-p3 0.43 0.38 0.91)
	#957fef	rgb(149, 127, 239)	hsl(250 78% 72%)	oklab(67% 0.06 -0.15)	oklch(67% 0.16 290)	color(display-p3 0.57 0.5 0.91)
	#b79ced	rgb(183, 156, 237)	hsl(260 69% 77%)	oklab(75% 0.06 -0.1)	oklch(75% 0.12 300)	color(display-p3 0.7 0.62 0.91)
	#dec0f1	rgb(222, 192, 241)	hsl(280 64% 85%)	oklab(85% 0.05 -0.05)	oklch(85% 0.07 310)	color(display-p3 0.85 0.76 0.93)
	#efd9ce	rgb(239, 217, 206)	hsl(20 51% 87%)	oklab(90% 0.02 0.02)	oklch(90% 0.03 48)	color(display-p3 0.92 0.85 0.81)

 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.

#7161EF

AA - 4.5



#957FEF

AA - 3.2



#B79CED

AA - 2.33



#DEC0F1

AA - 1.62



#EFD9CE

AA - 1.35



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(58.6% 0.047 -0.2), oklab(66.6% 0.056 -0.152), oklab(74.7% 0.057 -0.103), oklab(84.9% 0.05 -0.055), oklab(90% 0.019 0.021))

Fallback colors



background: linear-gradient(45deg, #7161EF, #957FEF, #B79CED, #DEC0F1, #EFD9CE)

Colors



<!-- Primary Colors -->
<color name="royal_color_10">#7161EF</color>
<color name="royal_color_20">#957FEF</color>
<color name="royal_color_30">#B79CED</color>
<color name="royal_color_40">#DEC0F1</color>
<color name="royal_color_50">#EFD9CE</color>

PWA prompt