Melanzane to Nature Color Palette

About this palette

Melanzane to Nature is a 5-color muted, cool palette: #352B3A (Melanzane), #354C5B (Nocturne), #A1786A (Equestrienne), #75A1B2 (Seaside), #C1D3B7 (Nature). It mixes gray, blue, red, green tones and feels cool overall. The strongest text pairing is #352B3A on #C1D3B7 with a contrast ratio of 8.52:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melanzane	rgb(53, 43, 58)	hsl(280, 15%, 20%)
Nocturne	rgb(53, 76, 91)	hsl(204, 26%, 28%)
Equestrienne	rgb(161, 120, 106)	hsl(15, 23%, 52%)
Seaside	rgb(117, 161, 178)	hsl(197, 28%, 58%)
Nature	rgb(193, 211, 183)	hsl(99, 24%, 77%)

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.

Aa8.52:1 Very good#352B3A on #C1D3B7
Aa8.52:1 Very good#C1D3B7 on #352B3A
Aa5.68:1 Good#354C5B on #C1D3B7
Aa5.68:1 Good#C1D3B7 on #354C5B
Aa4.81:1 Good#352B3A on #75A1B2
Aa4.81:1 Good#75A1B2 on #352B3A
Aa3.47:1 Poor#352B3A on #A1786A
Aa3.47:1 Poor#A1786A on #352B3A

Color blindness preview

CSS variables

/* Melanzane to Nature — https://swatchly.xyz/palette/352b3a-354c5b-a1786a-75a1b2-c1d3b7 */
:root {
  --melanzane: #352b3a;
  --nocturne: #354c5b;
  --equestrienne: #a1786a;
  --seaside: #75a1b2;
  --nature: #c1d3b7;
}

Tailwind CSS v4

/* Melanzane to Nature — https://swatchly.xyz/palette/352b3a-354c5b-a1786a-75a1b2-c1d3b7 */
@theme {
  --color-melanzane: #352b3a;
  --color-melanzane-50: #f9f2fd;
  --color-melanzane-100: #f0e8f4;
  --color-melanzane-200: #ddd3e2;
  --color-melanzane-300: #c7bccd;
  --color-melanzane-400: #a79cae;
  --color-melanzane-500: #8c8092;
  --color-melanzane-600: #706576;
  --color-melanzane-700: #584e5d;
  --color-melanzane-800: #443c49;
  --color-melanzane-900: #352b3a;
  --color-melanzane-950: #1f1a22;
  --color-nocturne: #354c5b;
  --color-nocturne-50: #ebf7ff;
  --color-nocturne-100: #ddeef9;
  --color-nocturne-200: #c7dbe8;
  --color-nocturne-300: #b0c6d5;
  --color-nocturne-400: #8fa8b8;
  --color-nocturne-500: #758e9e;
  --color-nocturne-600: #5c7484;
  --color-nocturne-700: #485e6d;
  --color-nocturne-800: #354c5b;
  --color-nocturne-900: #293a46;
  --color-nocturne-950: #18252d;
  --color-equestrienne: #a1786a;
  --color-equestrienne-50: #fff1ec;
  --color-equestrienne-100: #ffe3da;
  --color-equestrienne-200: #efcdc2;
  --color-equestrienne-300: #dbb5a8;
  --color-equestrienne-400: #bd9486;
  --color-equestrienne-500: #a1786a;
  --color-equestrienne-600: #855f52;
  --color-equestrienne-700: #6c4a3e;
  --color-equestrienne-800: #56382e;
  --color-equestrienne-900: #442b22;
  --color-equestrienne-950: #2c1a13;
  --color-seaside: #75a1b2;
  --color-seaside-50: #e1f6ff;
  --color-seaside-100: #cfecf8;
  --color-seaside-200: #b5d8e6;
  --color-seaside-300: #9ac1d1;
  --color-seaside-400: #75a1b2;
  --color-seaside-500: #5c8797;
  --color-seaside-600: #446d7d;
  --color-seaside-700: #325866;
  --color-seaside-800: #244551;
  --color-seaside-900: #193640;
  --color-seaside-950: #0d222a;
  --color-nature: #c1d3b7;
  --color-nature-50: #e7f2e0;
  --color-nature-100: #dae6d3;
  --color-nature-200: #c1d3b7;
  --color-nature-300: #aebea5;
  --color-nature-400: #90a187;
  --color-nature-500: #77876d;
  --color-nature-600: #5f6e56;
  --color-nature-700: #4b5943;
  --color-nature-800: #3a4733;
  --color-nature-900: #2c3726;
  --color-nature-950: #1a2216;
}