Melanzane to Amorous Color Palette

About this palette

Melanzane to Amorous is a 5-color vintage palette: #302430 (Melanzane), #B6B27E (Nettle), #B7F1DF (Fresh Breeze), #686632 (Jungle Civilization), #977DA6 (Amorous). It mixes gray, yellow, turquoise, brown, purple tones and feels balanced overall. The strongest text pairing is #302430 on #B7F1DF with a contrast ratio of 11.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melanzane	rgb(48, 36, 48)	hsl(300, 14%, 16%)
Nettle	rgb(182, 178, 126)	hsl(56, 28%, 60%)
Fresh Breeze	rgb(183, 241, 223)	hsl(161, 67%, 83%)
Jungle Civilization	rgb(104, 102, 50)	hsl(58, 35%, 30%)
Amorous	rgb(151, 125, 166)	hsl(278, 19%, 57%)

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.

Aa11.73:1 Very good#302430 on #B7F1DF
Aa11.73:1 Very good#B7F1DF on #302430
Aa6.80:1 Good#302430 on #B6B27E
Aa6.80:1 Good#B6B27E on #302430
Aa4.71:1 Good#B7F1DF on #686632
Aa4.71:1 Good#686632 on #B7F1DF
Aa4.08:1 Poor#302430 on #977DA6
Aa4.08:1 Poor#977DA6 on #302430

Color blindness preview

CSS variables

/* Melanzane to Amorous — https://swatchly.xyz/palette/302430-b6b27e-b7f1df-686632-977da6 */
:root {
  --melanzane: #302430;
  --nettle: #b6b27e;
  --fresh-breeze: #b7f1df;
  --jungle-civilization: #686632;
  --amorous: #977da6;
}

Tailwind CSS v4

/* Melanzane to Amorous — https://swatchly.xyz/palette/302430-b6b27e-b7f1df-686632-977da6 */
@theme {
  --color-melanzane: #302430;
  --color-melanzane-50: #fbf2fb;
  --color-melanzane-100: #f2e7f1;
  --color-melanzane-200: #dfd3df;
  --color-melanzane-300: #c9bcc9;
  --color-melanzane-400: #ab9caa;
  --color-melanzane-500: #918391;
  --color-melanzane-600: #786a78;
  --color-melanzane-700: #635663;
  --color-melanzane-800: #514550;
  --color-melanzane-900: #423741;
  --color-melanzane-950: #302430;
  --color-nettle: #b6b27e;
  --color-nettle-50: #fdfce0;
  --color-nettle-100: #f6f4d6;
  --color-nettle-200: #e6e3bf;
  --color-nettle-300: #d2cfa5;
  --color-nettle-400: #b6b27e;
  --color-nettle-500: #989461;
  --color-nettle-600: #7b7745;
  --color-nettle-700: #615d2f;
  --color-nettle-800: #4b481f;
  --color-nettle-900: #393613;
  --color-nettle-950: #222007;
  --color-fresh-breeze: #b7f1df;
  --color-fresh-breeze-50: #d5f7ec;
  --color-fresh-breeze-100: #b7f1df;
  --color-fresh-breeze-200: #b0dcce;
  --color-fresh-breeze-300: #96c8b8;
  --color-fresh-breeze-400: #75aa9a;
  --color-fresh-breeze-500: #599080;
  --color-fresh-breeze-600: #417768;
  --color-fresh-breeze-700: #2e6053;
  --color-fresh-breeze-800: #1f4c40;
  --color-fresh-breeze-900: #143b31;
  --color-fresh-breeze-950: #09251e;
  --color-jungle-civilization: #686632;
  --color-jungle-civilization-50: #f8f8d9;
  --color-jungle-civilization-100: #edecc9;
  --color-jungle-civilization-200: #d8d7ae;
  --color-jungle-civilization-300: #c0bf90;
  --color-jungle-civilization-400: #a09f6b;
  --color-jungle-civilization-500: #84824d;
  --color-jungle-civilization-600: #686632;
  --color-jungle-civilization-700: #535123;
  --color-jungle-civilization-800: #413f17;
  --color-jungle-civilization-900: #32310e;
  --color-jungle-civilization-950: #1f1e06;
  --color-amorous: #977da6;
  --color-amorous-50: #faf2ff;
  --color-amorous-100: #f5e5ff;
  --color-amorous-200: #e4d0f1;
  --color-amorous-300: #d0b9dd;
  --color-amorous-400: #b298c1;
  --color-amorous-500: #977da6;
  --color-amorous-600: #7b638a;
  --color-amorous-700: #634c70;
  --color-amorous-800: #4e3a59;
  --color-amorous-900: #3c2c46;
  --color-amorous-950: #261a2d;
}