Blackn’t to Coffee Adept Color Palette

About this palette

Blackn’t to Coffee Adept is a 5-color dark, earthy, gradient palette: #0A0C00 (Blackn’t), #17220D (Midnight Pines), #273100 (Darkest Forest), #554B23 (Jungle King), #705800 (Coffee Adept). It mixes black, green, brown tones and feels balanced overall. The strongest text pairing is #0A0C00 on #705800 with a contrast ratio of 2.90:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(10, 12, 0)	hsl(70, 100%, 2%)
Midnight Pines	rgb(23, 34, 13)	hsl(91, 45%, 9%)
Darkest Forest	rgb(39, 49, 0)	hsl(72, 100%, 10%)
Jungle King	rgb(85, 75, 35)	hsl(48, 42%, 24%)
Coffee Adept	rgb(112, 88, 0)	hsl(47, 100%, 22%)

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

/* Blackn’t to Coffee Adept — https://swatchly.xyz/palette/0a0c00-17220d-273100-554b23-705800 */
:root {
  --blackn-t: #0a0c00;
  --midnight-pines: #17220d;
  --darkest-forest: #273100;
  --jungle-king: #554b23;
  --coffee-adept: #705800;
}

Tailwind CSS v4

/* Blackn’t to Coffee Adept — https://swatchly.xyz/palette/0a0c00-17220d-273100-554b23-705800 */
@theme {
  --color-blackn-t: #0a0c00;
  --color-blackn-t-50: #f4f7e9;
  --color-blackn-t-100: #eaedde;
  --color-blackn-t-200: #d6dac8;
  --color-blackn-t-300: #c0c3af;
  --color-blackn-t-400: #a0a48e;
  --color-blackn-t-500: #80846e;
  --color-blackn-t-600: #626551;
  --color-blackn-t-700: #484b39;
  --color-blackn-t-800: #323426;
  --color-blackn-t-900: #1f2117;
  --color-blackn-t-950: #0a0c00;
  --color-midnight-pines: #17220d;
  --color-midnight-pines-50: #f0f9e9;
  --color-midnight-pines-100: #e5efde;
  --color-midnight-pines-200: #d0dcc8;
  --color-midnight-pines-300: #b9c6af;
  --color-midnight-pines-400: #99a78e;
  --color-midnight-pines-500: #7d8b72;
  --color-midnight-pines-600: #637059;
  --color-midnight-pines-700: #4d5944;
  --color-midnight-pines-800: #3b4533;
  --color-midnight-pines-900: #2c3525;
  --color-midnight-pines-950: #17220d;
  --color-darkest-forest: #273100;
  --color-darkest-forest-50: #f1fadd;
  --color-darkest-forest-100: #e6f0d0;
  --color-darkest-forest-200: #d2ddb7;
  --color-darkest-forest-300: #bbc79c;
  --color-darkest-forest-400: #99a777;
  --color-darkest-forest-500: #7d8a5a;
  --color-darkest-forest-600: #626e40;
  --color-darkest-forest-700: #4b562c;
  --color-darkest-forest-800: #38411d;
  --color-darkest-forest-900: #273100;
  --color-darkest-forest-950: #171d08;
  --color-jungle-king: #554b23;
  --color-jungle-king-50: #fcf6dd;
  --color-jungle-king-100: #f2ecd0;
  --color-jungle-king-200: #e0d8b8;
  --color-jungle-king-300: #ccc39f;
  --color-jungle-king-400: #afa57d;
  --color-jungle-king-500: #968b62;
  --color-jungle-king-600: #7d724a;
  --color-jungle-king-700: #675d37;
  --color-jungle-king-800: #554b23;
  --color-jungle-king-900: #413a1c;
  --color-jungle-king-950: #2a240e;
  --color-coffee-adept: #705800;
  --color-coffee-adept-50: #fff5d8;
  --color-coffee-adept-100: #faeabe;
  --color-coffee-adept-200: #ebd7a3;
  --color-coffee-adept-300: #d7c286;
  --color-coffee-adept-400: #bba35f;
  --color-coffee-adept-500: #a18840;
  --color-coffee-adept-600: #866e24;
  --color-coffee-adept-700: #705800;
  --color-coffee-adept-800: #584400;
  --color-coffee-adept-900: #443400;
  --color-coffee-adept-950: #2b2000;
}