Sage Palette

CSS variables

:root {
  --color-1: #A3B18A;
  --color-2: #DAD7CD;
  --color-3: #588157;
  --color-4: #3A5A40;
  --color-5: #344E41;
}

Tailwind config

// tailwind.config.js
colors: {
  "sage-1": "#A3B18A",
  "sage-2": "#DAD7CD",
  "sage-3": "#588157",
  "sage-4": "#3A5A40",
  "sage-5": "#344E41",
}

About this palette

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

#A3B18ANear-black8.29:1AA

#DAD7CDNear-black13.12:1AA

#588157White4.48:1Large only

#3A5A40White7.73:1AA

#344E41White9.08: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	#A3B18A	#DAD7CD	#588157	#3A5A40	#344E41
#A3B18A	·	1.58Fails	1.96Fails	3.39Large only	3.98Large only
#DAD7CD	1.58Fails	·	3.11Large only	5.37AA	6.31AA
#588157	1.96Fails	3.11Large only	·	1.73Fails	2.03Fails
#3A5A40	3.39Large only	5.37AA	1.73Fails	·	1.17Fails
#344E41	3.98Large only	6.31AA	2.03Fails	1.17Fails	·

More palettes

Gradients in the same range

Deep Sea Steel Spotlight

Sage Palette

Related

Gradients in the same range