aestheticcolours

Colour pairings

Rose and Ivory

Rose (#F43F5E) paired with ivory (#FFFFF0). 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.

Rose #F43F5E
Ivory #FFFFF0
50#FFF2F1
100#FFDFDE
200#FFC4C5
300#FF9AA0
400#FF6A7A
500#F43F5E
600#C92348
700#A42943
800#7F2438
900#652230
950#320A14
rose — Tailwind v4@theme
@theme {
  --color-rose-50: #fff2f1;
  --color-rose-100: #ffdfde;
  --color-rose-200: #ffc4c5;
  --color-rose-300: #ff9aa0;
  --color-rose-400: #ff6a7a;
  --color-rose-500: #f43f5e;
  --color-rose-600: #c92348;
  --color-rose-700: #a42943;
  --color-rose-800: #7f2438;
  --color-rose-900: #652230;
  --color-rose-950: #320a14;
}
50#FFFFF0
100#E8E8E2
200#D6D6CC
300#BCBCAE
400#A4A493
500#898978
600#727162
700#605F53
800#4B4A41
900#3E3D36
950#1B1A17
ivory — Tailwind v4@theme
@theme {
  --color-ivory-50: #fffff0;
  --color-ivory-100: #e8e8e2;
  --color-ivory-200: #d6d6cc;
  --color-ivory-300: #bcbcae;
  --color-ivory-400: #a4a493;
  --color-ivory-500: #898978;
  --color-ivory-600: #727162;
  --color-ivory-700: #605f53;
  --color-ivory-800: #4b4a41;
  --color-ivory-900: #3e3d36;
  --color-ivory-950: #1b1a17;
}

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