Cranberry Sauce

#98274F

#B8405E

#D15871

#E07A8A



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Pink

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#98274f	rgb(152, 39, 79)	hsl(340 59% 37%)	hwb(340 15% 40%)	lch(35.8 49.3 5.67)	lab(35.8 49 4.87)	cmyk 0%, 74%, 48%, 40%
	#b8405e	rgb(184, 64, 94)	hsl(350 48% 49%)	hwb(350 25% 28%)	lch(45.7 51.8 11.3)	lab(45.7 50.8 10.2)	cmyk 0%, 65%, 49%, 28%
	#d15871	rgb(209, 88, 113)	hsl(350 57% 58%)	hwb(350 35% 18%)	lch(54.2 51.6 12.7)	lab(54.2 50.3 11.3)	cmyk 0%, 58%, 46%, 18%
	#e07a8a	rgb(224, 122, 138)	hsl(350 62% 68%)	hwb(350 48% 12%)	lch(63.4 42.8 13.5)	lab(63.4 41.6 10)	cmyk 0%, 46%, 38%, 12%

 Click a color format to copy 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