aestheticcolours

Colour pairings

Mint and Charcoal

Mint (#98FF98) paired with charcoal (#36454F). Below are both colours expanded into full 11-step ramps, generated in OKLCH for even lightness steps and gamut-mapped to sRGB. Copy the Tailwind v4 config for either, or open them in the generator to fine-tune.

Mint #98FF98
Charcoal #36454F
50#E8FCEA
100#98FF98
200#A4EAA6
300#70D672
400#36C141
500#00A421
600#00890C
700#1A7206
800#205809
900#204810
950#0A2101
mint — Tailwind v4@theme
@theme {
  --color-mint-50: #e8fcea;
  --color-mint-100: #98ff98;
  --color-mint-200: #a4eaa6;
  --color-mint-300: #70d672;
  --color-mint-400: #36c141;
  --color-mint-500: #00a421;
  --color-mint-600: #00890c;
  --color-mint-700: #1a7206;
  --color-mint-800: #205809;
  --color-mint-900: #204810;
  --color-mint-950: #0a2101;
}
50#F3F6F8
100#E2E9ED
200#CBD7E0
300#ACBECA
400#91A6B4
500#768B99
600#607380
700#52616A
800#404C52
900#36454F
950#161B1E
charcoal — Tailwind v4@theme
@theme {
  --color-charcoal-50: #f3f6f8;
  --color-charcoal-100: #e2e9ed;
  --color-charcoal-200: #cbd7e0;
  --color-charcoal-300: #acbeca;
  --color-charcoal-400: #91a6b4;
  --color-charcoal-500: #768b99;
  --color-charcoal-600: #607380;
  --color-charcoal-700: #52616a;
  --color-charcoal-800: #404c52;
  --color-charcoal-900: #36454f;
  --color-charcoal-950: #161b1e;
}

Aesthetic

Want this palette built into your site?

You bring the colours. You'll get a site that uses them properly, designed and built by the team at Aesthetic.

More combinations