aestheticcolours

Colour pairings

Dusty blue and Terracotta

Dusty blue (#6E8CAF) paired with terracotta (#E2725B). 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.

Dusty blue #6E8CAF
Terracotta #E2725B
50#F1F6FC
100#DFE8F4
200#C6D7EC
300#A5BEDB
400#87A5C9
500#6E8CAF
600#577392
700#4A6178
800#3A4C5D
900#313E4B
950#131B23
dusty blue — Tailwind v4@theme
@theme {
  --color-dusty-blue-50: #f1f6fc;
  --color-dusty-blue-100: #dfe8f4;
  --color-dusty-blue-200: #c6d7ec;
  --color-dusty-blue-300: #a5bedb;
  --color-dusty-blue-400: #87a5c9;
  --color-dusty-blue-500: #6e8caf;
  --color-dusty-blue-600: #577392;
  --color-dusty-blue-700: #4a6178;
  --color-dusty-blue-800: #3a4c5d;
  --color-dusty-blue-900: #313e4b;
  --color-dusty-blue-950: #131b23;
}
50#FFF2EF
100#FFE0D7
200#FFC6B8
300#FD9E8A
400#E2725B
500#D1604A
600#B14D3B
700#924338
800#71362F
900#5B2E29
950#2C110F
terracotta — Tailwind v4@theme
@theme {
  --color-terracotta-50: #fff2ef;
  --color-terracotta-100: #ffe0d7;
  --color-terracotta-200: #ffc6b8;
  --color-terracotta-300: #fd9e8a;
  --color-terracotta-400: #e2725b;
  --color-terracotta-500: #d1604a;
  --color-terracotta-600: #b14d3b;
  --color-terracotta-700: #924338;
  --color-terracotta-800: #71362f;
  --color-terracotta-900: #5b2e29;
  --color-terracotta-950: #2c110f;
}

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