UI 3

#dd9eff

#858585

#595959

#66f7ff

#ffffff

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#dd9eff	rgb(221, 158, 255)	hsl(280 100% 81%)	oklab(79% 0.1 -0.11)	oklch(79% 0.15 310)	color(display-p3 0.83 0.63 0.98)
	#858585	rgb(133, 133, 133)	hsl(none 0% 52%)	oklab(62% 0 0)	oklch(62% 0 none)	color(display-p3 0.52 0.52 0.52)
	#595959	rgb(89, 89, 89)	hsl(none 0% 35%)	oklab(46% 0 0)	oklch(46% 0 none)	color(display-p3 0.35 0.35 0.35)
	#66f7ff	rgb(102, 247, 255)	hsl(180 100% 70%)	oklab(90% -0.12 -0.04)	oklch(90% 0.12 200)	color(display-p3 0.56 0.96 0.99)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)

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

#dd9eff

AA - 2.01



#858585

AA - 3.69



#595959

AAA - 7



#66f7ff

AA - 1.28



#ffffff

AA - 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(79.4% 0.101 -0.108), oklab(61.7% 0 0), oklab(46.4% 0 0), oklab(90.1% -0.116 -0.043), oklab(100% 0 0))

Fallback colors



background: linear-gradient(45deg, #dd9eff, #858585, #595959, #66f7ff, #ffffff)

Colors



<!-- Primary Colors -->
<color name="ui_3_color_10">#dd9eff</color>
<color name="ui_3_color_20">#858585</color>
<color name="ui_3_color_30">#595959</color>
<color name="ui_3_color_40">#66f7ff</color>
<color name="ui_3_color_50">#ffffff</color>

PWA prompt