Coral

#f5642f

#ff7f50

#ffffff

#50d0ff

#ff5079

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Blue

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#f5642f	rgb(245, 100, 47)	hsl(16 91% 57%)	hwb(16 18% 3.9%)	lch(61.3 79.3 46.2)	lab(61.3 54.9 57.3)	cmyk 0%, 59%, 81%, 4%
	#ff7f50	rgb(255, 127, 80)	hsl(16 100% 66%)	hwb(16 31% 0%)	lch(68 67.9 45.7)	lab(68 47.4 48.6)	cmyk 0%, 50%, 69%, 0%
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	hwb(none 100% 0%)	lch(100 0 none)	lab(100 0 0)	cmyk 0%, 0%, 0%, 0%
	#50d0ff	rgb(80, 208, 255)	hsl(200 100% 66%)	hwb(200 31% 0%)	lch(77.9 42.5 233)	lab(77.9 -25.5 -34.1)	cmyk 69%, 18%, 0%, 0%
	#ff5079	rgb(255, 80, 121)	hsl(350 100% 66%)	hwb(350 31% 0%)	lch(60.9 70.7 14.1)	lab(60.9 68.6 17.3)	cmyk 0%, 69%, 53%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#f5642f

AA - 3.11



#ff7f50

AA - 2.49



#ffffff

AA - 1



#50d0ff

AA - 1.77



#ff5079

AA - 3.14



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(68% 0.147 0.12), oklab(73.5% 0.128 0.109), oklab(100% 0 0), oklab(80.6% -0.089 -0.093), oklab(68.4% 0.207 0.04))

Fallback colors



background: linear-gradient(45deg, #f5642f, #ff7f50, #ffffff, #50d0ff, #ff5079)

Colors



<!-- Primary Colors -->
<color name="coral_color_10">#f5642f</color>
<color name="coral_color_20">#ff7f50</color>
<color name="coral_color_30">#ffffff</color>
<color name="coral_color_40">#50d0ff</color>
<color name="coral_color_50">#ff5079</color>

PWA prompt