Blackout to Philodendron Color Palette

About this palette

Blackout to Philodendron is a 4-color dark, gradient palette: #0C0B00 (Blackout), #052C10 (Haunted Forest), #554700 (Alligator Gladiator), #006459 (Philodendron). It mixes black, green, brown, turquoise tones and feels cool overall. The strongest text pairing is #0C0B00 on #006459 with a contrast ratio of 2.79:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(12, 11, 0)	hsl(55, 100%, 2%)
Haunted Forest	rgb(5, 44, 16)	hsl(137, 80%, 10%)
Alligator Gladiator	rgb(85, 71, 0)	hsl(50, 100%, 17%)
Philodendron	rgb(0, 100, 89)	hsl(173, 100%, 20%)

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

/* Blackout to Philodendron — https://swatchly.xyz/palette/0c0b00-052c10-554700-006459 */
:root {
  --blackout: #0c0b00;
  --haunted-forest: #052c10;
  --alligator-gladiator: #554700;
  --philodendron: #006459;
}

Tailwind CSS v4

/* Blackout to Philodendron — https://swatchly.xyz/palette/0c0b00-052c10-554700-006459 */
@theme {
  --color-blackout: #0c0b00;
  --color-blackout-50: #f6f6e9;
  --color-blackout-100: #ececde;
  --color-blackout-200: #d9d9c8;
  --color-blackout-300: #c3c2af;
  --color-blackout-400: #a3a38e;
  --color-blackout-500: #83836e;
  --color-blackout-600: #656450;
  --color-blackout-700: #4a4a39;
  --color-blackout-800: #333326;
  --color-blackout-900: #212016;
  --color-blackout-950: #0c0b00;
  --color-haunted-forest: #052c10;
  --color-haunted-forest-50: #e5fce8;
  --color-haunted-forest-100: #d9f3dc;
  --color-haunted-forest-200: #c2e1c6;
  --color-haunted-forest-300: #a8ccad;
  --color-haunted-forest-400: #86ad8c;
  --color-haunted-forest-500: #6b9371;
  --color-haunted-forest-600: #527858;
  --color-haunted-forest-700: #3f6244;
  --color-haunted-forest-800: #2f4e34;
  --color-haunted-forest-900: #233e28;
  --color-haunted-forest-950: #052c10;
  --color-alligator-gladiator: #554700;
  --color-alligator-gladiator-50: #fef6d4;
  --color-alligator-gladiator-100: #f5ecc6;
  --color-alligator-gladiator-200: #e3d8aa;
  --color-alligator-gladiator-300: #cfc38f;
  --color-alligator-gladiator-400: #b2a46a;
  --color-alligator-gladiator-500: #98894d;
  --color-alligator-gladiator-600: #7e7034;
  --color-alligator-gladiator-700: #675a21;
  --color-alligator-gladiator-800: #554700;
  --color-alligator-gladiator-900: #413708;
  --color-alligator-gladiator-950: #2a2202;
  --color-philodendron: #006459;
  --color-philodendron-50: #d7fff7;
  --color-philodendron-100: #c7f7ee;
  --color-philodendron-200: #ace5da;
  --color-philodendron-300: #8ed0c4;
  --color-philodendron-400: #67b2a5;
  --color-philodendron-500: #47968a;
  --color-philodendron-600: #2a7b70;
  --color-philodendron-700: #006459;
  --color-philodendron-800: #014e45;
  --color-philodendron-900: #003c35;
  --color-philodendron-950: #002621;
}