Catrina

#68217A

#945EB3

#B68FD7

#D9C2E9

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#68217a	rgb(104, 33, 122)	hsl(290 57% 30%)	oklab(40% 0.11 -0.1)	oklch(40% 0.15 320)	color(display-p3 0.38 0.15 0.46)
	#945eb3	rgb(148, 94, 179)	hsl(280 36% 54%)	oklab(58% 0.09 -0.1)	oklch(58% 0.14 310)	color(display-p3 0.55 0.38 0.68)
	#b68fd7	rgb(182, 143, 215)	hsl(270 47% 70%)	oklab(71% 0.07 -0.09)	oklch(71% 0.11 310)	color(display-p3 0.69 0.57 0.82)
	#d9c2e9	rgb(217, 194, 233)	hsl(280 47% 84%)	oklab(85% 0.04 -0.04)	oklch(85% 0.06 310)	color(display-p3 0.84 0.76 0.9)

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

#68217A

AAA - 10.06



#945EB3

AA - 4.65



#B68FD7

AA - 2.65



#D9C2E9

AA - 1.63



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.8% 0.115 -0.101), oklab(57.5% 0.092 -0.102), oklab(71.3% 0.069 -0.086), oklab(84.6% 0.039 -0.044))

Fallback colors



background: linear-gradient(45deg, #68217A, #945EB3, #B68FD7, #D9C2E9)

Colors



<!-- Primary Colors -->
<color name="catrina_color_10">#68217A</color>
<color name="catrina_color_20">#945EB3</color>
<color name="catrina_color_30">#B68FD7</color>
<color name="catrina_color_40">#D9C2E9</color>

PWA prompt