Noble Black to Muddy Olive color palette

1D212ANoble Black DDC5C6Perfume Cloud 738194Stonewash 364729Palm Leaf C6A3A6Parfait 4B6149Muddy Olive

Open in generator Export PNG, PDF, ASE…

About this palette

Noble Black to Muddy Olive is a 6-color muted palette: #1D212A (Noble Black), #DDC5C6 (Perfume Cloud), #738194 (Stonewash), #364729 (Palm Leaf), #C6A3A6 (Parfait), #4B6149 (Muddy Olive). It mixes gray, green, red tones and feels cool overall. The strongest text pairing is #1D212A on #DDC5C6 with a contrast ratio of 9.88:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noble Black	rgb(29, 33, 42)	hsl(222, 18%, 14%)
Perfume Cloud	rgb(221, 197, 198)	hsl(358, 26%, 82%)
Stonewash	rgb(115, 129, 148)	hsl(215, 13%, 52%)
Palm Leaf	rgb(54, 71, 41)	hsl(94, 27%, 22%)
Parfait	rgb(198, 163, 166)	hsl(355, 23%, 71%)
Muddy Olive	rgb(75, 97, 73)	hsl(115, 14%, 33%)

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.

Aa9.88:1 Very good#1D212A on #DDC5C6
Aa9.88:1 Very good#DDC5C6 on #1D212A
Aa7.05:1 Very good#1D212A on #C6A3A6
Aa7.05:1 Very good#C6A3A6 on #1D212A
Aa6.16:1 Good#DDC5C6 on #364729
Aa6.16:1 Good#364729 on #DDC5C6
Aa4.40:1 Poor#364729 on #C6A3A6
Aa4.40:1 Poor#C6A3A6 on #364729

Color blindness preview

CSS variables

/* Noble Black to Muddy Olive — https://swatchly.xyz/palette/1d212a-ddc5c6-738194-364729-c6a3a6-4b6149 */
:root {
  --noble-black: #1d212a;
  --perfume-cloud: #ddc5c6;
  --stonewash: #738194;
  --palm-leaf: #364729;
  --parfait: #c6a3a6;
  --muddy-olive: #4b6149;
}

Tailwind CSS v4

/* Noble Black to Muddy Olive — https://swatchly.xyz/palette/1d212a-ddc5c6-738194-364729-c6a3a6-4b6149 */
@theme {
  --color-noble-black: #1d212a;
  --color-noble-black-50: #f2f5fc;
  --color-noble-black-100: #e8ebf3;
  --color-noble-black-200: #d3d7e1;
  --color-noble-black-300: #bcc1cb;
  --color-noble-black-400: #9ca1ad;
  --color-noble-black-500: #818792;
  --color-noble-black-600: #686d77;
  --color-noble-black-700: #525660;
  --color-noble-black-800: #40444c;
  --color-noble-black-900: #31343c;
  --color-noble-black-950: #1d212a;
  --color-perfume-cloud: #ddc5c6;
  --color-perfume-cloud-50: #fff9f9;
  --color-perfume-cloud-100: #fdefef;
  --color-perfume-cloud-200: #eddcdd;
  --color-perfume-cloud-300: #ddc5c6;
  --color-perfume-cloud-400: #baa4a5;
  --color-perfume-cloud-500: #9d8788;
  --color-perfume-cloud-600: #806b6c;
  --color-perfume-cloud-700: #665354;
  --color-perfume-cloud-800: #503f40;
  --color-perfume-cloud-900: #3d2f2f;
  --color-perfume-cloud-950: #261c1d;
  --color-stonewash: #738194;
  --color-stonewash-50: #edf5ff;
  --color-stonewash-100: #e0eaf7;
  --color-stonewash-200: #c9d5e5;
  --color-stonewash-300: #b0becf;
  --color-stonewash-400: #8f9db0;
  --color-stonewash-500: #738194;
  --color-stonewash-600: #5b687a;
  --color-stonewash-700: #475262;
  --color-stonewash-800: #36404e;
  --color-stonewash-900: #29323d;
  --color-stonewash-950: #191f27;
  --color-palm-leaf: #364729;
  --color-palm-leaf-50: #eefae6;
  --color-palm-leaf-100: #e3f0da;
  --color-palm-leaf-200: #ceddc3;
  --color-palm-leaf-300: #b6c7a9;
  --color-palm-leaf-400: #95a887;
  --color-palm-leaf-500: #798d6b;
  --color-palm-leaf-600: #5f7152;
  --color-palm-leaf-700: #4a5a3e;
  --color-palm-leaf-800: #364729;
  --color-palm-leaf-900: #2a3621;
  --color-palm-leaf-950: #192113;
  --color-parfait: #c6a3a6;
  --color-parfait-50: #fff7f8;
  --color-parfait-100: #ffecee;
  --color-parfait-200: #f2d8da;
  --color-parfait-300: #e0c3c5;
  --color-parfait-400: #c6a3a6;
  --color-parfait-500: #a78689;
  --color-parfait-600: #89696c;
  --color-parfait-700: #6f5254;
  --color-parfait-800: #573e40;
  --color-parfait-900: #432e30;
  --color-parfait-950: #291b1c;
  --color-muddy-olive: #4b6149;
  --color-muddy-olive-50: #ecfaea;
  --color-muddy-olive-100: #e1f0df;
  --color-muddy-olive-200: #ccdfca;
  --color-muddy-olive-300: #b5cab3;
  --color-muddy-olive-400: #95ac92;
  --color-muddy-olive-500: #7a9178;
  --color-muddy-olive-600: #61775f;
  --color-muddy-olive-700: #4b6149;
  --color-muddy-olive-800: #3a4c38;
  --color-muddy-olive-900: #2b3b2a;
  --color-muddy-olive-950: #1a2519;
}