Aquarium

#003366

#2a5298

#5793D8

#6eb4f1

#b0c4de

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#003366	rgb(0, 51, 102)	hsl(210 100% 20%)	oklab(32% -0.03 -0.1)	oklch(32% 0.1 250)	color(display-p3 0.07 0.2 0.39)
	#2a5298	rgb(42, 82, 152)	hsl(220 57% 38%)	oklab(45% -0.02 -0.12)	oklch(45% 0.12 260)	color(display-p3 0.2 0.32 0.58)
	#5793d8	rgb(87, 147, 216)	hsl(210 62% 59%)	oklab(65% -0.04 -0.12)	oklch(65% 0.12 250)	color(display-p3 0.4 0.57 0.83)
	#6eb4f1	rgb(110, 180, 241)	hsl(210 82% 69%)	oklab(75% -0.05 -0.1)	oklch(75% 0.11 250)	color(display-p3 0.49 0.7 0.92)
	#b0c4de	rgb(176, 196, 222)	hsl(210 41% 78%)	oklab(81% -0.01 -0.04)	oklch(81% 0.04 260)	color(display-p3 0.7 0.77 0.86)

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

#003366

AAA - 12.6



#2a5298

AAA - 7.61



#5793D8

AA - 3.19



#6eb4f1

AA - 2.21



#b0c4de

AA - 1.78



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(32.3% -0.028 -0.099), oklab(44.8% -0.02 -0.122), oklab(65.3% -0.035 -0.116), oklab(74.8% -0.046 -0.104), oklab(81.4% -0.011 -0.041))

Fallback colors



background: linear-gradient(45deg, #003366, #2a5298, #5793D8, #6eb4f1, #b0c4de)

Colors



<!-- Primary Colors -->
<color name="aquarium_color_10">#003366</color>
<color name="aquarium_color_20">#2a5298</color>
<color name="aquarium_color_30">#5793D8</color>
<color name="aquarium_color_40">#6eb4f1</color>
<color name="aquarium_color_50">#b0c4de</color>

PWA prompt