Start generating

Twilight Zone to Melting Glacier color palette

161912Twilight Zone353F2AEverglade8E686FMoonscapeAA95B6Metal Petal95D1C8WintermintE3F7F3Melting Glacier
Open in generator Export PNG, PDF, ASE…

About this palette

Twilight Zone to Melting Glacier is a 6-color muted palette: #161912 (Twilight Zone), #353F2A (Everglade), #8E686F (Moonscape), #AA95B6 (Metal Petal), #95D1C8 (Wintermint), #E3F7F3 (Melting Glacier). It mixes black, green, red, purple, turquoise, white tones and feels cool overall. The strongest text pairing is #161912 on #E3F7F3 with a contrast ratio of 15.96:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Twilight Zonergb(22, 25, 18)hsl(86, 16%, 8%)
Evergladergb(53, 63, 42)hsl(89, 20%, 21%)
Moonscapergb(142, 104, 111)hsl(349, 15%, 48%)
Metal Petalrgb(170, 149, 182)hsl(278, 18%, 65%)
Wintermintrgb(149, 209, 200)hsl(171, 39%, 70%)
Melting Glacierrgb(227, 247, 243)hsl(168, 56%, 93%)

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.

  • Aa15.96:1 Super#161912 on #E3F7F3
  • Aa15.96:1 Super#E3F7F3 on #161912
  • Aa10.35:1 Very good#161912 on #95D1C8
  • Aa10.35:1 Very good#95D1C8 on #161912
  • Aa9.95:1 Very good#353F2A on #E3F7F3
  • Aa9.95:1 Very good#E3F7F3 on #353F2A
  • Aa6.50:1 Good#161912 on #AA95B6
  • Aa6.50:1 Good#AA95B6 on #161912

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Twilight Zone to Melting Glacier — https://swatchly.xyz/palette/161912-353f2a-8e686f-aa95b6-95d1c8-e3f7f3 */
:root {
  --twilight-zone: #161912;
  --everglade: #353f2a;
  --moonscape: #8e686f;
  --metal-petal: #aa95b6;
  --wintermint: #95d1c8;
  --melting-glacier: #e3f7f3;
}

Tailwind CSS v4

/* Twilight Zone to Melting Glacier — https://swatchly.xyz/palette/161912-353f2a-8e686f-aa95b6-95d1c8-e3f7f3 */
@theme {
  --color-twilight-zone: #161912;
  --color-twilight-zone-50: #f4f6f1;
  --color-twilight-zone-100: #e9ece6;
  --color-twilight-zone-200: #d5d9d1;
  --color-twilight-zone-300: #bfc2ba;
  --color-twilight-zone-400: #9fa39a;
  --color-twilight-zone-500: #82867d;
  --color-twilight-zone-600: #666a62;
  --color-twilight-zone-700: #4f524b;
  --color-twilight-zone-800: #3b3e37;
  --color-twilight-zone-900: #2b2d28;
  --color-twilight-zone-950: #161912;
  --color-everglade: #353f2a;
  --color-everglade-50: #f1f8ea;
  --color-everglade-100: #e6eede;
  --color-everglade-200: #d2dbc8;
  --color-everglade-300: #b9c4ae;
  --color-everglade-400: #98a38c;
  --color-everglade-500: #7b876f;
  --color-everglade-600: #606b55;
  --color-everglade-700: #49533f;
  --color-everglade-800: #353f2a;
  --color-everglade-900: #293022;
  --color-everglade-950: #181d13;
  --color-moonscape: #8e686f;
  --color-moonscape-50: #fff1f3;
  --color-moonscape-100: #ffe5e9;
  --color-moonscape-200: #f1d1d6;
  --color-moonscape-300: #debbc1;
  --color-moonscape-400: #c29ca2;
  --color-moonscape-500: #a88188;
  --color-moonscape-600: #8e686f;
  --color-moonscape-700: #735157;
  --color-moonscape-800: #5c3e43;
  --color-moonscape-900: #482e33;
  --color-moonscape-950: #2e1b1f;
  --color-metal-petal: #aa95b6;
  --color-metal-petal-50: #f9f0ff;
  --color-metal-petal-100: #f1e3fa;
  --color-metal-petal-200: #dfcee8;
  --color-metal-petal-300: #c9b6d3;
  --color-metal-petal-400: #aa95b6;
  --color-metal-petal-500: #8f7b9a;
  --color-metal-petal-600: #74617f;
  --color-metal-petal-700: #5d4c67;
  --color-metal-petal-800: #4a3b52;
  --color-metal-petal-900: #392d41;
  --color-metal-petal-950: #241b29;
  --color-wintermint: #95d1c8;
  --color-wintermint-50: #defef9;
  --color-wintermint-100: #d2f6f0;
  --color-wintermint-200: #b9e4dd;
  --color-wintermint-300: #95d1c8;
  --color-wintermint-400: #78b0a8;
  --color-wintermint-500: #5a948c;
  --color-wintermint-600: #3f7971;
  --color-wintermint-700: #2b615a;
  --color-wintermint-800: #1c4c46;
  --color-wintermint-900: #113a36;
  --color-wintermint-950: #072521;
  --color-melting-glacier: #e3f7f3;
  --color-melting-glacier-50: #e3f7f3;
  --color-melting-glacier-100: #dfece9;
  --color-melting-glacier-200: #cad9d6;
  --color-melting-glacier-300: #b3c4c0;
  --color-melting-glacier-400: #93a5a1;
  --color-melting-glacier-500: #788a87;
  --color-melting-glacier-600: #5f706d;
  --color-melting-glacier-700: #495956;
  --color-melting-glacier-800: #384643;
  --color-melting-glacier-900: #2a3633;
  --color-melting-glacier-950: #192120;
}

Similar palettes