Corporate Blue Palette

CSS variables

:root {
  --color-1: #03045E;
  --color-2: #0077B6;
  --color-3: #00B4D8;
  --color-4: #90E0EF;
  --color-5: #CAF0F8;
}

Tailwind config

// tailwind.config.js
colors: {
  "corporate-blue-1": "#03045E",
  "corporate-blue-2": "#0077B6",
  "corporate-blue-3": "#00B4D8",
  "corporate-blue-4": "#90E0EF",
  "corporate-blue-5": "#CAF0F8",
}

About this palette

The Corporate Blue palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#03045EWhite17.75:1AA

#0077B6White4.87:1AA

#00B4D8Near-black7.67:1AA

#90E0EFNear-black12.68:1AA

#CAF0F8Near-black15.59:1AA

These colours on each other

6 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#03045E	#0077B6	#00B4D8	#90E0EF	#CAF0F8
#03045E	·	3.65Large only	7.20AA	11.92AA	14.65AA
#0077B6	3.65Large only	·	1.97Fails	3.27Large only	4.02Large only
#00B4D8	7.20AA	1.97Fails	·	1.65Fails	2.03Fails
#90E0EF	11.92AA	3.27Large only	1.65Fails	·	1.23Fails
#CAF0F8	14.65AA	4.02Large only	2.03Fails	1.23Fails	·

More palettes

Gradients in the same range

Ocean Mint Purple Haze

Corporate Blue Palette

Related

Gradients in the same range