Orange/Blue

#f57c00

#ff9800

#ffffff

#03a9f4

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Orange

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#f57c00	rgb(245, 124, 0)	hsl(30 100% 48%)	oklab(71% 0.11 0.14)	oklch(71% 0.18 54)	color(display-p3 0.9 0.51 0.19)
	#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)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)
	#03a9f4	rgb(3, 169, 244)	hsl(200 98% 48%)	oklab(70% -0.08 -0.13)	oklch(70% 0.16 240)	color(display-p3 0.3 0.65 0.93)
	#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.

#f57c00

AA - 2.7



#ff9800

AA - 2.15



#ffffff

AA - 1



#03a9f4

AA - 2.62



#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(71.2% 0.107 0.144), oklab(77% 0.076 0.157), oklab(100% 0 0), oklab(69.9% -0.081 -0.135), oklab(24.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #f57c00, #ff9800, #ffffff, #03a9f4, #212121)

Colors



<!-- Primary Colors -->
<color name="orange/blue_color_10">#f57c00</color>
<color name="orange/blue_color_20">#ff9800</color>
<color name="orange/blue_color_30">#ffffff</color>
<color name="orange/blue_color_40">#03a9f4</color>
<color name="orange/blue_color_50">#212121</color>

PWA prompt