Warm

#f44336

#ff5722

#ff9800

#ffc107

#ffeb3b

Actions

Explore the palette in different formats, and actions.

Colors overview

Red

Yellow

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f44336	rgb(244, 67, 54)	hsl(4.1 90% 58%)	oklab(64% 0.19 0.1)	oklch(64% 0.22 29)	color(display-p3 0.88 0.32 0.26)
	#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)
	#ff9800	rgb(255, 152, 0)	hsl(36 100% 50%)	oklab(77% 0.08 0.16)	oklch(77% 0.17 64)	color(display-p3 0.94 0.62 0.22)
	#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)
	#ffeb3b	rgb(255, 235, 59)	hsl(54 100% 62%)	oklab(93% -0.04 0.18)	oklch(93% 0.18 100)	color(display-p3 0.99 0.92 0.38)

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

#f44336

AA - 3.68



#ff5722

AA - 3.16



#ff9800

AA - 2.15



#ffc107

AA - 1.63



#ffeb3b

AA - 1.22



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(64.3% 0.189 0.104), oklab(67.9% 0.171 0.127), oklab(77% 0.076 0.157), oklab(84.4% 0.015 0.171), oklab(92.8% -0.039 0.176))

Fallback colors



background: linear-gradient(45deg, #f44336, #ff5722, #ff9800, #ffc107, #ffeb3b)

Colors



<!-- Primary Colors -->
<color name="warm_color_10">#f44336</color>
<color name="warm_color_20">#ff5722</color>
<color name="warm_color_30">#ff9800</color>
<color name="warm_color_40">#ffc107</color>
<color name="warm_color_50">#ffeb3b</color>

PWA prompt