Blackout to Serrano Pepper Color Palette

About this palette

Blackout to Serrano Pepper is a 4-color dark, earthy, gradient palette: #0C0800 (Blackout), #3A0F19 (Chocolate Kiss), #414E00 (Godzilla), #576900 (Serrano Pepper). It mixes black, brown, green tones and feels cool overall. The strongest text pairing is #0C0800 on #576900 with a contrast ratio of 3.26:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(12, 8, 0)	hsl(40, 100%, 2%)
Chocolate Kiss	rgb(58, 15, 25)	hsl(346, 59%, 14%)
Godzilla	rgb(65, 78, 0)	hsl(70, 100%, 15%)
Serrano Pepper	rgb(87, 105, 0)	hsl(70, 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.26:1 Poor#0C0800 on #576900
Aa3.26:1 Poor#576900 on #0C0800

Color blindness preview

CSS variables

/* Blackout to Serrano Pepper — https://swatchly.xyz/palette/0c0800-3a0f19-414e00-576900 */
:root {
  --blackout: #0c0800;
  --chocolate-kiss: #3a0f19;
  --godzilla: #414e00;
  --serrano-pepper: #576900;
}

Tailwind CSS v4

/* Blackout to Serrano Pepper — https://swatchly.xyz/palette/0c0800-3a0f19-414e00-576900 */
@theme {
  --color-blackout: #0c0800;
  --color-blackout-50: #f8f5ea;
  --color-blackout-100: #efebdf;
  --color-blackout-200: #dcd8c9;
  --color-blackout-300: #c6c1b0;
  --color-blackout-400: #a7a28f;
  --color-blackout-500: #86816e;
  --color-blackout-600: #676251;
  --color-blackout-700: #4b4739;
  --color-blackout-800: #343025;
  --color-blackout-900: #201e15;
  --color-blackout-950: #0c0800;
  --color-chocolate-kiss: #3a0f19;
  --color-chocolate-kiss-50: #fff1f3;
  --color-chocolate-kiss-100: #ffe3e6;
  --color-chocolate-kiss-200: #f7cad0;
  --color-chocolate-kiss-300: #e4b2b8;
  --color-chocolate-kiss-400: #c69198;
  --color-chocolate-kiss-500: #ab757d;
  --color-chocolate-kiss-600: #8e5c64;
  --color-chocolate-kiss-700: #74474e;
  --color-chocolate-kiss-800: #5e363c;
  --color-chocolate-kiss-900: #4a282e;
  --color-chocolate-kiss-950: #3a0f19;
  --color-godzilla: #414e00;
  --color-godzilla-50: #f0fbd4;
  --color-godzilla-100: #e6f2c6;
  --color-godzilla-200: #d1dfab;
  --color-godzilla-300: #bbca8f;
  --color-godzilla-400: #9cac6b;
  --color-godzilla-500: #81914e;
  --color-godzilla-600: #687734;
  --color-godzilla-700: #536121;
  --color-godzilla-800: #414e00;
  --color-godzilla-900: #323c08;
  --color-godzilla-950: #1f2602;
  --color-serrano-pepper: #576900;
  --color-serrano-pepper-50: #effccd;
  --color-serrano-pepper-100: #e4f3bd;
  --color-serrano-pepper-200: #d1e3a3;
  --color-serrano-pepper-300: #bccf86;
  --color-serrano-pepper-400: #9eb260;
  --color-serrano-pepper-500: #849841;
  --color-serrano-pepper-600: #6c7f25;
  --color-serrano-pepper-700: #576900;
  --color-serrano-pepper-800: #445200;
  --color-serrano-pepper-900: #343f00;
  --color-serrano-pepper-950: #202800;
}