Blackout to Jewel Color Palette

About this palette

Blackout to Jewel is a 4-color dark, cool, earthy, gradient palette: #0A0800 (Blackout), #002C18 (Haunted Forest), #3F4615 (Alligator Gladiator), #006843 (Jewel). It mixes black, green tones and feels cool overall. The strongest text pairing is #0A0800 on #006843 with a contrast ratio of 2.92:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(10, 8, 0)	hsl(48, 100%, 2%)
Haunted Forest	rgb(0, 44, 24)	hsl(153, 100%, 9%)
Alligator Gladiator	rgb(63, 70, 21)	hsl(69, 54%, 18%)
Jewel	rgb(0, 104, 67)	hsl(159, 100%, 20%)

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 Jewel — https://swatchly.xyz/palette/0a0800-002c18-3f4615-006843 */
:root {
  --blackout: #0a0800;
  --haunted-forest: #002c18;
  --alligator-gladiator: #3f4615;
  --jewel: #006843;
}

Tailwind CSS v4

/* Blackout to Jewel — https://swatchly.xyz/palette/0a0800-002c18-3f4615-006843 */
@theme {
  --color-blackout: #0a0800;
  --color-blackout-50: #f7f6ea;
  --color-blackout-100: #edecdf;
  --color-blackout-200: #dad8c9;
  --color-blackout-300: #c4c2b0;
  --color-blackout-400: #a5a290;
  --color-blackout-500: #84826f;
  --color-blackout-600: #646251;
  --color-blackout-700: #494739;
  --color-blackout-800: #323025;
  --color-blackout-900: #1e1d15;
  --color-blackout-950: #0a0800;
  --color-haunted-forest: #002c18;
  --color-haunted-forest-50: #e4fced;
  --color-haunted-forest-100: #d7f3e2;
  --color-haunted-forest-200: #c0e1cc;
  --color-haunted-forest-300: #a6ccb4;
  --color-haunted-forest-400: #83ad94;
  --color-haunted-forest-500: #689279;
  --color-haunted-forest-600: #4f7860;
  --color-haunted-forest-700: #3c624c;
  --color-haunted-forest-800: #2c4e3b;
  --color-haunted-forest-900: #213e2e;
  --color-haunted-forest-950: #002c18;
  --color-alligator-gladiator: #3f4615;
  --color-alligator-gladiator-50: #f3f9dc;
  --color-alligator-gladiator-100: #e9f0cf;
  --color-alligator-gladiator-200: #d5ddb6;
  --color-alligator-gladiator-300: #bec69a;
  --color-alligator-gladiator-400: #9ea776;
  --color-alligator-gladiator-500: #828b5a;
  --color-alligator-gladiator-600: #687041;
  --color-alligator-gladiator-700: #52592d;
  --color-alligator-gladiator-800: #3f4615;
  --color-alligator-gladiator-900: #303515;
  --color-alligator-gladiator-950: #1d2109;
  --color-jewel: #006843;
  --color-jewel-50: #dcffeb;
  --color-jewel-100: #c7f9dd;
  --color-jewel-200: #ace8c7;
  --color-jewel-300: #8ed4af;
  --color-jewel-400: #67b68e;
  --color-jewel-500: #479a72;
  --color-jewel-600: #2a7f59;
  --color-jewel-700: #006843;
  --color-jewel-800: #005234;
  --color-jewel-900: #003f27;
  --color-jewel-950: #002817;
}