R2

#022859

#034AA6

#D4D4D4

#F2F2F2

#ff7a81

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

White

Red

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#022859	rgb(2, 40, 89)	hsl(210 96% 18%)	oklab(29% -0.02 -0.1)	oklch(29% 0.1 260)	color(display-p3 0.05 0.15 0.34)
	#034aa6	rgb(3, 74, 166)	hsl(210 96% 33%)	oklab(43% -0.03 -0.16)	oklch(43% 0.16 260)	color(display-p3 0.12 0.29 0.63)
	#d4d4d4	rgb(212, 212, 212)	hsl(none 0% 83%)	oklab(87% 0 0)	oklch(87% 0 none)	color(display-p3 0.83 0.83 0.83)
	#f2f2f2	rgb(242, 242, 242)	hsl(none 0% 95%)	oklab(96% 0 0)	oklch(96% 0 none)	color(display-p3 0.95 0.95 0.95)
	#ff7a81	rgb(255, 122, 129)	hsl(360 100% 74%)	oklab(74% 0.15 0.05)	oklch(74% 0.16 19)	color(display-p3 0.93 0.51 0.52)

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

#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