Denim Palette

CSS variables

:root {
  --color-1: #1E3A5F;
  --color-2: #2E5A88;
  --color-3: #5B8FB9;
  --color-4: #A8C5DD;
  --color-5: #E3EDF5;
}

Tailwind config

// tailwind.config.js
colors: {
  "denim-1": "#1E3A5F",
  "denim-2": "#2E5A88",
  "denim-3": "#5B8FB9",
  "denim-4": "#A8C5DD",
  "denim-5": "#E3EDF5",
}

About this palette

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

#1E3A5FWhite11.50:1AA

#2E5A88White7.16:1AA

#5B8FB9Near-black5.47:1AA

#A8C5DDNear-black10.52:1AA

#E3EDF5Near-black15.92: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	#1E3A5F	#2E5A88	#5B8FB9	#A8C5DD	#E3EDF5
#1E3A5F	·	1.61Fails	3.33Large only	6.41AA	9.69AA
#2E5A88	1.61Fails	·	2.07Fails	3.99Large only	6.03AA
#5B8FB9	3.33Large only	2.07Fails	·	1.93Fails	2.91Fails
#A8C5DD	6.41AA	3.99Large only	1.93Fails	·	1.51Fails
#E3EDF5	9.69AA	6.03AA	2.91Fails	1.51Fails	·

More palettes

Gradients in the same range

Slate Fade Cosmic Pastel

Denim Palette

Related

Gradients in the same range