Material 5

#303f9f

#3f51b5

#ffffff

#ff4081

#212121

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#303f9f	rgb(48, 63, 159)	hsl(230 54% 41%)	hwb(230 19% 38%)	lch(30.2 58.8 290)	lab(30.2 20.4 -55.2)	cmyk 70%, 60%, 0%, 38%
	#3f51b5	rgb(63, 81, 181)	hsl(230 48% 48%)	hwb(230 25% 29%)	lch(37.5 59.4 288)	lab(37.5 18.7 -56.4)	cmyk 65%, 55%, 0%, 29%
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	hwb(none 100% 0%)	lch(100 0 none)	lab(100 0 0)	cmyk 0%, 0%, 0%, 0%
	#ff4081	rgb(255, 64, 129)	hsl(340 100% 63%)	hwb(340 25% 0%)	lch(59.2 74.8 7.88)	lab(59.2 74.1 10.2)	cmyk 0%, 75%, 49%, 0%
	#212121	rgb(33, 33, 33)	hsl(none 0% 13%)	hwb(none 13% 87%)	lch(12.7 0 none)	lab(12.7 0 0)	cmyk 0%, 0%, 0%, 87%

 Click a color format to copy 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



#ffffff

AA - 1



#ff4081

AA - 3.33



#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(100% 0 0), oklab(67.2% 0.227 0.023), oklab(24.8% 0 0))

Fallback colors



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

Colors



<!-- Primary Colors -->
<color name="material_5_color_10">#303f9f</color>
<color name="material_5_color_20">#3f51b5</color>
<color name="material_5_color_30">#ffffff</color>
<color name="material_5_color_40">#ff4081</color>
<color name="material_5_color_50">#212121</color>

PWA prompt