Trafficpurple

#f4a3e2

#db8ac9

#c170af

#a85796

#9b4a89

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f4a3e2	rgb(244, 163, 226)	hsl(310 79% 80%)	oklab(81% 0.11 -0.05)	oklch(81% 0.12 340)	color(display-p3 0.91 0.65 0.87)
	#db8ac9	rgb(219, 138, 201)	hsl(310 53% 70%)	oklab(74% 0.12 -0.05)	oklch(74% 0.13 340)	color(display-p3 0.81 0.56 0.77)
	#c170af	rgb(193, 112, 175)	hsl(310 40% 60%)	oklab(65% 0.12 -0.05)	oklch(65% 0.13 340)	color(display-p3 0.71 0.45 0.67)
	#a85796	rgb(168, 87, 150)	hsl(310 32% 50%)	oklab(57% 0.12 -0.05)	oklch(57% 0.13 340)	color(display-p3 0.62 0.36 0.58)
	#9b4a89	rgb(155, 74, 137)	hsl(310 35% 45%)	oklab(53% 0.12 -0.05)	oklch(53% 0.13 340)	color(display-p3 0.57 0.31 0.53)

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

#f4a3e2

AA - 1.87



#db8ac9

AA - 2.47



#c170af

AA - 3.38



#a85796

AA - 4.69



#9b4a89

AA - 5.62



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(81.4% 0.113 -0.052), oklab(73.7% 0.115 -0.053), oklab(65.5% 0.118 -0.053), oklab(57.5% 0.121 -0.054), oklab(53.2% 0.123 -0.053))

Fallback colors



background: linear-gradient(45deg, #f4a3e2, #db8ac9, #c170af, #a85796, #9b4a89)

Colors



<!-- Primary Colors -->
<color name="trafficpurple_color_10">#f4a3e2</color>
<color name="trafficpurple_color_20">#db8ac9</color>
<color name="trafficpurple_color_30">#c170af</color>
<color name="trafficpurple_color_40">#a85796</color>
<color name="trafficpurple_color_50">#9b4a89</color>

PWA prompt