Dark Knight to Muted Clay color palette

181B2BDark Knight B4C2FFPastel Blue 598F4DVictorian Garden 5C3435Rampant Rhubarb 22734CGreasy Greens CD847BMuted Clay

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Knight to Muted Clay is a 6-color palette: #181B2B (Dark Knight), #B4C2FF (Pastel Blue), #598F4D (Victorian Garden), #5C3435 (Rampant Rhubarb), #22734C (Greasy Greens), #CD847B (Muted Clay). It mixes gray, blue, green, brown, red tones and feels cool overall. The strongest text pairing is #181B2B on #B4C2FF with a contrast ratio of 9.83:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Knight	rgb(24, 27, 43)	hsl(231, 28%, 13%)
Pastel Blue	rgb(180, 194, 255)	hsl(229, 100%, 85%)
Victorian Garden	rgb(89, 143, 77)	hsl(109, 30%, 43%)
Rampant Rhubarb	rgb(92, 52, 53)	hsl(358, 28%, 28%)
Greasy Greens	rgb(34, 115, 76)	hsl(151, 54%, 29%)
Muted Clay	rgb(205, 132, 123)	hsl(7, 45%, 64%)

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.83:1 Very good#181B2B on #B4C2FF
Aa9.83:1 Very good#B4C2FF on #181B2B
Aa6.06:1 Good#B4C2FF on #5C3435
Aa6.06:1 Good#5C3435 on #B4C2FF
Aa5.84:1 Good#181B2B on #CD847B
Aa5.84:1 Good#CD847B on #181B2B
Aa4.44:1 Poor#181B2B on #598F4D
Aa4.44:1 Poor#598F4D on #181B2B

Color blindness preview

CSS variables

/* Dark Knight to Muted Clay — https://swatchly.xyz/palette/181b2b-b4c2ff-598f4d-5c3435-22734c-cd847b */
:root {
  --dark-knight: #181b2b;
  --pastel-blue: #b4c2ff;
  --victorian-garden: #598f4d;
  --rampant-rhubarb: #5c3435;
  --greasy-greens: #22734c;
  --muted-clay: #cd847b;
}

Tailwind CSS v4

/* Dark Knight to Muted Clay — https://swatchly.xyz/palette/181b2b-b4c2ff-598f4d-5c3435-22734c-cd847b */
@theme {
  --color-dark-knight: #181b2b;
  --color-dark-knight-50: #f2f5ff;
  --color-dark-knight-100: #e7eaf9;
  --color-dark-knight-200: #d3d7e7;
  --color-dark-knight-300: #bcc0d3;
  --color-dark-knight-400: #9ca0b5;
  --color-dark-knight-500: #808499;
  --color-dark-knight-600: #65697d;
  --color-dark-knight-700: #4f5264;
  --color-dark-knight-800: #3c3f4e;
  --color-dark-knight-900: #2d2f3c;
  --color-dark-knight-950: #181b2b;
  --color-pastel-blue: #b4c2ff;
  --color-pastel-blue-50: #f5f7ff;
  --color-pastel-blue-100: #e9eeff;
  --color-pastel-blue-200: #d0daff;
  --color-pastel-blue-300: #b4c2ff;
  --color-pastel-blue-400: #95a2da;
  --color-pastel-blue-500: #7985be;
  --color-pastel-blue-600: #5f6aa0;
  --color-pastel-blue-700: #495384;
  --color-pastel-blue-800: #373f6a;
  --color-pastel-blue-900: #293054;
  --color-pastel-blue-950: #181d37;
  --color-victorian-garden: #598f4d;
  --color-victorian-garden-50: #deffd7;
  --color-victorian-garden-100: #d0f5c8;
  --color-victorian-garden-200: #b6e2ad;
  --color-victorian-garden-300: #9acc8f;
  --color-victorian-garden-400: #76ac6a;
  --color-victorian-garden-500: #598f4d;
  --color-victorian-garden-600: #417536;
  --color-victorian-garden-700: #2f5e24;
  --color-victorian-garden-800: #214a17;
  --color-victorian-garden-900: #173a0e;
  --color-victorian-garden-950: #0b2506;
  --color-rampant-rhubarb: #5c3435;
  --color-rampant-rhubarb-50: #fff1f1;
  --color-rampant-rhubarb-100: #ffe4e3;
  --color-rampant-rhubarb-200: #f3cdcd;
  --color-rampant-rhubarb-300: #dfb4b4;
  --color-rampant-rhubarb-400: #c19494;
  --color-rampant-rhubarb-500: #a67878;
  --color-rampant-rhubarb-600: #895e5e;
  --color-rampant-rhubarb-700: #6f4849;
  --color-rampant-rhubarb-800: #5c3435;
  --color-rampant-rhubarb-900: #452929;
  --color-rampant-rhubarb-950: #2c1818;
  --color-greasy-greens: #22734c;
  --color-greasy-greens-50: #ddffea;
  --color-greasy-greens-100: #c7f7da;
  --color-greasy-greens-200: #aae4c1;
  --color-greasy-greens-300: #8acda6;
  --color-greasy-greens-400: #62ad84;
  --color-greasy-greens-500: #429067;
  --color-greasy-greens-600: #22734c;
  --color-greasy-greens-700: #135c3a;
  --color-greasy-greens-800: #05492c;
  --color-greasy-greens-900: #003920;
  --color-greasy-greens-950: #002413;
  --color-muted-clay: #cd847b;
  --color-muted-clay-50: #ffeeec;
  --color-muted-clay-100: #ffdfda;
  --color-muted-clay-200: #fec1b9;
  --color-muted-clay-300: #eaa79e;
  --color-muted-clay-400: #cd847b;
  --color-muted-clay-500: #b16a62;
  --color-muted-clay-600: #94524a;
  --color-muted-clay-700: #7a3e38;
  --color-muted-clay-800: #632f29;
  --color-muted-clay-900: #4f231e;
  --color-muted-clay-950: #341411;
}