Retro Palette

CSS variables

:root {
  --color-1: #264653;
  --color-2: #2A9D8F;
  --color-3: #E9C46A;
  --color-4: #F4A261;
  --color-5: #E76F51;
}

Tailwind config

// tailwind.config.js
colors: {
  "retro-1": "#264653",
  "retro-2": "#2A9D8F",
  "retro-3": "#E9C46A",
  "retro-4": "#F4A261",
  "retro-5": "#E76F51",
}

About this palette

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

#264653White10.08:1AA

#2A9D8FNear-black5.68:1AA

#E9C46ANear-black11.31:1AA

#F4A261Near-black9.17:1AA

#E76F51Near-black6.11: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	#264653	#2A9D8F	#E9C46A	#F4A261	#E76F51
#264653	·	3.03Large only	6.03AA	4.89AA	3.26Large only
#2A9D8F	3.03Large only	·	1.99Fails	1.61Fails	1.07Fails
#E9C46A	6.03AA	1.99Fails	·	1.23Fails	1.85Fails
#F4A261	4.89AA	1.61Fails	1.23Fails	·	1.50Fails
#E76F51	3.26Large only	1.07Fails	1.85Fails	1.50Fails	·

More palettes

Gradients in the same range

Deep Sea Peach Forest

Retro Palette

Related

Gradients in the same range