Sweet Lilac to Punched Pink Color Palette

About this palette

Sweet Lilac to Punched Pink is a 5-color warm, vintage palette: #E4B9D2 (Sweet Lilac), #093A31 (Botanical Night), #7B505C (Nocturne Red), #B9F3E4 (Fresh Breeze), #BA8292 (Punched Pink). It mixes pink, turquoise, red tones and feels warm overall. The strongest text pairing is #093A31 on #B9F3E4 with a contrast ratio of 10.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweet Lilac	rgb(228, 185, 210)	hsl(325, 44%, 81%)
Botanical Night	rgb(9, 58, 49)	hsl(169, 73%, 13%)
Nocturne Red	rgb(123, 80, 92)	hsl(343, 21%, 40%)
Fresh Breeze	rgb(185, 243, 228)	hsl(164, 71%, 84%)
Punched Pink	rgb(186, 130, 146)	hsl(343, 29%, 62%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa10.24:1 Very good#093A31 on #B9F3E4
Aa10.24:1 Very good#B9F3E4 on #093A31
Aa7.33:1 Very good#E4B9D2 on #093A31
Aa7.33:1 Very good#093A31 on #E4B9D2
Aa5.41:1 Good#7B505C on #B9F3E4
Aa5.41:1 Good#B9F3E4 on #7B505C
Aa4.03:1 Poor#093A31 on #BA8292
Aa4.03:1 Poor#BA8292 on #093A31

Color blindness preview

CSS variables

/* Sweet Lilac to Punched Pink — https://swatchly.xyz/palette/e4b9d2-093a31-7b505c-b9f3e4-ba8292 */
:root {
  --sweet-lilac: #e4b9d2;
  --botanical-night: #093a31;
  --nocturne-red: #7b505c;
  --fresh-breeze: #b9f3e4;
  --punched-pink: #ba8292;
}

Tailwind CSS v4

/* Sweet Lilac to Punched Pink — https://swatchly.xyz/palette/e4b9d2-093a31-7b505c-b9f3e4-ba8292 */
@theme {
  --color-sweet-lilac: #e4b9d2;
  --color-sweet-lilac-50: #fff5fb;
  --color-sweet-lilac-100: #ffe8f5;
  --color-sweet-lilac-200: #f2d3e5;
  --color-sweet-lilac-300: #e4b9d2;
  --color-sweet-lilac-400: #c199b0;
  --color-sweet-lilac-500: #a47c94;
  --color-sweet-lilac-600: #876178;
  --color-sweet-lilac-700: #6d4b5f;
  --color-sweet-lilac-800: #56394a;
  --color-sweet-lilac-900: #432a39;
  --color-sweet-lilac-950: #2a1924;
  --color-botanical-night: #093a31;
  --color-botanical-night-50: #e2fcf5;
  --color-botanical-night-100: #d5f3eb;
  --color-botanical-night-200: #bde0d7;
  --color-botanical-night-300: #a3cbc0;
  --color-botanical-night-400: #7faca1;
  --color-botanical-night-500: #639085;
  --color-botanical-night-600: #49756b;
  --color-botanical-night-700: #355d54;
  --color-botanical-night-800: #254941;
  --color-botanical-night-900: #093a31;
  --color-botanical-night-950: #0d231e;
  --color-nocturne-red: #7b505c;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3ea;
  --color-nocturne-red-200: #f3ced7;
  --color-nocturne-red-300: #e1b7c2;
  --color-nocturne-red-400: #c698a4;
  --color-nocturne-red-500: #ac7e8a;
  --color-nocturne-red-600: #926571;
  --color-nocturne-red-700: #7b505c;
  --color-nocturne-red-800: #623d48;
  --color-nocturne-red-900: #4d2e37;
  --color-nocturne-red-950: #321b22;
  --color-fresh-breeze: #b9f3e4;
  --color-fresh-breeze-50: #d7f8ef;
  --color-fresh-breeze-100: #b9f3e4;
  --color-fresh-breeze-200: #b2ddd2;
  --color-fresh-breeze-300: #98c9bc;
  --color-fresh-breeze-400: #75ab9e;
  --color-fresh-breeze-500: #5a9184;
  --color-fresh-breeze-600: #41776a;
  --color-fresh-breeze-700: #2e6055;
  --color-fresh-breeze-800: #1f4b42;
  --color-fresh-breeze-900: #143a32;
  --color-fresh-breeze-950: #09251f;
  --color-punched-pink: #ba8292;
  --color-punched-pink-50: #ffeaef;
  --color-punched-pink-100: #ffd8e2;
  --color-punched-pink-200: #efbfcc;
  --color-punched-pink-300: #daa5b3;
  --color-punched-pink-400: #ba8292;
  --color-punched-pink-500: #9f6a79;
  --color-punched-pink-600: #855362;
  --color-punched-pink-700: #6d404d;
  --color-punched-pink-800: #58313d;
  --color-punched-pink-900: #472530;
  --color-punched-pink-950: #2f161e;
}