Start generating

Mole to Light Spirited color palette

392B25Mole324E5DNocturne82586DRoyal FigB29176Saddle UpE1BCCDCreamy BerryD4EEE7Light Spirited
Open in generator Export PNG, PDF, ASE…

About this palette

Mole to Light Spirited is a 6-color muted, vintage palette: #392B25 (Mole), #324E5D (Nocturne), #82586D (Royal Fig), #B29176 (Saddle Up), #E1BCCD (Creamy Berry), #D4EEE7 (Light Spirited). It mixes gray, blue, red, orange, pink tones and feels warm overall. The strongest text pairing is #392B25 on #D4EEE7 with a contrast ratio of 11.11:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Molergb(57, 43, 37)hsl(18, 21%, 18%)
Nocturnergb(50, 78, 93)hsl(201, 30%, 28%)
Royal Figrgb(130, 88, 109)hsl(330, 19%, 43%)
Saddle Uprgb(178, 145, 118)hsl(27, 28%, 58%)
Creamy Berryrgb(225, 188, 205)hsl(332, 38%, 81%)
Light Spiritedrgb(212, 238, 231)hsl(164, 43%, 88%)

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.11:1 Very good#392B25 on #D4EEE7
  • Aa11.11:1 Very good#D4EEE7 on #392B25
  • Aa7.94:1 Very good#392B25 on #E1BCCD
  • Aa7.94:1 Very good#E1BCCD on #392B25
  • Aa7.21:1 Very good#324E5D on #D4EEE7
  • Aa7.21:1 Very good#D4EEE7 on #324E5D
  • Aa5.15:1 Good#324E5D on #E1BCCD
  • Aa5.15:1 Good#E1BCCD on #324E5D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mole to Light Spirited — https://swatchly.xyz/palette/392b25-324e5d-82586d-b29176-e1bccd-d4eee7 */
:root {
  --mole: #392b25;
  --nocturne: #324e5d;
  --royal-fig: #82586d;
  --saddle-up: #b29176;
  --creamy-berry: #e1bccd;
  --light-spirited: #d4eee7;
}

Tailwind CSS v4

/* Mole to Light Spirited — https://swatchly.xyz/palette/392b25-324e5d-82586d-b29176-e1bccd-d4eee7 */
@theme {
  --color-mole: #392b25;
  --color-mole-50: #fdf3ee;
  --color-mole-100: #f4e8e3;
  --color-mole-200: #e2d4ce;
  --color-mole-300: #cdbdb7;
  --color-mole-400: #ad9d95;
  --color-mole-500: #918079;
  --color-mole-600: #75655f;
  --color-mole-700: #5d4f49;
  --color-mole-800: #483c37;
  --color-mole-900: #392b25;
  --color-mole-950: #211a17;
  --color-nocturne: #324e5d;
  --color-nocturne-50: #eaf7ff;
  --color-nocturne-100: #dbeffa;
  --color-nocturne-200: #c4dce9;
  --color-nocturne-300: #acc7d6;
  --color-nocturne-400: #8ca9ba;
  --color-nocturne-500: #718fa0;
  --color-nocturne-600: #597686;
  --color-nocturne-700: #45606f;
  --color-nocturne-800: #324e5d;
  --color-nocturne-900: #273c47;
  --color-nocturne-950: #17262e;
  --color-royal-fig: #82586d;
  --color-royal-fig-50: #fff1f7;
  --color-royal-fig-100: #ffe0ef;
  --color-royal-fig-200: #eecadb;
  --color-royal-fig-300: #dab0c4;
  --color-royal-fig-400: #bb8fa4;
  --color-royal-fig-500: #9f7388;
  --color-royal-fig-600: #82586d;
  --color-royal-fig-700: #694457;
  --color-royal-fig-800: #543444;
  --color-royal-fig-900: #422735;
  --color-royal-fig-950: #2a1721;
  --color-saddle-up: #b29176;
  --color-saddle-up-50: #ffeee1;
  --color-saddle-up-100: #f9e1cf;
  --color-saddle-up-200: #e7cbb5;
  --color-saddle-up-300: #d1b29a;
  --color-saddle-up-400: #b29176;
  --color-saddle-up-500: #97785d;
  --color-saddle-up-600: #7d5f46;
  --color-saddle-up-700: #664b34;
  --color-saddle-up-800: #513a26;
  --color-saddle-up-900: #412d1c;
  --color-saddle-up-950: #2a1c0f;
  --color-creamy-berry: #e1bccd;
  --color-creamy-berry-50: #fff6fa;
  --color-creamy-berry-100: #ffe9f3;
  --color-creamy-berry-200: #f0d5e1;
  --color-creamy-berry-300: #e1bccd;
  --color-creamy-berry-400: #be9cac;
  --color-creamy-berry-500: #a17f8f;
  --color-creamy-berry-600: #856473;
  --color-creamy-berry-700: #6b4d5b;
  --color-creamy-berry-800: #543b47;
  --color-creamy-berry-900: #412b36;
  --color-creamy-berry-950: #291a21;
  --color-light-spirited: #d4eee7;
  --color-light-spirited-50: #e7f6f2;
  --color-light-spirited-100: #d4eee7;
  --color-light-spirited-200: #c6d9d4;
  --color-light-spirited-300: #aec4be;
  --color-light-spirited-400: #8ea69f;
  --color-light-spirited-500: #738b85;
  --color-light-spirited-600: #5a716b;
  --color-light-spirited-700: #465a55;
  --color-light-spirited-800: #354742;
  --color-light-spirited-900: #273733;
  --color-light-spirited-950: #17221f;
}

Similar palettes