Application

#121212

#ff5e45

#ffffff

#fc5ba6

#8f0043

Actions

Explore the palette in different formats, and actions.

Colors overview

Black

Orange

Pink

White

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#121212	rgb(18, 18, 18)	hsl(none 0% 7.1%)	oklab(18% 0 0)	oklch(18% 0 none)	color(display-p3 0.07 0.07 0.07)
	#ff5e45	rgb(255, 94, 69)	hsl(8.1 100% 64%)	oklab(69% 0.17 0.1)	oklch(69% 0.2 31)	color(display-p3 0.93 0.41 0.31)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#fc5ba6	rgb(252, 91, 166)	hsl(330 96% 67%)	oklab(70% 0.21 -0.02)	oklch(70% 0.21 350)	color(display-p3 0.92 0.4 0.64)
	#8f0043	rgb(143, 0, 67)	hsl(330 100% 28%)	oklab(42% 0.17 0.01)	oklch(42% 0.17 3.5)	color(display-p3 0.51 0.09 0.26)

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

#121212

AAA - 18.73



#ff5e45

AA - 3.02



#ffffff

AA - 1



#fc5ba6

AA - 2.92



#8f0043

AAA - 9.33



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(18.2% 0 0), oklab(69% 0.171 0.104), oklab(100% 0 0), oklab(70.3% 0.206 -0.018), oklab(41.9% 0.168 0.01))

Fallback colors



background: linear-gradient(45deg, #121212, #ff5e45, #ffffff, #fc5ba6, #8f0043)

Colors



<!-- Primary Colors -->
<color name="application_color_10">#121212</color>
<color name="application_color_20">#ff5e45</color>
<color name="application_color_30">#ffffff</color>
<color name="application_color_40">#fc5ba6</color>
<color name="application_color_50">#8f0043</color>

PWA prompt