Start generating

Twilight Zone to Money color palette

1A1712Twilight Zone334358Pi6C5877PlummyD8E4FBVeiling WaterfallsB9A4BENovel Lilac789878Money
Open in generator Export PNG, PDF, ASE…

About this palette

Twilight Zone to Money is a 6-color muted, cool palette: #1A1712 (Twilight Zone), #334358 (Pi), #6C5877 (Plummy), #D8E4FB (Veiling Waterfalls), #B9A4BE (Novel Lilac), #789878 (Money). It mixes black, blue, purple, gray, green tones and feels cool overall. The strongest text pairing is #1A1712 on #D8E4FB with a contrast ratio of 13.96:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Twilight Zonergb(26, 23, 18)hsl(38, 18%, 9%)
Pirgb(51, 67, 88)hsl(214, 27%, 27%)
Plummyrgb(108, 88, 119)hsl(279, 15%, 41%)
Veiling Waterfallsrgb(216, 228, 251)hsl(219, 81%, 92%)
Novel Lilacrgb(185, 164, 190)hsl(288, 17%, 69%)
Moneyrgb(120, 152, 120)hsl(120, 13%, 53%)

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.

  • Aa13.96:1 Super#1A1712 on #D8E4FB
  • Aa13.96:1 Super#D8E4FB on #1A1712
  • Aa7.87:1 Very good#334358 on #D8E4FB
  • Aa7.87:1 Very good#D8E4FB on #334358
  • Aa7.76:1 Very good#1A1712 on #B9A4BE
  • Aa7.76:1 Very good#B9A4BE on #1A1712
  • Aa5.58:1 Good#1A1712 on #789878
  • Aa5.58:1 Good#789878 on #1A1712

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Twilight Zone to Money — https://swatchly.xyz/palette/1a1712-334358-6c5877-d8e4fb-b9a4be-789878 */
:root {
  --twilight-zone: #1a1712;
  --pi: #334358;
  --plummy: #6c5877;
  --veiling-waterfalls: #d8e4fb;
  --novel-lilac: #b9a4be;
  --money: #789878;
}

Tailwind CSS v4

/* Twilight Zone to Money — https://swatchly.xyz/palette/1a1712-334358-6c5877-d8e4fb-b9a4be-789878 */
@theme {
  --color-twilight-zone: #1a1712;
  --color-twilight-zone-50: #f7f5f1;
  --color-twilight-zone-100: #edebe6;
  --color-twilight-zone-200: #dad7d2;
  --color-twilight-zone-300: #c4c0ba;
  --color-twilight-zone-400: #a5a19a;
  --color-twilight-zone-500: #88847d;
  --color-twilight-zone-600: #6c6862;
  --color-twilight-zone-700: #53504b;
  --color-twilight-zone-800: #3f3c37;
  --color-twilight-zone-900: #2e2b28;
  --color-twilight-zone-950: #1a1712;
  --color-pi: #334358;
  --color-pi-50: #eff6ff;
  --color-pi-100: #e0ecfd;
  --color-pi-200: #cad9ec;
  --color-pi-300: #b2c2d8;
  --color-pi-400: #91a3bb;
  --color-pi-500: #76879f;
  --color-pi-600: #5c6d83;
  --color-pi-700: #47566a;
  --color-pi-800: #334358;
  --color-pi-900: #283342;
  --color-pi-950: #17202a;
  --color-plummy: #6c5877;
  --color-plummy-50: #faf1ff;
  --color-plummy-100: #f1e3fa;
  --color-plummy-200: #ddcce7;
  --color-plummy-300: #c6b2d1;
  --color-plummy-400: #a591b1;
  --color-plummy-500: #887494;
  --color-plummy-600: #6c5877;
  --color-plummy-700: #56455f;
  --color-plummy-800: #44354c;
  --color-plummy-900: #35283c;
  --color-plummy-950: #211826;
  --color-veiling-waterfalls: #d8e4fb;
  --color-veiling-waterfalls-50: #e8effd;
  --color-veiling-waterfalls-100: #d8e4fb;
  --color-veiling-waterfalls-200: #c8d2e3;
  --color-veiling-waterfalls-300: #b2bcd0;
  --color-veiling-waterfalls-400: #939eb3;
  --color-veiling-waterfalls-500: #798499;
  --color-veiling-waterfalls-600: #616b7f;
  --color-veiling-waterfalls-700: #4c5567;
  --color-veiling-waterfalls-800: #3b4252;
  --color-veiling-waterfalls-900: #2c3340;
  --color-veiling-waterfalls-950: #1a1f29;
  --color-novel-lilac: #b9a4be;
  --color-novel-lilac-50: #fdf6ff;
  --color-novel-lilac-100: #f9ecfc;
  --color-novel-lilac-200: #e8d9ec;
  --color-novel-lilac-300: #d5c3d9;
  --color-novel-lilac-400: #b9a4be;
  --color-novel-lilac-500: #9b87a0;
  --color-novel-lilac-600: #7e6b83;
  --color-novel-lilac-700: #655369;
  --color-novel-lilac-800: #4e3f52;
  --color-novel-lilac-900: #3c2f3f;
  --color-novel-lilac-950: #251b27;
  --color-money: #789878;
  --color-money-50: #eafdea;
  --color-money-100: #e0f5e0;
  --color-money-200: #cbe4cb;
  --color-money-300: #b4cfb3;
  --color-money-400: #93b293;
  --color-money-500: #789878;
  --color-money-600: #5d7c5d;
  --color-money-700: #466347;
  --color-money-800: #344d35;
  --color-money-900: #263b27;
  --color-money-950: #162516;
}

Similar palettes