Blackn’t to Nocturne Red color palette

060A00Blackn’t 181D00Midnight Pines 361F21Aubergine 6A2930Arcane Red 2F5400Deep Forestial Escapade 7B4551Nocturne Red

Open in generator Export PNG, PDF, ASE…

About this palette

Blackn’t to Nocturne Red is a 6-color dark, earthy palette: #060A00 (Blackn’t), #181D00 (Midnight Pines), #361F21 (Aubergine), #6A2930 (Arcane Red), #2F5400 (Deep Forestial Escapade), #7B4551 (Nocturne Red). It mixes black, green, brown, red tones and feels warm overall. The strongest text pairing is #060A00 on #7B4551 with a contrast ratio of 2.68:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(6, 10, 0)	hsl(84, 100%, 2%)
Midnight Pines	rgb(24, 29, 0)	hsl(70, 100%, 6%)
Aubergine	rgb(54, 31, 33)	hsl(355, 27%, 17%)
Arcane Red	rgb(106, 41, 48)	hsl(354, 44%, 29%)
Deep Forestial Escapade	rgb(47, 84, 0)	hsl(86, 100%, 16%)
Nocturne Red	rgb(123, 69, 81)	hsl(347, 28%, 38%)

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 Nocturne Red — https://swatchly.xyz/palette/060a00-181d00-361f21-6a2930-2f5400-7b4551 */
:root {
  --blackn-t: #060a00;
  --midnight-pines: #181d00;
  --aubergine: #361f21;
  --arcane-red: #6a2930;
  --deep-forestial-escapade: #2f5400;
  --nocturne-red: #7b4551;
}

Tailwind CSS v4

/* Blackn’t to Nocturne Red — https://swatchly.xyz/palette/060a00-181d00-361f21-6a2930-2f5400-7b4551 */
@theme {
  --color-blackn-t: #060a00;
  --color-blackn-t-50: #f3f7ea;
  --color-blackn-t-100: #e8eedf;
  --color-blackn-t-200: #d4dac9;
  --color-blackn-t-300: #bdc4b0;
  --color-blackn-t-400: #9da590;
  --color-blackn-t-500: #7d856f;
  --color-blackn-t-600: #5e6551;
  --color-blackn-t-700: #444a39;
  --color-blackn-t-800: #2e3225;
  --color-blackn-t-900: #1c1f15;
  --color-blackn-t-950: #060a00;
  --color-midnight-pines: #181d00;
  --color-midnight-pines-50: #f3f8e3;
  --color-midnight-pines-100: #e9efd7;
  --color-midnight-pines-200: #d5dbc0;
  --color-midnight-pines-300: #bec5a6;
  --color-midnight-pines-400: #9ea684;
  --color-midnight-pines-500: #828a67;
  --color-midnight-pines-600: #676e4d;
  --color-midnight-pines-700: #505638;
  --color-midnight-pines-800: #3c4228;
  --color-midnight-pines-900: #2c311c;
  --color-midnight-pines-950: #181d00;
  --color-aubergine: #361f21;
  --color-aubergine-50: #fff1f2;
  --color-aubergine-100: #fae6e7;
  --color-aubergine-200: #e9d1d2;
  --color-aubergine-300: #d4b9bb;
  --color-aubergine-400: #b6999b;
  --color-aubergine-500: #9c7f81;
  --color-aubergine-600: #826768;
  --color-aubergine-700: #6b5254;
  --color-aubergine-800: #574142;
  --color-aubergine-900: #473335;
  --color-aubergine-950: #361f21;
  --color-arcane-red: #6a2930;
  --color-arcane-red-50: #fff1f2;
  --color-arcane-red-100: #ffe4e4;
  --color-arcane-red-200: #ffc7c9;
  --color-arcane-red-300: #f0acaf;
  --color-arcane-red-400: #d38a8e;
  --color-arcane-red-500: #b76e72;
  --color-arcane-red-600: #995459;
  --color-arcane-red-700: #7d3f44;
  --color-arcane-red-800: #6a2930;
  --color-arcane-red-900: #4f2226;
  --color-arcane-red-950: #331316;
  --color-deep-forestial-escapade: #2f5400;
  --color-deep-forestial-escapade-50: #e6ffd4;
  --color-deep-forestial-escapade-100: #daf6c6;
  --color-deep-forestial-escapade-200: #c3e4ab;
  --color-deep-forestial-escapade-300: #abd08f;
  --color-deep-forestial-escapade-400: #8ab26b;
  --color-deep-forestial-escapade-500: #6f984e;
  --color-deep-forestial-escapade-600: #567d34;
  --color-deep-forestial-escapade-700: #426621;
  --color-deep-forestial-escapade-800: #2f5400;
  --color-deep-forestial-escapade-900: #254008;
  --color-deep-forestial-escapade-950: #152902;
  --color-nocturne-red: #7b4551;
  --color-nocturne-red-50: #fff1f3;
  --color-nocturne-red-100: #ffe3e8;
  --color-nocturne-red-200: #fac9d2;
  --color-nocturne-red-300: #e7b1bb;
  --color-nocturne-red-400: #cb909c;
  --color-nocturne-red-500: #af7581;
  --color-nocturne-red-600: #935b67;
  --color-nocturne-red-700: #7b4551;
  --color-nocturne-red-800: #61353f;
  --color-nocturne-red-900: #4c2730;
  --color-nocturne-red-950: #32171d;
}