Blackn’t to Enchanted Glen Color Palette

About this palette

Blackn’t to Enchanted Glen is a 5-color dark, cool, gradient palette: #000C08 (Blackn’t), #002C30 (Black Box), #003D3D (Rich Black), #224F35 (Moor-Monster), #2D6C2D (Enchanted Glen). It mixes black, turquoise, green tones and feels cool overall. The strongest text pairing is #000C08 on #2D6C2D with a contrast ratio of 3.12:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 12, 8)	hsl(160, 100%, 2%)
Black Box	rgb(0, 44, 48)	hsl(185, 100%, 9%)
Rich Black	rgb(0, 61, 61)	hsl(180, 100%, 12%)
Moor-Monster	rgb(34, 79, 53)	hsl(145, 40%, 22%)
Enchanted Glen	rgb(45, 108, 45)	hsl(120, 41%, 30%)

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.

Aa3.12:1 Poor#000C08 on #2D6C2D
Aa3.12:1 Poor#2D6C2D on #000C08

Color blindness preview

CSS variables

/* Blackn’t to Enchanted Glen — https://swatchly.xyz/palette/000c08-002c30-003d3d-224f35-2d6c2d */
:root {
  --blackn-t: #000c08;
  --black-box: #002c30;
  --rich-black: #003d3d;
  --moor-monster: #224f35;
  --enchanted-glen: #2d6c2d;
}

Tailwind CSS v4

/* Blackn’t to Enchanted Glen — https://swatchly.xyz/palette/000c08-002c30-003d3d-224f35-2d6c2d */
@theme {
  --color-blackn-t: #000c08;
  --color-blackn-t-50: #ecf8f4;
  --color-blackn-t-100: #e1efea;
  --color-blackn-t-200: #cbdcd6;
  --color-blackn-t-300: #b3c6c0;
  --color-blackn-t-400: #92a7a0;
  --color-blackn-t-500: #728680;
  --color-blackn-t-600: #546761;
  --color-blackn-t-700: #3b4c46;
  --color-blackn-t-800: #273430;
  --color-blackn-t-900: #17201e;
  --color-blackn-t-950: #000c08;
  --color-black-box: #002c30;
  --color-black-box-50: #e3fafd;
  --color-black-box-100: #d6f1f4;
  --color-black-box-200: #bfdee2;
  --color-black-box-300: #a5c9cd;
  --color-black-box-400: #82aaae;
  --color-black-box-500: #679094;
  --color-black-box-600: #4e767b;
  --color-black-box-700: #3b6064;
  --color-black-box-800: #2c4e51;
  --color-black-box-900: #213e41;
  --color-black-box-950: #002c30;
  --color-rich-black: #003d3d;
  --color-rich-black-50: #dffcfb;
  --color-rich-black-100: #d2f3f2;
  --color-rich-black-200: #b9e1e0;
  --color-rich-black-300: #9ecbca;
  --color-rich-black-400: #7aadac;
  --color-rich-black-500: #5e9291;
  --color-rich-black-600: #447776;
  --color-rich-black-700: #30605f;
  --color-rich-black-800: #214c4b;
  --color-rich-black-900: #003d3d;
  --color-rich-black-950: #0a2525;
  --color-moor-monster: #224f35;
  --color-moor-monster-50: #e2fdeb;
  --color-moor-monster-100: #d6f4e0;
  --color-moor-monster-200: #bee2ca;
  --color-moor-monster-300: #a4cdb2;
  --color-moor-monster-400: #82af92;
  --color-moor-monster-500: #669476;
  --color-moor-monster-600: #4c795d;
  --color-moor-monster-700: #386248;
  --color-moor-monster-800: #224f35;
  --color-moor-monster-900: #1d3c29;
  --color-moor-monster-950: #0f2618;
  --color-enchanted-glen: #2d6c2d;
  --color-enchanted-glen-50: #e1ffdf;
  --color-enchanted-glen-100: #d0f8cd;
  --color-enchanted-glen-200: #b8e8b5;
  --color-enchanted-glen-300: #9ed49b;
  --color-enchanted-glen-400: #7ab778;
  --color-enchanted-glen-500: #5e9d5c;
  --color-enchanted-glen-600: #448243;
  --color-enchanted-glen-700: #2d6c2d;
  --color-enchanted-glen-800: #205520;
  --color-enchanted-glen-900: #144215;
  --color-enchanted-glen-950: #082a09;
}