Mint Fresh Palette

CSS variables

:root {
  --color-1: #95D5B2;
  --color-2: #74C69D;
  --color-3: #52B788;
  --color-4: #40916C;
  --color-5: #2D6A4F;
}

Tailwind config

// tailwind.config.js
colors: {
  "mint-fresh-1": "#95D5B2",
  "mint-fresh-2": "#74C69D",
  "mint-fresh-3": "#52B788",
  "mint-fresh-4": "#40916C",
  "mint-fresh-5": "#2D6A4F",
}

About this palette

The Mint Fresh 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.

#95D5B2Near-black11.19:1AA

#74C69DNear-black9.27:1AA

#52B788Near-black7.64:1AA

#40916CNear-black4.93:1AA

#2D6A4FWhite6.39:1AA

These colours on each other

None of the 20 combinations inside this palette reach 4.5:1, so pair its colours with white or near-black rather than with each other.

text \\ background	#95D5B2	#74C69D	#52B788	#40916C	#2D6A4F
#95D5B2	·	1.21Fails	1.47Fails	2.27Fails	3.79Large only
#74C69D	1.21Fails	·	1.21Fails	1.88Fails	3.14Large only
#52B788	1.47Fails	1.21Fails	·	1.55Fails	2.58Fails
#40916C	2.27Fails	1.88Fails	1.55Fails	·	1.67Fails
#2D6A4F	3.79Large only	3.14Large only	2.58Fails	1.67Fails	·

More palettes

Gradients in the same range

Forest Mint Emerald

Mint Fresh Palette

Related

Gradients in the same range