Blackout to Coffee Adept Color Palette

About this palette

Blackout to Coffee Adept is a 5-color dark, gradient palette: #0D0600 (Blackout), #0F2213 (Nightmare), #003D31 (Botanical Night), #394A3C (Mountain View), #795904 (Coffee Adept). It mixes black, green, turquoise, gray, brown tones and feels cool overall. The strongest text pairing is #0D0600 on #795904 with a contrast ratio of 3.11:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(13, 6, 0)	hsl(28, 100%, 3%)
Nightmare	rgb(15, 34, 19)	hsl(133, 39%, 10%)
Botanical Night	rgb(0, 61, 49)	hsl(168, 100%, 12%)
Mountain View	rgb(57, 74, 60)	hsl(131, 13%, 26%)
Coffee Adept	rgb(121, 89, 4)	hsl(44, 94%, 25%)

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.11:1 Poor#0D0600 on #795904
Aa3.11:1 Poor#795904 on #0D0600

Color blindness preview

CSS variables

/* Blackout to Coffee Adept — https://swatchly.xyz/palette/0d0600-0f2213-003d31-394a3c-795904 */
:root {
  --blackout: #0d0600;
  --nightmare: #0f2213;
  --botanical-night: #003d31;
  --mountain-view: #394a3c;
  --coffee-adept: #795904;
}

Tailwind CSS v4

/* Blackout to Coffee Adept — https://swatchly.xyz/palette/0d0600-0f2213-003d31-394a3c-795904 */
@theme {
  --color-blackout: #0d0600;
  --color-blackout-50: #fbf4ea;
  --color-blackout-100: #f1eadf;
  --color-blackout-200: #dfd6c9;
  --color-blackout-300: #c9bfb1;
  --color-blackout-400: #aba090;
  --color-blackout-500: #8a7f6f;
  --color-blackout-600: #6a6051;
  --color-blackout-700: #4d4538;
  --color-blackout-800: #352e25;
  --color-blackout-900: #201c15;
  --color-blackout-950: #0d0600;
  --color-nightmare: #0f2213;
  --color-nightmare-50: #ecf9ee;
  --color-nightmare-100: #e1f0e3;
  --color-nightmare-200: #cbddce;
  --color-nightmare-300: #b3c7b6;
  --color-nightmare-400: #92a895;
  --color-nightmare-500: #768c79;
  --color-nightmare-600: #5c715f;
  --color-nightmare-700: #465a4a;
  --color-nightmare-800: #354638;
  --color-nightmare-900: #273529;
  --color-nightmare-950: #0f2213;
  --color-botanical-night: #003d31;
  --color-botanical-night-50: #dffdf4;
  --color-botanical-night-100: #d2f4e9;
  --color-botanical-night-200: #bae2d5;
  --color-botanical-night-300: #9fccbf;
  --color-botanical-night-400: #7bae9f;
  --color-botanical-night-500: #5e9384;
  --color-botanical-night-600: #44786a;
  --color-botanical-night-700: #306053;
  --color-botanical-night-800: #214c41;
  --color-botanical-night-900: #003d31;
  --color-botanical-night-950: #0a251e;
  --color-mountain-view: #394a3c;
  --color-mountain-view-50: #edf9ef;
  --color-mountain-view-100: #e2efe4;
  --color-mountain-view-200: #cddccf;
  --color-mountain-view-300: #b6c7b8;
  --color-mountain-view-400: #96a899;
  --color-mountain-view-500: #7b8d7e;
  --color-mountain-view-600: #617364;
  --color-mountain-view-700: #4c5c4f;
  --color-mountain-view-800: #394a3c;
  --color-mountain-view-900: #2c392e;
  --color-mountain-view-950: #1b231c;
  --color-coffee-adept: #795904;
  --color-coffee-adept-50: #fff4df;
  --color-coffee-adept-100: #ffe9be;
  --color-coffee-adept-200: #f0d6a4;
  --color-coffee-adept-300: #dec187;
  --color-coffee-adept-400: #c3a260;
  --color-coffee-adept-500: #a98842;
  --color-coffee-adept-600: #8f6f26;
  --color-coffee-adept-700: #795904;
  --color-coffee-adept-800: #604500;
  --color-coffee-adept-900: #4a3500;
  --color-coffee-adept-950: #2f2100;
}