Nightmare to Innocent Snowdrop color palette

122319Nightmare 504A63Nightly Walk 8E6254Weathered Leather D1937ABeauty and the Beach 85BD9FNeptune Green CCCBF6Innocent Snowdrop

Open in generator Export PNG, PDF, ASE…

About this palette

Nightmare to Innocent Snowdrop is a 6-color muted palette: #122319 (Nightmare), #504A63 (Nightly Walk), #8E6254 (Weathered Leather), #D1937A (Beauty and the Beach), #85BD9F (Neptune Green), #CCCBF6 (Innocent Snowdrop). It mixes gray, purple, red, orange, green tones and feels cool overall. The strongest text pairing is #122319 on #CCCBF6 with a contrast ratio of 10.50:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightmare	rgb(18, 35, 25)	hsl(145, 32%, 10%)
Nightly Walk	rgb(80, 74, 99)	hsl(254, 14%, 34%)
Weathered Leather	rgb(142, 98, 84)	hsl(14, 26%, 44%)
Beauty and the Beach	rgb(209, 147, 122)	hsl(17, 49%, 65%)
Neptune Green	rgb(133, 189, 159)	hsl(148, 30%, 63%)
Innocent Snowdrop	rgb(204, 203, 246)	hsl(241, 70%, 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.

Aa10.50:1 Very good#122319 on #CCCBF6
Aa10.50:1 Very good#CCCBF6 on #122319
Aa7.64:1 Very good#122319 on #85BD9F
Aa7.64:1 Very good#85BD9F on #122319
Aa6.38:1 Good#122319 on #D1937A
Aa6.38:1 Good#D1937A on #122319
Aa5.37:1 Good#504A63 on #CCCBF6
Aa5.37:1 Good#CCCBF6 on #504A63

Color blindness preview

CSS variables

/* Nightmare to Innocent Snowdrop — https://swatchly.xyz/palette/122319-504a63-8e6254-d1937a-85bd9f-cccbf6 */
:root {
  --nightmare: #122319;
  --nightly-walk: #504a63;
  --weathered-leather: #8e6254;
  --beauty-and-the-beach: #d1937a;
  --neptune-green: #85bd9f;
  --innocent-snowdrop: #cccbf6;
}

Tailwind CSS v4

/* Nightmare to Innocent Snowdrop — https://swatchly.xyz/palette/122319-504a63-8e6254-d1937a-85bd9f-cccbf6 */
@theme {
  --color-nightmare: #122319;
  --color-nightmare-50: #edf9f1;
  --color-nightmare-100: #e2efe6;
  --color-nightmare-200: #ccdcd2;
  --color-nightmare-300: #b4c6ba;
  --color-nightmare-400: #93a79a;
  --color-nightmare-500: #788c7f;
  --color-nightmare-600: #5e7165;
  --color-nightmare-700: #495a4f;
  --color-nightmare-800: #37463d;
  --color-nightmare-900: #29362e;
  --color-nightmare-950: #122319;
  --color-nightly-walk: #504a63;
  --color-nightly-walk-50: #f6f3ff;
  --color-nightly-walk-100: #ece8fb;
  --color-nightly-walk-200: #d7d2e9;
  --color-nightly-walk-300: #c0bad3;
  --color-nightly-walk-400: #9f99b4;
  --color-nightly-walk-500: #837d98;
  --color-nightly-walk-600: #67617b;
  --color-nightly-walk-700: #504a63;
  --color-nightly-walk-800: #3e394d;
  --color-nightly-walk-900: #302c3c;
  --color-nightly-walk-950: #1d1a26;
  --color-weathered-leather: #8e6254;
  --color-weathered-leather-50: #fff2ee;
  --color-weathered-leather-100: #ffe5dd;
  --color-weathered-leather-200: #f4cfc3;
  --color-weathered-leather-300: #e1b7aa;
  --color-weathered-leather-400: #c59789;
  --color-weathered-leather-500: #aa7c6d;
  --color-weathered-leather-600: #8e6254;
  --color-weathered-leather-700: #734c40;
  --color-weathered-leather-800: #5c3a2f;
  --color-weathered-leather-900: #482b22;
  --color-weathered-leather-950: #2f1a13;
  --color-beauty-and-the-beach: #d1937a;
  --color-beauty-and-the-beach-50: #fff3ef;
  --color-beauty-and-the-beach-100: #ffe7dd;
  --color-beauty-and-the-beach-200: #fdcdba;
  --color-beauty-and-the-beach-300: #ebb59f;
  --color-beauty-and-the-beach-400: #d1937a;
  --color-beauty-and-the-beach-500: #b3775f;
  --color-beauty-and-the-beach-600: #955d46;
  --color-beauty-and-the-beach-700: #7a4732;
  --color-beauty-and-the-beach-800: #623623;
  --color-beauty-and-the-beach-900: #4d2818;
  --color-beauty-and-the-beach-950: #32170c;
  --color-neptune-green: #85bd9f;
  --color-neptune-green-50: #edfff4;
  --color-neptune-green-100: #dbfbe9;
  --color-neptune-green-200: #c5ebd5;
  --color-neptune-green-300: #abd8bf;
  --color-neptune-green-400: #85bd9f;
  --color-neptune-green-500: #689e82;
  --color-neptune-green-600: #4b8165;
  --color-neptune-green-700: #34674e;
  --color-neptune-green-800: #23503b;
  --color-neptune-green-900: #173d2b;
  --color-neptune-green-950: #0a2519;
  --color-innocent-snowdrop: #cccbf6;
  --color-innocent-snowdrop-50: #eeeeff;
  --color-innocent-snowdrop-100: #e2e2ff;
  --color-innocent-snowdrop-200: #cccbf6;
  --color-innocent-snowdrop-300: #b7b6dc;
  --color-innocent-snowdrop-400: #9998c0;
  --color-innocent-snowdrop-500: #7f7ea5;
  --color-innocent-snowdrop-600: #66658a;
  --color-innocent-snowdrop-700: #515071;
  --color-innocent-snowdrop-800: #403e5c;
  --color-innocent-snowdrop-900: #312f48;
  --color-innocent-snowdrop-950: #1e1d2f;
}