Ocean Palette

CSS variables

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

Tailwind config

// tailwind.config.js
colors: {
  "ocean-1": "#0077B6",
  "ocean-2": "#00B4D8",
  "ocean-3": "#90E0EF",
  "ocean-4": "#CAF0F8",
  "ocean-5": "#023E8A",
}

About this palette

The Ocean 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.

#0077B6White4.87:1AA

#00B4D8Near-black7.67:1AA

#90E0EFNear-black12.68:1AA

#CAF0F8Near-black15.59:1AA

#023E8AWhite10.20:1AA

These colours on each other

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

text \\ background	#0077B6	#00B4D8	#90E0EF	#CAF0F8	#023E8A
#0077B6	·	1.97Fails	3.27Large only	4.02Large only	2.10Fails
#00B4D8	1.97Fails	·	1.65Fails	2.03Fails	4.14Large only
#90E0EF	3.27Large only	1.65Fails	·	1.23Fails	6.85AA
#CAF0F8	4.02Large only	2.03Fails	1.23Fails	·	8.42AA
#023E8A	2.10Fails	4.14Large only	6.85AA	8.42AA	·

More palettes

Gradients in the same range

Ocean Mint Purple Haze

Ocean Palette

Related

Gradients in the same range