Insights

#860EC6

#BD8FD8

#ffffff

#44BEE5

#151E33

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Blue

White

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#860ec6	rgb(134, 14, 198)	hsl(280 87% 42%)	oklab(49% 0.15 -0.19)	oklch(49% 0.24 310)	color(display-p3 0.48 0.11 0.75)
	#bd8fd8	rgb(189, 143, 216)	hsl(280 48% 70%)	oklab(72% 0.08 -0.08)	oklch(72% 0.11 310)	color(display-p3 0.71 0.57 0.83)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#44bee5	rgb(68, 190, 229)	hsl(190 76% 58%)	oklab(75% -0.09 -0.08)	oklch(75% 0.12 220)	color(display-p3 0.41 0.74 0.88)
	#151e33	rgb(21, 30, 51)	hsl(220 42% 14%)	oklab(24% 0 -0.04)	oklch(24% 0.04 270)	color(display-p3 0.09 0.12 0.19)

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

#860EC6

AAA - 7.26



#BD8FD8

AA - 2.59



#ffffff

AA - 1



#44BEE5

AA - 2.15



#151E33

AAA - 16.59



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(48.9% 0.149 -0.192), oklab(72% 0.077 -0.084), oklab(100% 0 0), oklab(75% -0.087 -0.082), oklab(23.8% -0.003 -0.043))

Fallback colors



background: linear-gradient(45deg, #860EC6, #BD8FD8, #ffffff, #44BEE5, #151E33)

Colors



<!-- Primary Colors -->
<color name="insights_color_10">#860EC6</color>
<color name="insights_color_20">#BD8FD8</color>
<color name="insights_color_30">#ffffff</color>
<color name="insights_color_40">#44BEE5</color>
<color name="insights_color_50">#151E33</color>

PWA prompt