Blackout to Enchanted Glen Color Palette

About this palette

Blackout to Enchanted Glen is a 5-color dark, cool, earthy, gradient palette: #110900 (Blackout), #002D25 (Pitch-Black Forests), #1E4225 (Myrtle), #5F4E00 (Ayahuasca Vine), #156A30 (Enchanted Glen). It mixes black, turquoise, green, brown tones and feels cool overall. The strongest text pairing is #110900 on #156A30 with a contrast ratio of 2.95:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(17, 9, 0)	hsl(32, 100%, 3%)
Pitch-Black Forests	rgb(0, 45, 37)	hsl(169, 100%, 9%)
Myrtle	rgb(30, 66, 37)	hsl(132, 38%, 19%)
Ayahuasca Vine	rgb(95, 78, 0)	hsl(49, 100%, 19%)
Enchanted Glen	rgb(21, 106, 48)	hsl(139, 67%, 25%)

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.

Color blindness preview

CSS variables

/* Blackout to Enchanted Glen — https://swatchly.xyz/palette/110900-002d25-1e4225-5f4e00-156a30 */
:root {
  --blackout: #110900;
  --pitch-black-forests: #002d25;
  --myrtle: #1e4225;
  --ayahuasca-vine: #5f4e00;
  --enchanted-glen: #156a30;
}

Tailwind CSS v4

/* Blackout to Enchanted Glen — https://swatchly.xyz/palette/110900-002d25-1e4225-5f4e00-156a30 */
@theme {
  --color-blackout: #110900;
  --color-blackout-50: #fbf4e9;
  --color-blackout-100: #f2eadd;
  --color-blackout-200: #dfd6c7;
  --color-blackout-300: #cac0af;
  --color-blackout-400: #aba08d;
  --color-blackout-500: #8b806d;
  --color-blackout-600: #6c6250;
  --color-blackout-700: #504739;
  --color-blackout-800: #383125;
  --color-blackout-900: #241f16;
  --color-blackout-950: #110900;
  --color-pitch-black-forests: #002d25;
  --color-pitch-black-forests-50: #e3fcf5;
  --color-pitch-black-forests-100: #d7f2eb;
  --color-pitch-black-forests-200: #bfe0d7;
  --color-pitch-black-forests-300: #a5cac0;
  --color-pitch-black-forests-400: #82aca1;
  --color-pitch-black-forests-500: #679287;
  --color-pitch-black-forests-600: #4f786e;
  --color-pitch-black-forests-700: #3b6258;
  --color-pitch-black-forests-800: #2c4f47;
  --color-pitch-black-forests-900: #213f38;
  --color-pitch-black-forests-950: #002d25;
  --color-myrtle: #1e4225;
  --color-myrtle-50: #e6fce8;
  --color-myrtle-100: #daf3dd;
  --color-myrtle-200: #c3e1c6;
  --color-myrtle-300: #a9cbad;
  --color-myrtle-400: #88ae8d;
  --color-myrtle-500: #6d9473;
  --color-myrtle-600: #557a5a;
  --color-myrtle-700: #416346;
  --color-myrtle-800: #315036;
  --color-myrtle-900: #1e4225;
  --color-myrtle-950: #152919;
  --color-ayahuasca-vine: #5f4e00;
  --color-ayahuasca-vine-50: #fff5d2;
  --color-ayahuasca-vine-100: #f7ebc3;
  --color-ayahuasca-vine-200: #e4d6a5;
  --color-ayahuasca-vine-300: #cebf86;
  --color-ayahuasca-vine-400: #af9e5f;
  --color-ayahuasca-vine-500: #938140;
  --color-ayahuasca-vine-600: #776625;
  --color-ayahuasca-vine-700: #5f4e00;
  --color-ayahuasca-vine-800: #4a3d04;
  --color-ayahuasca-vine-900: #392e00;
  --color-ayahuasca-vine-950: #241c00;
  --color-enchanted-glen: #156a30;
  --color-enchanted-glen-50: #dfffe4;
  --color-enchanted-glen-100: #cafad1;
  --color-enchanted-glen-200: #b0e9b9;
  --color-enchanted-glen-300: #93d59e;
  --color-enchanted-glen-400: #6db77b;
  --color-enchanted-glen-500: #4e9c5f;
  --color-enchanted-glen-600: #338146;
  --color-enchanted-glen-700: #156a30;
  --color-enchanted-glen-800: #0d5324;
  --color-enchanted-glen-900: #024118;
  --color-enchanted-glen-950: #00290c;
}