Blackout to Eat Your Greens Color Palette

About this palette

Blackout to Eat Your Greens is a 5-color dark, earthy, gradient palette: #0D0900 (Blackout), #002B2C (Black Box), #2D2F00 (Wasabi Nori), #3C5336 (Highlander), #676440 (Eat Your Greens). It mixes black, turquoise, green, brown tones and feels balanced overall. The strongest text pairing is #0D0900 on #676440 with a contrast ratio of 3.29:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(13, 9, 0)	hsl(42, 100%, 3%)
Black Box	rgb(0, 43, 44)	hsl(181, 100%, 9%)
Wasabi Nori	rgb(45, 47, 0)	hsl(63, 100%, 9%)
Highlander	rgb(60, 83, 54)	hsl(108, 21%, 27%)
Eat Your Greens	rgb(103, 100, 64)	hsl(55, 23%, 33%)

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.29:1 Poor#0D0900 on #676440
Aa3.29:1 Poor#676440 on #0D0900

Color blindness preview

CSS variables

/* Blackout to Eat Your Greens — https://swatchly.xyz/palette/0d0900-002b2c-2d2f00-3c5336-676440 */
:root {
  --blackout: #0d0900;
  --black-box: #002b2c;
  --wasabi-nori: #2d2f00;
  --highlander: #3c5336;
  --eat-your-greens: #676440;
}

Tailwind CSS v4

/* Blackout to Eat Your Greens — https://swatchly.xyz/palette/0d0900-002b2c-2d2f00-3c5336-676440 */
@theme {
  --color-blackout: #0d0900;
  --color-blackout-50: #f8f5e9;
  --color-blackout-100: #efebde;
  --color-blackout-200: #dcd8c8;
  --color-blackout-300: #c6c1af;
  --color-blackout-400: #a7a28e;
  --color-blackout-500: #86816e;
  --color-blackout-600: #676351;
  --color-blackout-700: #4c4839;
  --color-blackout-800: #353125;
  --color-blackout-900: #211f16;
  --color-blackout-950: #0d0900;
  --color-black-box: #002b2c;
  --color-black-box-50: #e3fbfb;
  --color-black-box-100: #d7f1f1;
  --color-black-box-200: #bfdfdf;
  --color-black-box-300: #a5c9c9;
  --color-black-box-400: #83aaab;
  --color-black-box-500: #679091;
  --color-black-box-600: #4f7677;
  --color-black-box-700: #3b6060;
  --color-black-box-800: #2c4d4d;
  --color-black-box-900: #213d3e;
  --color-black-box-950: #002b2c;
  --color-wasabi-nori: #2d2f00;
  --color-wasabi-nori-50: #f5f8dd;
  --color-wasabi-nori-100: #ebeed0;
  --color-wasabi-nori-200: #d7dbb7;
  --color-wasabi-nori-300: #c1c59c;
  --color-wasabi-nori-400: #a0a577;
  --color-wasabi-nori-500: #84885a;
  --color-wasabi-nori-600: #686c40;
  --color-wasabi-nori-700: #51542c;
  --color-wasabi-nori-800: #3d3f1d;
  --color-wasabi-nori-900: #2d2f00;
  --color-wasabi-nori-950: #1a1c08;
  --color-highlander: #3c5336;
  --color-highlander-50: #ebfae7;
  --color-highlander-100: #e0f1dc;
  --color-highlander-200: #cadec5;
  --color-highlander-300: #b4cbae;
  --color-highlander-400: #95ad8e;
  --color-highlander-500: #7b9474;
  --color-highlander-600: #627b5c;
  --color-highlander-700: #4e6548;
  --color-highlander-800: #3c5336;
  --color-highlander-900: #2e402a;
  --color-highlander-950: #1c2919;
  --color-eat-your-greens: #676440;
  --color-eat-your-greens-50: #f8f7e0;
  --color-eat-your-greens-100: #edebd2;
  --color-eat-your-greens-200: #d8d6b8;
  --color-eat-your-greens-300: #c0be9b;
  --color-eat-your-greens-400: #9f9d78;
  --color-eat-your-greens-500: #83805b;
  --color-eat-your-greens-600: #676440;
  --color-eat-your-greens-700: #524f30;
  --color-eat-your-greens-800: #403e23;
  --color-eat-your-greens-900: #323019;
  --color-eat-your-greens-950: #1f1d0d;
}