Spaghetti Sauce

#f87676

#d95942

#c84838

#a83b31

#822b26

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f87676	rgb(248, 118, 118)	hsl(0 90% 72%)	oklab(72% 0.15 0.06)	oklch(72% 0.16 22)	color(display-p3 0.91 0.49 0.48)
	#d95942	rgb(217, 89, 66)	hsl(9.1 67% 55%)	oklab(62% 0.14 0.09)	oklch(62% 0.17 32)	color(display-p3 0.79 0.38 0.29)
	#c84838	rgb(200, 72, 56)	hsl(6.7 57% 50%)	oklab(58% 0.14 0.08)	oklch(58% 0.17 30)	color(display-p3 0.73 0.32 0.25)
	#a83b31	rgb(168, 59, 49)	hsl(5 55% 43%)	oklab(51% 0.13 0.07)	oklch(51% 0.15 29)	color(display-p3 0.61 0.26 0.21)
	#822b26	rgb(130, 43, 38)	hsl(3.3 55% 33%)	oklab(42% 0.11 0.05)	oklch(42% 0.12 27)	color(display-p3 0.47 0.19 0.16)

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

#f87676

AA - 2.67



#d95942

AA - 3.84



#c84838

AA - 4.72



#a83b31

AA - 6.29



#822b26

AAA - 9.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(71.9% 0.148 0.06), oklab(62.5% 0.14 0.088), oklab(57.5% 0.144 0.083), oklab(50.6% 0.128 0.069), oklab(41.9% 0.108 0.055))

Fallback colors



background: linear-gradient(45deg, #f87676, #d95942, #c84838, #a83b31, #822b26)

Colors



<!-- Primary Colors -->
<color name="spaghetti_sauce_color_10">#f87676</color>
<color name="spaghetti_sauce_color_20">#d95942</color>
<color name="spaghetti_sauce_color_30">#c84838</color>
<color name="spaghetti_sauce_color_40">#a83b31</color>
<color name="spaghetti_sauce_color_50">#822b26</color>

PWA prompt