Coral

#c86246

#f2957c

#eabaa4

#f7d7c8

#fdf1e7

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#c86246	rgb(200, 98, 70)	hsl(13 54% 53%)	oklab(61% 0.11 0.08)	oklch(61% 0.14 36)	color(display-p3 0.73 0.41 0.3)
	#f2957c	rgb(242, 149, 124)	hsl(13 82% 72%)	oklab(76% 0.1 0.07)	oklch(76% 0.12 36)	color(display-p3 0.9 0.6 0.51)
	#eabaa4	rgb(234, 186, 164)	hsl(19 62% 78%)	oklab(83% 0.04 0.05)	oklch(83% 0.06 46)	color(display-p3 0.89 0.74 0.66)
	#f7d7c8	rgb(247, 215, 200)	hsl(19 75% 88%)	oklab(90% 0.03 0.03)	oklch(90% 0.04 47)	color(display-p3 0.95 0.85 0.79)
	#fdf1e7	rgb(253, 241, 231)	hsl(27 85% 95%)	oklab(96% 0.01 0.02)	oklch(96% 0.02 62)	color(display-p3 0.98 0.95 0.91)

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

#c86246

AA - 3.96



#f2957c

AA - 2.24



#eabaa4

AA - 1.74



#f7d7c8

AA - 1.35



#fdf1e7

AA - 1.11



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(61.3% 0.11 0.081), oklab(76% 0.096 0.069), oklab(82.6% 0.044 0.046), oklab(90.2% 0.028 0.03), oklab(96.5% 0.009 0.016))

Fallback colors



background: linear-gradient(45deg, #c86246, #f2957c, #eabaa4, #f7d7c8, #fdf1e7)

Colors



<!-- Primary Colors -->
<color name="coral_color_10">#c86246</color>
<color name="coral_color_20">#f2957c</color>
<color name="coral_color_30">#eabaa4</color>
<color name="coral_color_40">#f7d7c8</color>
<color name="coral_color_50">#fdf1e7</color>

PWA prompt