Cranberry Sauce

#98274F

#B8405E

#D15871

#E07A8A

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#98274f	rgb(152, 39, 79)	hsl(340 59% 37%)	oklab(46% 0.15 0.01)	oklch(46% 0.15 4)	color(display-p3 0.55 0.19 0.31)
	#b8405e	rgb(184, 64, 94)	hsl(350 48% 49%)	oklab(55% 0.15 0.02)	oklch(55% 0.16 8.7)	color(display-p3 0.67 0.28 0.37)
	#d15871	rgb(209, 88, 113)	hsl(350 57% 58%)	oklab(62% 0.15 0.03)	oklch(62% 0.15 10)	color(display-p3 0.76 0.37 0.45)
	#e07a8a	rgb(224, 122, 138)	hsl(350 62% 68%)	oklab(70% 0.12 0.02)	oklch(70% 0.13 11)	color(display-p3 0.83 0.5 0.55)

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

#98274F

AAA - 7.66



#B8405E

AA - 5.33



#D15871

AA - 3.92



#E07A8A

AA - 2.86



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(46.3% 0.151 0.01), oklab(54.7% 0.154 0.024), oklab(62.1% 0.152 0.027), oklab(69.7% 0.125 0.024))

Fallback colors



background: linear-gradient(45deg, #98274F, #B8405E, #D15871, #E07A8A)

Colors



<!-- Primary Colors -->
<color name="cranberry_sauce_color_10">#98274F</color>
<color name="cranberry_sauce_color_20">#B8405E</color>
<color name="cranberry_sauce_color_30">#D15871</color>
<color name="cranberry_sauce_color_40">#E07A8A</color>

PWA prompt