Dragon

#E85764

#F4BDB8

#7C6C52

#F8F9FB

#F43F24

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#e85764	rgb(232, 87, 100)	hsl(350 76% 63%)	oklab(65% 0.17 0.06)	oklch(65% 0.18 18)	color(display-p3 0.84 0.38 0.41)
	#f4bdb8	rgb(244, 189, 184)	hsl(5 73% 84%)	oklab(85% 0.06 0.03)	oklch(85% 0.06 24)	color(display-p3 0.92 0.75 0.73)
	#7c6c52	rgb(124, 108, 82)	hsl(37 20% 40%)	oklab(54% 0.01 0.04)	oklch(54% 0.04 80)	color(display-p3 0.48 0.43 0.33)
	#f8f9fb	rgb(248, 249, 251)	hsl(220 27% 98%)	oklab(98% 0 0)	oklch(98% 0 260)	color(display-p3 0.97 0.98 0.98)
	#f43f24	rgb(244, 63, 36)	hsl(7.8 90% 55%)	oklab(64% 0.19 0.12)	oklch(64% 0.22 32)	color(display-p3 0.88 0.31 0.21)

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

#E85764

AA - 3.51



#F4BDB8

AA - 1.63



#7C6C52

AA - 5.09



#F8F9FB

AA - 1.05



#F43F24

AA - 3.76



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(65.1% 0.17 0.057), oklab(84.6% 0.058 0.027), oklab(53.9% 0.008 0.043), oklab(98.2% 0 -0.003), oklab(63.8% 0.188 0.115))

Fallback colors



background: linear-gradient(45deg, #E85764, #F4BDB8, #7C6C52, #F8F9FB, #F43F24)

Colors



<!-- Primary Colors -->
<color name="dragon_color_10">#E85764</color>
<color name="dragon_color_20">#F4BDB8</color>
<color name="dragon_color_30">#7C6C52</color>
<color name="dragon_color_40">#F8F9FB</color>
<color name="dragon_color_50">#F43F24</color>

PWA prompt