Alligator Gladiator to Darkest Forest color palette

524500Alligator Gladiator 041F11Nightmare 5B6932Bimi Green 0F0A00Blackout 243200Darkest Forest

About this palette

Alligator Gladiator to Darkest Forest is a 5-color dark, cool, earthy palette: #524500 (Alligator Gladiator), #041F11 (Nightmare), #5B6932 (Bimi Green), #0F0A00 (Blackout), #243200 (Darkest Forest). It mixes brown, green, black tones and feels cool overall. The strongest text pairing is #5B6932 on #0F0A00 with a contrast ratio of 3.30:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alligator Gladiator	rgb(82, 69, 0)	hsl(50, 100%, 16%)
Nightmare	rgb(4, 31, 17)	hsl(149, 77%, 7%)
Bimi Green	rgb(91, 105, 50)	hsl(75, 35%, 30%)
Blackout	rgb(15, 10, 0)	hsl(40, 100%, 3%)
Darkest Forest	rgb(36, 50, 0)	hsl(77, 100%, 10%)

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.30:1 Poor#5B6932 on #0F0A00
Aa3.30:1 Poor#0F0A00 on #5B6932

Color blindness preview

CSS variables

/* Alligator Gladiator to Darkest Forest — https://swatchly.xyz/palette/524500-041f11-5b6932-0f0a00-243200 */
:root {
  --alligator-gladiator: #524500;
  --nightmare: #041f11;
  --bimi-green: #5b6932;
  --blackout: #0f0a00;
  --darkest-forest: #243200;
}

Tailwind CSS v4

/* Alligator Gladiator to Darkest Forest — https://swatchly.xyz/palette/524500-041f11-5b6932-0f0a00-243200 */
@theme {
  --color-alligator-gladiator: #524500;
  --color-alligator-gladiator-50: #fdf6d4;
  --color-alligator-gladiator-100: #f4ecc6;
  --color-alligator-gladiator-200: #e2d8ab;
  --color-alligator-gladiator-300: #cec28f;
  --color-alligator-gladiator-400: #b0a36a;
  --color-alligator-gladiator-500: #96884d;
  --color-alligator-gladiator-600: #7b6e34;
  --color-alligator-gladiator-700: #645821;
  --color-alligator-gladiator-800: #524500;
  --color-alligator-gladiator-900: #3e3509;
  --color-alligator-gladiator-950: #282102;
  --color-nightmare: #041f11;
  --color-nightmare-50: #e9faef;
  --color-nightmare-100: #ddf1e4;
  --color-nightmare-200: #c7decf;
  --color-nightmare-300: #aec9b8;
  --color-nightmare-400: #8caa97;
  --color-nightmare-500: #6f8d7b;
  --color-nightmare-600: #557160;
  --color-nightmare-700: #3f5949;
  --color-nightmare-800: #2e4436;
  --color-nightmare-900: #203227;
  --color-nightmare-950: #041f11;
  --color-bimi-green: #5b6932;
  --color-bimi-green-50: #f0fada;
  --color-bimi-green-100: #e4efca;
  --color-bimi-green-200: #cddbae;
  --color-bimi-green-300: #b4c390;
  --color-bimi-green-400: #93a26b;
  --color-bimi-green-500: #76854d;
  --color-bimi-green-600: #5b6932;
  --color-bimi-green-700: #475324;
  --color-bimi-green-800: #374117;
  --color-bimi-green-900: #2a330f;
  --color-bimi-green-950: #192006;
  --color-blackout: #0f0a00;
  --color-blackout-50: #f9f5e9;
  --color-blackout-100: #efebde;
  --color-blackout-200: #dcd7c7;
  --color-blackout-300: #c7c1af;
  --color-blackout-400: #a8a18e;
  --color-blackout-500: #88816d;
  --color-blackout-600: #696350;
  --color-blackout-700: #4e4839;
  --color-blackout-800: #363226;
  --color-blackout-900: #232016;
  --color-blackout-950: #0f0a00;
  --color-darkest-forest: #243200;
  --color-darkest-forest-50: #effadd;
  --color-darkest-forest-100: #e4f1d0;
  --color-darkest-forest-200: #cfdeb7;
  --color-darkest-forest-300: #b8c99c;
  --color-darkest-forest-400: #96a877;
  --color-darkest-forest-500: #798b5a;
  --color-darkest-forest-600: #5f6f40;
  --color-darkest-forest-700: #48572c;
  --color-darkest-forest-800: #36421e;
  --color-darkest-forest-900: #243200;
  --color-darkest-forest-950: #161d08;
}