aestheticcolours

Colour pairings

Slate and Coral

Slate (#64748B) paired with coral (#FB7185). 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.

Slate #64748B
Coral #FB7185
50#F3F6FA
100#E2E8F1
200#CCD6E6
300#ADBCD2
400#92A4BE
500#7789A2
600#64748B
700#526071
800#404B58
900#353E47
950#161B20
slate — Tailwind v4@theme
@theme {
  --color-slate-50: #f3f6fa;
  --color-slate-100: #e2e8f1;
  --color-slate-200: #ccd6e6;
  --color-slate-300: #adbcd2;
  --color-slate-400: #92a4be;
  --color-slate-500: #7789a2;
  --color-slate-600: #64748b;
  --color-slate-700: #526071;
  --color-slate-800: #404b58;
  --color-slate-900: #353e47;
  --color-slate-950: #161b20;
}
50#FFF2F2
100#FFDEE0
200#FFC4C7
300#FF9AA4
400#FB7185
500#DB5168
600#BA3E57
700#98394D
800#752F3F
900#5E2935
950#2E0F16
coral — Tailwind v4@theme
@theme {
  --color-coral-50: #fff2f2;
  --color-coral-100: #ffdee0;
  --color-coral-200: #ffc4c7;
  --color-coral-300: #ff9aa4;
  --color-coral-400: #fb7185;
  --color-coral-500: #db5168;
  --color-coral-600: #ba3e57;
  --color-coral-700: #98394d;
  --color-coral-800: #752f3f;
  --color-coral-900: #5e2935;
  --color-coral-950: #2e0f16;
}

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