R2

#022859

#034AA6

#D4D4D4

#F2F2F2

#ff7a81

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

White

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#022859	rgb(2, 40, 89)	hsl(210 96% 18%)	hwb(210 0.78% 65%)	lch(16.2 34.1 278)	lab(16.2 4.54 -33.8)	cmyk 98%, 55%, 0%, 65%
	#034aa6	rgb(3, 74, 166)	hsl(210 96% 33%)	hwb(210 1.2% 35%)	lch(32.3 57 281)	lab(32.3 10.9 -56)	cmyk 98%, 55%, 0%, 35%
	#d4d4d4	rgb(212, 212, 212)	hsl(none 0% 83%)	hwb(none 83% 17%)	lch(84.9 0 none)	lab(84.9 0 0)	cmyk 0%, 0%, 0%, 17%
	#f2f2f2	rgb(242, 242, 242)	hsl(none 0% 95%)	hwb(none 95% 5.1%)	lch(95.5 0 none)	lab(95.5 0 0)	cmyk 0%, 0%, 0%, 5%
	#ff7a81	rgb(255, 122, 129)	hsl(360 100% 74%)	hwb(360 48% 0%)	lch(67.7 56.4 22.7)	lab(67.7 52.1 21.8)	cmyk 0%, 52%, 49%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#022859

AAA - 14.47



#034AA6

AAA - 8.28



#D4D4D4

AA - 1.48



#F2F2F2

AA - 1.11



#ff7a81

AA - 2.51



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(28.5% -0.022 -0.095), oklab(43.1% -0.032 -0.158), oklab(87% 0 0), oklab(96.1% 0 0), oklab(73.6% 0.154 0.052))

Fallback colors



background: linear-gradient(45deg, #022859, #034AA6, #D4D4D4, #F2F2F2, #ff7a81)

Colors



<!-- Primary Colors -->
<color name="r2_color_10">#022859</color>
<color name="r2_color_20">#034AA6</color>
<color name="r2_color_30">#D4D4D4</color>
<color name="r2_color_40">#F2F2F2</color>
<color name="r2_color_50">#ff7a81</color>

PWA prompt