Start generating

Blackout to Secret Passage color palette

0C0900Blackout444300Green Not Found8C551CPrecious Copper31130AShadow Play472E00Secret Passage
Open in generator Export PNG, PDF, ASE…

About this palette

Blackout to Secret Passage is a 5-color dark, warm, earthy palette: #0C0900 (Blackout), #444300 (Green Not Found), #8C551C (Precious Copper), #31130A (Shadow Play), #472E00 (Secret Passage). It mixes black, brown tones and feels warm overall. The strongest text pairing is #0C0900 on #8C551C with a contrast ratio of 3.25:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Blackoutrgb(12, 9, 0)hsl(45, 100%, 2%)
Green Not Foundrgb(68, 67, 0)hsl(59, 100%, 13%)
Precious Copperrgb(140, 85, 28)hsl(31, 67%, 33%)
Shadow Playrgb(49, 19, 10)hsl(14, 66%, 12%)
Secret Passagergb(71, 46, 0)hsl(39, 100%, 14%)

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.25:1 Poor#0C0900 on #8C551C
  • Aa3.25:1 Poor#8C551C on #0C0900

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Blackout to Secret Passage — https://swatchly.xyz/palette/0c0900-444300-8c551c-31130a-472e00 */
:root {
  --blackout: #0c0900;
  --green-not-found: #444300;
  --precious-copper: #8c551c;
  --shadow-play: #31130a;
  --secret-passage: #472e00;
}

Tailwind CSS v4

/* Blackout to Secret Passage — https://swatchly.xyz/palette/0c0900-444300-8c551c-31130a-472e00 */
@theme {
  --color-blackout: #0c0900;
  --color-blackout-50: #f8f6ea;
  --color-blackout-100: #eeecde;
  --color-blackout-200: #dbd8c8;
  --color-blackout-300: #c5c1b0;
  --color-blackout-400: #a6a28f;
  --color-blackout-500: #85826e;
  --color-blackout-600: #666351;
  --color-blackout-700: #4b4839;
  --color-blackout-800: #343125;
  --color-blackout-900: #201f16;
  --color-blackout-950: #0c0900;
  --color-green-not-found: #444300;
  --color-green-not-found-50: #f7f8d6;
  --color-green-not-found-100: #edeec8;
  --color-green-not-found-200: #dadbae;
  --color-green-not-found-300: #c4c591;
  --color-green-not-found-400: #a4a56c;
  --color-green-not-found-500: #89894e;
  --color-green-not-found-600: #6e6e35;
  --color-green-not-found-700: #575621;
  --color-green-not-found-800: #444300;
  --color-green-not-found-900: #34330a;
  --color-green-not-found-950: #201f04;
  --color-precious-copper: #8c551c;
  --color-precious-copper-50: #fff3e8;
  --color-precious-copper-100: #ffe4ce;
  --color-precious-copper-200: #facaa1;
  --color-precious-copper-300: #e6b081;
  --color-precious-copper-400: #c78e5a;
  --color-precious-copper-500: #aa713b;
  --color-precious-copper-600: #8c551c;
  --color-precious-copper-700: #71420d;
  --color-precious-copper-800: #5b3202;
  --color-precious-copper-900: #482600;
  --color-precious-copper-950: #2e1600;
  --color-shadow-play: #31130a;
  --color-shadow-play-50: #fff2ee;
  --color-shadow-play-100: #ffe5dd;
  --color-shadow-play-200: #efcfc6;
  --color-shadow-play-300: #dcb8ad;
  --color-shadow-play-400: #be978c;
  --color-shadow-play-500: #a27b70;
  --color-shadow-play-600: #856156;
  --color-shadow-play-700: #6c4b41;
  --color-shadow-play-800: #553930;
  --color-shadow-play-900: #422a23;
  --color-shadow-play-950: #31130a;
  --color-secret-passage: #472e00;
  --color-secret-passage-50: #fff3e3;
  --color-secret-passage-100: #fce8cd;
  --color-secret-passage-200: #ebd4b3;
  --color-secret-passage-300: #d7bd98;
  --color-secret-passage-400: #b99d74;
  --color-secret-passage-500: #9e8157;
  --color-secret-passage-600: #82673f;
  --color-secret-passage-700: #6a512c;
  --color-secret-passage-800: #543f1d;
  --color-secret-passage-900: #472e00;
  --color-secret-passage-950: #2a1d08;
}

Similar palettes