aestheticcolours

Colour pairings

Indigo and Peach

Indigo (#6366F1) paired with peach (#FFCBA4). 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.

Indigo #6366F1
Peach #FFCBA4
50#F3F5FF
100#E2E6FF
200#CBD2FF
300#AAB5FF
400#8C97FF
500#6366F1
600#575EDB
700#4752B2
800#354289
900#2B386C
950#101736
indigo — Tailwind v4@theme
@theme {
  --color-indigo-50: #f3f5ff;
  --color-indigo-100: #e2e6ff;
  --color-indigo-200: #cbd2ff;
  --color-indigo-300: #aab5ff;
  --color-indigo-400: #8c97ff;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #575edb;
  --color-indigo-700: #4752b2;
  --color-indigo-800: #354289;
  --color-indigo-900: #2b386c;
  --color-indigo-950: #101736;
}
50#FDF4EC
100#F7E4D4
200#FFCBA4
300#E2AF89
400#D09364
500#B37848
600#986238
700#7E5335
800#62412C
900#4F3627
950#25160D
peach — Tailwind v4@theme
@theme {
  --color-peach-50: #fdf4ec;
  --color-peach-100: #f7e4d4;
  --color-peach-200: #ffcba4;
  --color-peach-300: #e2af89;
  --color-peach-400: #d09364;
  --color-peach-500: #b37848;
  --color-peach-600: #986238;
  --color-peach-700: #7e5335;
  --color-peach-800: #62412c;
  --color-peach-900: #4f3627;
  --color-peach-950: #25160d;
}

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