Aubergine to Lovely Breeze Color Palette

About this palette

Aubergine to Lovely Breeze is a 4-color muted, gradient palette: #372628 (Aubergine), #396360 (Rosemary), #91AEA7 (Ninja Turtle), #F6D8E0 (Lovely Breeze). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #372628 on #F6D8E0 with a contrast ratio of 10.76:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aubergine	rgb(55, 38, 40)	hsl(353, 18%, 18%)
Rosemary	rgb(57, 99, 96)	hsl(176, 27%, 31%)
Ninja Turtle	rgb(145, 174, 167)	hsl(166, 15%, 63%)
Lovely Breeze	rgb(246, 216, 224)	hsl(344, 63%, 91%)

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.76:1 Very good#372628 on #F6D8E0
Aa10.76:1 Very good#F6D8E0 on #372628
Aa6.00:1 Good#372628 on #91AEA7
Aa6.00:1 Good#91AEA7 on #372628
Aa5.06:1 Good#396360 on #F6D8E0
Aa5.06:1 Good#F6D8E0 on #396360

Color blindness preview

CSS variables

/* Aubergine to Lovely Breeze — https://swatchly.xyz/palette/372628-396360-91aea7-f6d8e0 */
:root {
  --aubergine: #372628;
  --rosemary: #396360;
  --ninja-turtle: #91aea7;
  --lovely-breeze: #f6d8e0;
}

Tailwind CSS v4

/* Aubergine to Lovely Breeze — https://swatchly.xyz/palette/372628-396360-91aea7-f6d8e0 */
@theme {
  --color-aubergine: #372628;
  --color-aubergine-50: #fff1f3;
  --color-aubergine-100: #f6e7e8;
  --color-aubergine-200: #e4d3d4;
  --color-aubergine-300: #cfbbbd;
  --color-aubergine-400: #af9a9c;
  --color-aubergine-500: #927d7f;
  --color-aubergine-600: #756264;
  --color-aubergine-700: #5c4b4c;
  --color-aubergine-800: #463739;
  --color-aubergine-900: #372628;
  --color-aubergine-950: #1f1718;
  --color-rosemary: #396360;
  --color-rosemary-50: #e2fbf9;
  --color-rosemary-100: #d6f2ef;
  --color-rosemary-200: #bfe0dd;
  --color-rosemary-300: #a6ccc8;
  --color-rosemary-400: #84aeaa;
  --color-rosemary-500: #689390;
  --color-rosemary-600: #4f7976;
  --color-rosemary-700: #396360;
  --color-rosemary-800: #2b4e4b;
  --color-rosemary-900: #1e3c3a;
  --color-rosemary-950: #102624;
  --color-ninja-turtle: #91aea7;
  --color-ninja-turtle-50: #ebfbf7;
  --color-ninja-turtle-100: #e1f3ee;
  --color-ninja-turtle-200: #cbe1db;
  --color-ninja-turtle-300: #b3ccc6;
  --color-ninja-turtle-400: #91aea7;
  --color-ninja-turtle-500: #75918b;
  --color-ninja-turtle-600: #5b766f;
  --color-ninja-turtle-700: #455e58;
  --color-ninja-turtle-800: #334944;
  --color-ninja-turtle-900: #253834;
  --color-ninja-turtle-950: #15221f;
  --color-lovely-breeze: #f6d8e0;
  --color-lovely-breeze-50: #fffafb;
  --color-lovely-breeze-100: #ffeef3;
  --color-lovely-breeze-200: #f6d8e0;
  --color-lovely-breeze-300: #dac1c8;
  --color-lovely-breeze-400: #ba9fa7;
  --color-lovely-breeze-500: #9d828a;
  --color-lovely-breeze-600: #80676e;
  --color-lovely-breeze-700: #664f56;
  --color-lovely-breeze-800: #503c42;
  --color-lovely-breeze-900: #3e2d32;
  --color-lovely-breeze-950: #271b1f;
}