Material 1

#e64a19

#ff5722

#ffffff

#ffc107

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#e64a19	rgb(230, 74, 25)	hsl(14 80% 50%)	oklab(62% 0.16 0.12)	oklch(62% 0.2 36)	color(display-p3 0.83 0.34 0.18)
	#ff5722	rgb(255, 87, 34)	hsl(14 100% 57%)	oklab(68% 0.17 0.13)	oklch(68% 0.21 37)	color(display-p3 0.93 0.39 0.22)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#ffc107	rgb(255, 193, 7)	hsl(45 100% 51%)	oklab(84% 0.02 0.17)	oklch(84% 0.17 85)	color(display-p3 0.96 0.77 0.27)
	#212121	rgb(33, 33, 33)	hsl(none 0% 13%)	oklab(25% 0 0)	oklch(25% 0 none)	color(display-p3 0.13 0.13 0.13)

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

#e64a19

AA - 3.91



#ff5722

AA - 3.16



#ffffff

AA - 1



#ffc107

AA - 1.63



#212121

AAA - 16.1



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(62.4% 0.162 0.118), oklab(67.9% 0.171 0.127), oklab(100% 0 0), oklab(84.4% 0.015 0.171), oklab(24.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #e64a19, #ff5722, #ffffff, #ffc107, #212121)

Colors



<!-- Primary Colors -->
<color name="material_1_color_10">#e64a19</color>
<color name="material_1_color_20">#ff5722</color>
<color name="material_1_color_30">#ffffff</color>
<color name="material_1_color_40">#ffc107</color>
<color name="material_1_color_50">#212121</color>

PWA prompt