Blackn’t to Acorn color palette

000C03Blackn’t 0A2102Nightmare 3F2C00Secret Passage 464318Alligator Gladiator 784200Hazelnut Chocolate 7C5E4BAcorn

Open in generator Export PNG, PDF, ASE…

About this palette

Blackn’t to Acorn is a 6-color dark, warm, earthy, gradient palette: #000C03 (Blackn’t), #0A2102 (Nightmare), #3F2C00 (Secret Passage), #464318 (Alligator Gladiator), #784200 (Hazelnut Chocolate), #7C5E4B (Acorn). It mixes black, green, brown tones and feels warm overall. The strongest text pairing is #000C03 on #7C5E4B with a contrast ratio of 3.38:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackn’t	rgb(0, 12, 3)	hsl(135, 100%, 2%)
Nightmare	rgb(10, 33, 2)	hsl(105, 89%, 7%)
Secret Passage	rgb(63, 44, 0)	hsl(42, 100%, 12%)
Alligator Gladiator	rgb(70, 67, 24)	hsl(56, 49%, 18%)
Hazelnut Chocolate	rgb(120, 66, 0)	hsl(33, 100%, 24%)
Acorn	rgb(124, 94, 75)	hsl(23, 25%, 39%)

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.38:1 Poor#000C03 on #7C5E4B
Aa3.38:1 Poor#7C5E4B on #000C03

Color blindness preview

CSS variables

/* Blackn’t to Acorn — https://swatchly.xyz/palette/000c03-0a2102-3f2c00-464318-784200-7c5e4b */
:root {
  --blackn-t: #000c03;
  --nightmare: #0a2102;
  --secret-passage: #3f2c00;
  --alligator-gladiator: #464318;
  --hazelnut-chocolate: #784200;
  --acorn: #7c5e4b;
}

Tailwind CSS v4

/* Blackn’t to Acorn — https://swatchly.xyz/palette/000c03-0a2102-3f2c00-464318-784200-7c5e4b */
@theme {
  --color-blackn-t: #000c03;
  --color-blackn-t-50: #ecf9ef;
  --color-blackn-t-100: #e1f0e4;
  --color-blackn-t-200: #cbddcf;
  --color-blackn-t-300: #b3c7b8;
  --color-blackn-t-400: #92a898;
  --color-blackn-t-500: #728777;
  --color-blackn-t-600: #546859;
  --color-blackn-t-700: #3b4c3f;
  --color-blackn-t-800: #27342a;
  --color-blackn-t-900: #172019;
  --color-blackn-t-950: #000c03;
  --color-nightmare: #0a2102;
  --color-nightmare-50: #eafbe5;
  --color-nightmare-100: #dff2d9;
  --color-nightmare-200: #c9dfc2;
  --color-nightmare-300: #b1caa8;
  --color-nightmare-400: #90ab86;
  --color-nightmare-500: #738e69;
  --color-nightmare-600: #597350;
  --color-nightmare-700: #435a3b;
  --color-nightmare-800: #32452a;
  --color-nightmare-900: #24341e;
  --color-nightmare-950: #0a2102;
  --color-secret-passage: #3f2c00;
  --color-secret-passage-50: #fff4df;
  --color-secret-passage-100: #f8e9ce;
  --color-secret-passage-200: #e7d5b5;
  --color-secret-passage-300: #d2be9a;
  --color-secret-passage-400: #b39e75;
  --color-secret-passage-500: #988259;
  --color-secret-passage-600: #7b673f;
  --color-secret-passage-700: #63502c;
  --color-secret-passage-800: #4d3d1d;
  --color-secret-passage-900: #3f2c00;
  --color-secret-passage-950: #251b08;
  --color-alligator-gladiator: #464318;
  --color-alligator-gladiator-50: #f8f7dd;
  --color-alligator-gladiator-100: #eeedd0;
  --color-alligator-gladiator-200: #dbdab7;
  --color-alligator-gladiator-300: #c5c39c;
  --color-alligator-gladiator-400: #a6a478;
  --color-alligator-gladiator-500: #8b885c;
  --color-alligator-gladiator-600: #706d43;
  --color-alligator-gladiator-700: #59562f;
  --color-alligator-gladiator-800: #464318;
  --color-alligator-gladiator-900: #353316;
  --color-alligator-gladiator-950: #21200b;
  --color-hazelnut-chocolate: #784200;
  --color-hazelnut-chocolate-50: #fff3e9;
  --color-hazelnut-chocolate-100: #ffe6d2;
  --color-hazelnut-chocolate-200: #fccca4;
  --color-hazelnut-chocolate-300: #e9b385;
  --color-hazelnut-chocolate-400: #cb915e;
  --color-hazelnut-chocolate-500: #af743f;
  --color-hazelnut-chocolate-600: #915a25;
  --color-hazelnut-chocolate-700: #784200;
  --color-hazelnut-chocolate-800: #5e3303;
  --color-hazelnut-chocolate-900: #4a2600;
  --color-hazelnut-chocolate-950: #2f1600;
  --color-acorn: #7c5e4b;
  --color-acorn-50: #fff2eb;
  --color-acorn-100: #fbe5d7;
  --color-acorn-200: #e9cfbf;
  --color-acorn-300: #d4b7a4;
  --color-acorn-400: #b59582;
  --color-acorn-500: #987965;
  --color-acorn-600: #7c5e4b;
  --color-acorn-700: #644a39;
  --color-acorn-800: #4f392a;
  --color-acorn-900: #3e2b1f;
  --color-acorn-950: #281a11;
}