Purple/Lime

#7b1fa2

#9c27b0

#ffffff

#cddc39

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#7b1fa2	rgb(123, 31, 162)	hsl(280 68% 38%)	oklab(45% 0.14 -0.15)	oklch(45% 0.2 310)	color(display-p3 0.44 0.15 0.61)
	#9c27b0	rgb(156, 39, 176)	hsl(290 64% 42%)	oklab(52% 0.17 -0.13)	oklch(52% 0.22 320)	color(display-p3 0.56 0.19 0.67)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#cddc39	rgb(205, 220, 57)	hsl(66 70% 54%)	oklab(86% -0.07 0.16)	oklch(86% 0.18 110)	color(display-p3 0.81 0.86 0.35)
	#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.

#7b1fa2

AAA - 8.2



#9c27b0

AA - 6.3



#ffffff

AA - 1



#cddc39

AA - 1.51



#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(45.3% 0.135 -0.145), oklab(51.7% 0.168 -0.135), oklab(100% 0 0), oklab(85.6% -0.074 0.16), oklab(24.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #7b1fa2, #9c27b0, #ffffff, #cddc39, #212121)

Colors



<!-- Primary Colors -->
<color name="purple/lime_color_10">#7b1fa2</color>
<color name="purple/lime_color_20">#9c27b0</color>
<color name="purple/lime_color_30">#ffffff</color>
<color name="purple/lime_color_40">#cddc39</color>
<color name="purple/lime_color_50">#212121</color>

PWA prompt