Blackn’t to Autumn Gold Color Palette

About this palette

Blackn’t to Autumn Gold is a 4-color dark, cool, gradient palette: #000E04 (Blackn’t), #002822 (Swamp Thing), #004731 (Zucchini), #7A5E3D (Autumn Gold). It mixes black, turquoise, green, brown tones and feels cool overall. The strongest text pairing is #000E04 on #7A5E3D with a contrast ratio of 3.28:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 14, 4)	hsl(137, 100%, 3%)
Swamp Thing	rgb(0, 40, 34)	hsl(171, 100%, 8%)
Zucchini	rgb(0, 71, 49)	hsl(161, 100%, 14%)
Autumn Gold	rgb(122, 94, 61)	hsl(32, 33%, 36%)

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.28:1 Poor#000E04 on #7A5E3D
Aa3.28:1 Poor#7A5E3D on #000E04

Color blindness preview

CSS variables

/* Blackn’t to Autumn Gold — https://swatchly.xyz/palette/000e04-002822-004731-7a5e3d */
:root {
  --blackn-t: #000e04;
  --swamp-thing: #002822;
  --zucchini: #004731;
  --autumn-gold: #7a5e3d;
}

Tailwind CSS v4

/* Blackn’t to Autumn Gold — https://swatchly.xyz/palette/000e04-002822-004731-7a5e3d */
@theme {
  --color-blackn-t: #000e04;
  --color-blackn-t-50: #ebf9ef;
  --color-blackn-t-100: #e0f0e4;
  --color-blackn-t-200: #cbddd0;
  --color-blackn-t-300: #b2c7b8;
  --color-blackn-t-400: #91a898;
  --color-blackn-t-500: #718878;
  --color-blackn-t-600: #54695a;
  --color-blackn-t-700: #3b4d40;
  --color-blackn-t-800: #27362c;
  --color-blackn-t-900: #18221b;
  --color-blackn-t-950: #000e04;
  --color-swamp-thing: #002822;
  --color-swamp-thing-50: #e4fbf6;
  --color-swamp-thing-100: #d8f2ec;
  --color-swamp-thing-200: #c1dfd8;
  --color-swamp-thing-300: #a7c9c2;
  --color-swamp-thing-400: #85aba2;
  --color-swamp-thing-500: #699088;
  --color-swamp-thing-600: #50756e;
  --color-swamp-thing-700: #3c5e57;
  --color-swamp-thing-800: #2c4b45;
  --color-swamp-thing-900: #203a35;
  --color-swamp-thing-950: #002822;
  --color-zucchini: #004731;
  --color-zucchini-50: #ddfeee;
  --color-zucchini-100: #d0f6e3;
  --color-zucchini-200: #b7e4ce;
  --color-zucchini-300: #99cdb5;
  --color-zucchini-400: #73ad93;
  --color-zucchini-500: #559077;
  --color-zucchini-600: #3a745c;
  --color-zucchini-700: #265b46;
  --color-zucchini-800: #004731;
  --color-zucchini-900: #0e3526;
  --color-zucchini-950: #062116;
  --color-autumn-gold: #7a5e3d;
  --color-autumn-gold-50: #fff3e6;
  --color-autumn-gold-100: #fae6cf;
  --color-autumn-gold-200: #e8d0b5;
  --color-autumn-gold-300: #d3b798;
  --color-autumn-gold-400: #b39674;
  --color-autumn-gold-500: #977958;
  --color-autumn-gold-600: #7a5e3d;
  --color-autumn-gold-700: #624a2d;
  --color-autumn-gold-800: #4e3920;
  --color-autumn-gold-900: #3d2b16;
  --color-autumn-gold-950: #271a0b;
}