Harmony v2

#8d3bf7

#b784fa

#d4b5fc

#c7fa85

#a6f73b

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Green

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#8d3bf7	rgb(141, 59, 247)	hsl(270 92% 60%)	oklab(57% 0.12 -0.23)	oklch(57% 0.26 300)	color(display-p3 0.51 0.25 0.93)
	#b784fa	rgb(183, 132, 250)	hsl(270 92% 75%)	oklab(71% 0.09 -0.15)	oklch(71% 0.17 300)	color(display-p3 0.69 0.53 0.95)
	#d4b5fc	rgb(212, 181, 252)	hsl(270 92% 85%)	oklab(82% 0.06 -0.09)	oklch(82% 0.1 300)	color(display-p3 0.81 0.71 0.97)
	#c7fa85	rgb(199, 250, 133)	hsl(86 92% 75%)	oklab(92% -0.1 0.12)	oklch(92% 0.16 130)	color(display-p3 0.82 0.97 0.58)
	#a6f73b	rgb(166, 247, 59)	hsl(86 92% 60%)	oklab(89% -0.15 0.17)	oklch(89% 0.22 130)	color(display-p3 0.72 0.96 0.37)

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

#8d3bf7

AA - 5.12



#b784fa

AA - 2.72



#d4b5fc

AA - 1.77



#c7fa85

AA - 1.2



#a6f73b

AA - 1.31



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(56.9% 0.117 -0.229), oklab(71.2% 0.092 -0.146), oklab(82.4% 0.058 -0.085), oklab(92.5% -0.097 0.122), oklab(89.1% -0.145 0.169))

Fallback colors



background: linear-gradient(45deg, #8d3bf7, #b784fa, #d4b5fc, #c7fa85, #a6f73b)

Colors



<!-- Primary Colors -->
<color name="harmony_v2_color_10">#8d3bf7</color>
<color name="harmony_v2_color_20">#b784fa</color>
<color name="harmony_v2_color_30">#d4b5fc</color>
<color name="harmony_v2_color_40">#c7fa85</color>
<color name="harmony_v2_color_50">#a6f73b</color>

PWA prompt