Sugared

#e51081

#ff5c95

#ffd375

#ffecc2

#fff9eb

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#e51081	rgb(229, 16, 129)	hsl(330 87% 48%)	oklab(60% 0.24 -0.01)	oklch(60% 0.24 360)	color(display-p3 0.82 0.19 0.5)
	#ff5c95	rgb(255, 92, 149)	hsl(340 100% 68%)	oklab(70% 0.2 0.01)	oklch(70% 0.2 2.3)	color(display-p3 0.93 0.41 0.58)
	#ffd375	rgb(255, 211, 117)	hsl(41 100% 73%)	oklab(89% 0.01 0.12)	oklch(89% 0.12 85)	color(display-p3 0.97 0.83 0.51)
	#ffecc2	rgb(255, 236, 194)	hsl(41 100% 88%)	oklab(95% 0 0.06)	oklch(95% 0.06 87)	color(display-p3 0.99 0.93 0.78)
	#fff9eb	rgb(255, 249, 235)	hsl(42 100% 96%)	oklab(98% 0 0.02)	oklch(98% 0.02 88)	color(display-p3 1 0.98 0.93)

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

#e51081

AA - 4.44



#ff5c95

AA - 2.9



#ffd375

AA - 1.41



#ffecc2

AA - 1.16



#fff9eb

AA - 1.04



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(60.3% 0.24 -0.009), oklab(70.4% 0.202 0.008), oklab(88.6% 0.011 0.122), oklab(94.8% 0.004 0.058), oklab(98.3% 0.001 0.019))

Fallback colors



background: linear-gradient(45deg, #e51081, #ff5c95, #ffd375, #ffecc2, #fff9eb)

Colors



<!-- Primary Colors -->
<color name="sugared_color_10">#e51081</color>
<color name="sugared_color_20">#ff5c95</color>
<color name="sugared_color_30">#ffd375</color>
<color name="sugared_color_40">#ffecc2</color>
<color name="sugared_color_50">#fff9eb</color>

PWA prompt