Blackout to Coco Muck Color Palette

About this palette

Blackout to Coco Muck is a 4-color dark, warm, earthy, gradient palette: #100600 (Blackout), #391F03 (Medium Roast), #503C00 (Pineapple), #964C24 (Coco Muck). It mixes black, brown tones and feels warm overall. The strongest text pairing is #100600 on #964C24 with a contrast ratio of 3.20:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(16, 6, 0)	hsl(22, 100%, 3%)
Medium Roast	rgb(57, 31, 3)	hsl(31, 90%, 12%)
Pineapple	rgb(80, 60, 0)	hsl(45, 100%, 16%)
Coco Muck	rgb(150, 76, 36)	hsl(21, 61%, 36%)

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.20:1 Poor#100600 on #964C24
Aa3.20:1 Poor#964C24 on #100600

Color blindness preview

CSS variables

/* Blackout to Coco Muck — https://swatchly.xyz/palette/100600-391f03-503c00-964c24 */
:root {
  --blackout: #100600;
  --medium-roast: #391f03;
  --pineapple: #503c00;
  --coco-muck: #964c24;
}

Tailwind CSS v4

/* Blackout to Coco Muck — https://swatchly.xyz/palette/100600-391f03-503c00-964c24 */
@theme {
  --color-blackout: #100600;
  --color-blackout-50: #fdf3ea;
  --color-blackout-100: #f4e9de;
  --color-blackout-200: #e2d5c8;
  --color-blackout-300: #ccbeb0;
  --color-blackout-400: #ae9f8f;
  --color-blackout-500: #8d7e6e;
  --color-blackout-600: #6d5f51;
  --color-blackout-700: #514538;
  --color-blackout-800: #382f25;
  --color-blackout-900: #231c15;
  --color-blackout-950: #100600;
  --color-medium-roast: #391f03;
  --color-medium-roast-50: #fff3e8;
  --color-medium-roast-100: #fde7d4;
  --color-medium-roast-200: #ecd2bb;
  --color-medium-roast-300: #d8bba1;
  --color-medium-roast-400: #ba9b7e;
  --color-medium-roast-500: #a08164;
  --color-medium-roast-600: #86684c;
  --color-medium-roast-700: #6f5339;
  --color-medium-roast-800: #5a422b;
  --color-medium-roast-900: #493420;
  --color-medium-roast-950: #391f03;
  --color-pineapple: #503c00;
  --color-pineapple-50: #fff4dc;
  --color-pineapple-100: #f8eac9;
  --color-pineapple-200: #e7d6ae;
  --color-pineapple-300: #d2be91;
  --color-pineapple-400: #b39e6b;
  --color-pineapple-500: #98824e;
  --color-pineapple-600: #7c6734;
  --color-pineapple-700: #635021;
  --color-pineapple-800: #503c00;
  --color-pineapple-900: #3c2e0a;
  --color-pineapple-950: #261c04;
  --color-coco-muck: #964c24;
  --color-coco-muck-50: #fff2ec;
  --color-coco-muck-100: #ffe3d6;
  --color-coco-muck-200: #ffc6aa;
  --color-coco-muck-300: #f1a986;
  --color-coco-muck-400: #d3855f;
  --color-coco-muck-500: #b56841;
  --color-coco-muck-600: #964c24;
  --color-coco-muck-700: #7a3a16;
  --color-coco-muck-800: #622b0a;
  --color-coco-muck-900: #4e1f04;
  --color-coco-muck-950: #331101;
}