Indigo/Orange

#303f9f

#3f51b5

#c5cae9

#ff5722

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#303f9f	rgb(48, 63, 159)	hsl(230 54% 41%)	oklab(42% 0 -0.16)	oklch(42% 0.16 270)	color(display-p3 0.2 0.25 0.6)
	#3f51b5	rgb(63, 81, 181)	hsl(230 48% 48%)	oklab(48% 0 -0.16)	oklch(48% 0.16 270)	color(display-p3 0.26 0.32 0.69)
	#c5cae9	rgb(197, 202, 233)	hsl(230 45% 84%)	oklab(85% 0.01 -0.04)	oklch(85% 0.04 280)	color(display-p3 0.78 0.79 0.9)
	#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)
	#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.

#303f9f

AAA - 8.98



#3f51b5

AA - 6.87



#c5cae9

AA - 1.61



#ff5722

AA - 3.16



#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(41.6% 0.003 -0.156), oklab(47.8% 0.004 -0.159), oklab(84.5% 0.006 -0.043), oklab(67.9% 0.171 0.127), oklab(24.8% 0 0))

Fallback colors



background: linear-gradient(45deg, #303f9f, #3f51b5, #c5cae9, #ff5722, #212121)

Colors



<!-- Primary Colors -->
<color name="indigo/orange_color_10">#303f9f</color>
<color name="indigo/orange_color_20">#3f51b5</color>
<color name="indigo/orange_color_30">#c5cae9</color>
<color name="indigo/orange_color_40">#ff5722</color>
<color name="indigo/orange_color_50">#212121</color>

PWA prompt