Melanzane to Scented Spring color palette

312834Melanzane 534B25Jungle King 647C6EEcological 92967ESwamp Sessions 9EBFB0Meadow Morn E9DAF2Scented Spring

Open in generator Export PNG, PDF, ASE…

About this palette

Melanzane to Scented Spring is a 6-color muted, gradient palette: #312834 (Melanzane), #534B25 (Jungle King), #647C6E (Ecological), #92967E (Swamp Sessions), #9EBFB0 (Meadow Morn), #E9DAF2 (Scented Spring). It mixes gray, brown, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #312834 on #E9DAF2 with a contrast ratio of 10.63:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melanzane	rgb(49, 40, 52)	hsl(285, 13%, 18%)
Jungle King	rgb(83, 75, 37)	hsl(50, 38%, 24%)
Ecological	rgb(100, 124, 110)	hsl(145, 11%, 44%)
Swamp Sessions	rgb(146, 150, 126)	hsl(70, 10%, 54%)
Meadow Morn	rgb(158, 191, 176)	hsl(153, 20%, 68%)
Scented Spring	rgb(233, 218, 242)	hsl(278, 48%, 90%)

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.63:1 Very good#312834 on #E9DAF2
Aa10.63:1 Very good#E9DAF2 on #312834
Aa7.10:1 Very good#312834 on #9EBFB0
Aa7.10:1 Very good#9EBFB0 on #312834
Aa6.57:1 Good#534B25 on #E9DAF2
Aa6.57:1 Good#E9DAF2 on #534B25
Aa4.64:1 Good#312834 on #92967E
Aa4.64:1 Good#92967E on #312834

Color blindness preview

CSS variables

/* Melanzane to Scented Spring — https://swatchly.xyz/palette/312834-534b25-647c6e-92967e-9ebfb0-e9daf2 */
:root {
  --melanzane: #312834;
  --jungle-king: #534b25;
  --ecological: #647c6e;
  --swamp-sessions: #92967e;
  --meadow-morn: #9ebfb0;
  --scented-spring: #e9daf2;
}

Tailwind CSS v4

/* Melanzane to Scented Spring — https://swatchly.xyz/palette/312834-534b25-647c6e-92967e-9ebfb0-e9daf2 */
@theme {
  --color-melanzane: #312834;
  --color-melanzane-50: #f9f2fb;
  --color-melanzane-100: #f0e8f2;
  --color-melanzane-200: #ddd4e0;
  --color-melanzane-300: #c7bdca;
  --color-melanzane-400: #a69caa;
  --color-melanzane-500: #8a7f8d;
  --color-melanzane-600: #6e6471;
  --color-melanzane-700: #554c58;
  --color-melanzane-800: #413943;
  --color-melanzane-900: #312834;
  --color-melanzane-950: #1c181e;
  --color-jungle-king: #534b25;
  --color-jungle-king-50: #faf6de;
  --color-jungle-king-100: #f1ecd2;
  --color-jungle-king-200: #dfd8b9;
  --color-jungle-king-300: #cbc3a0;
  --color-jungle-king-400: #aea67f;
  --color-jungle-king-500: #948c64;
  --color-jungle-king-600: #7b724c;
  --color-jungle-king-700: #655d39;
  --color-jungle-king-800: #534b25;
  --color-jungle-king-900: #403a1e;
  --color-jungle-king-950: #29240f;
  --color-ecological: #647c6e;
  --color-ecological-50: #ebf9f1;
  --color-ecological-100: #e2f2e8;
  --color-ecological-200: #cee1d5;
  --color-ecological-300: #b7ccbf;
  --color-ecological-400: #97afa1;
  --color-ecological-500: #7d9587;
  --color-ecological-600: #647c6e;
  --color-ecological-700: #4d6356;
  --color-ecological-800: #3a4e42;
  --color-ecological-900: #2b3b32;
  --color-ecological-950: #19251e;
  --color-swamp-sessions: #92967e;
  --color-swamp-sessions-50: #f7f9eb;
  --color-swamp-sessions-100: #eff2e3;
  --color-swamp-sessions-200: #dee1cf;
  --color-swamp-sessions-300: #c9cdb8;
  --color-swamp-sessions-400: #acaf99;
  --color-swamp-sessions-500: #92967e;
  --color-swamp-sessions-600: #757962;
  --color-swamp-sessions-700: #5c604a;
  --color-swamp-sessions-800: #474a38;
  --color-swamp-sessions-900: #363829;
  --color-swamp-sessions-950: #202217;
  --color-meadow-morn: #9ebfb0;
  --color-meadow-morn-50: #e1f5ec;
  --color-meadow-morn-100: #d3eadf;
  --color-meadow-morn-200: #bbd6c9;
  --color-meadow-morn-300: #9ebfb0;
  --color-meadow-morn-400: #82a193;
  --color-meadow-morn-500: #68887a;
  --color-meadow-morn-600: #516f62;
  --color-meadow-morn-700: #3e594d;
  --color-meadow-morn-800: #2f473d;
  --color-meadow-morn-900: #23382f;
  --color-meadow-morn-950: #14231d;
  --color-scented-spring: #e9daf2;
  --color-scented-spring-50: #fdfaff;
  --color-scented-spring-100: #f8effd;
  --color-scented-spring-200: #e9daf2;
  --color-scented-spring-300: #cfc3d6;
  --color-scented-spring-400: #afa1b7;
  --color-scented-spring-500: #92849a;
  --color-scented-spring-600: #76697d;
  --color-scented-spring-700: #5d5164;
  --color-scented-spring-800: #483e4e;
  --color-scented-spring-900: #382f3d;
  --color-scented-spring-950: #231c26;
}