Purple/Yellow

#512da8

#673ab7

#d1c4e9

#ffeb3b

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#512da8	rgb(81, 45, 168)	hsl(260 58% 42%)	oklab(42% 0.06 -0.17)	oklch(42% 0.18 290)	color(display-p3 0.3 0.18 0.63)
	#673ab7	rgb(103, 58, 183)	hsl(260 52% 47%)	oklab(47% 0.08 -0.17)	oklch(47% 0.19 290)	color(display-p3 0.38 0.24 0.69)
	#d1c4e9	rgb(209, 196, 233)	hsl(260 46% 84%)	oklab(84% 0.03 -0.05)	oklch(84% 0.05 300)	color(display-p3 0.81 0.77 0.9)
	#ffeb3b	rgb(255, 235, 59)	hsl(54 100% 62%)	oklab(93% -0.04 0.18)	oklch(93% 0.18 100)	color(display-p3 0.99 0.92 0.38)
	#212121	rgb(33, 33, 33)	hsl(none 0% 13%)	oklab(25% 0 0)	oklch(25% 0 none)	color(display-p3 0.13 0.13 0.13)

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

#512da8

AAA - 9.16



#673ab7

AAA - 7.32



#d1c4e9

AA - 1.64



#ffeb3b

AA - 1.22



#212121

AAA - 16.1



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(42.1% 0.061 -0.173), oklab(47.4% 0.078 -0.169), oklab(84.3% 0.027 -0.045), oklab(92.8% -0.039 0.176), oklab(24.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #512da8, #673ab7, #d1c4e9, #ffeb3b, #212121)

Colors



<!-- Primary Colors -->
<color name="purple/yellow_color_10">#512da8</color>
<color name="purple/yellow_color_20">#673ab7</color>
<color name="purple/yellow_color_30">#d1c4e9</color>
<color name="purple/yellow_color_40">#ffeb3b</color>
<color name="purple/yellow_color_50">#212121</color>

PWA prompt