Midnight Pines to Roastery Color Palette

About this palette

Midnight Pines to Roastery is a 4-color dark, earthy palette: #1B2300 (Midnight Pines), #87571B (Grizzly), #041000 (Cosmic Bit Flip), #6B2300 (Roastery). It mixes green, brown, black tones and feels balanced overall. The strongest text pairing is #87571B on #041000 with a contrast ratio of 3.16:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(27, 35, 0)	hsl(74, 100%, 7%)
Grizzly	rgb(135, 87, 27)	hsl(33, 67%, 32%)
Cosmic Bit Flip	rgb(4, 16, 0)	hsl(105, 100%, 3%)
Roastery	rgb(107, 35, 0)	hsl(20, 100%, 21%)

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.16:1 Poor#87571B on #041000
Aa3.16:1 Poor#041000 on #87571B

Color blindness preview

CSS variables

/* Midnight Pines to Roastery — https://swatchly.xyz/palette/1b2300-87571b-041000-6b2300 */
:root {
  --midnight-pines: #1b2300;
  --grizzly: #87571b;
  --cosmic-bit-flip: #041000;
  --roastery: #6b2300;
}

Tailwind CSS v4

/* Midnight Pines to Roastery — https://swatchly.xyz/palette/1b2300-87571b-041000-6b2300 */
@theme {
  --color-midnight-pines: #1b2300;
  --color-midnight-pines-50: #f1f9e2;
  --color-midnight-pines-100: #e7efd5;
  --color-midnight-pines-200: #d3dcbd;
  --color-midnight-pines-300: #bcc6a3;
  --color-midnight-pines-400: #9ca781;
  --color-midnight-pines-500: #808c65;
  --color-midnight-pines-600: #66714c;
  --color-midnight-pines-700: #505a38;
  --color-midnight-pines-800: #3e4629;
  --color-midnight-pines-900: #2f361d;
  --color-midnight-pines-950: #1b2300;
  --color-grizzly: #87571b;
  --color-grizzly-50: #fff3e7;
  --color-grizzly-100: #ffe4c9;
  --color-grizzly-200: #f5cca1;
  --color-grizzly-300: #e1b281;
  --color-grizzly-400: #c29059;
  --color-grizzly-500: #a5733a;
  --color-grizzly-600: #87571b;
  --color-grizzly-700: #6d440d;
  --color-grizzly-800: #583401;
  --color-grizzly-900: #452700;
  --color-grizzly-950: #2c1700;
  --color-cosmic-bit-flip: #041000;
  --color-cosmic-bit-flip-50: #eef9e9;
  --color-cosmic-bit-flip-100: #e3f0dd;
  --color-cosmic-bit-flip-200: #ceddc7;
  --color-cosmic-bit-flip-300: #b6c7ae;
  --color-cosmic-bit-flip-400: #96a88d;
  --color-cosmic-bit-flip-500: #76886d;
  --color-cosmic-bit-flip-600: #596a50;
  --color-cosmic-bit-flip-700: #404f39;
  --color-cosmic-bit-flip-800: #2c3826;
  --color-cosmic-bit-flip-900: #1c2417;
  --color-cosmic-bit-flip-950: #041000;
  --color-roastery: #6b2300;
  --color-roastery-50: #fff2ed;
  --color-roastery-100: #ffe5db;
  --color-roastery-200: #ffcab6;
  --color-roastery-300: #f5ac90;
  --color-roastery-400: #d8896b;
  --color-roastery-500: #bb6b4d;
  --color-roastery-600: #9b5134;
  --color-roastery-700: #7e3b21;
  --color-roastery-800: #6b2300;
  --color-roastery-900: #4f1f0a;
  --color-roastery-950: #331104;
}