Start generating

Jungle King to Heron color palette

524926Jungle King243F2EEverglade758F76ToadCBC8DADust of the MoonA9996EVeranda Gold70607FHeron
Open in generator Export PNG, PDF, ASE…

About this palette

Jungle King to Heron is a 6-color muted, earthy palette: #524926 (Jungle King), #243F2E (Everglade), #758F76 (Toad), #CBC8DA (Dust of the Moon), #A9996E (Veranda Gold), #70607F (Heron). It mixes brown, green, gray, yellow, purple tones and feels cool overall. The strongest text pairing is #243F2E on #CBC8DA with a contrast ratio of 7.02:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Jungle Kingrgb(82, 73, 38)hsl(48, 37%, 24%)
Evergladergb(36, 63, 46)hsl(142, 27%, 19%)
Toadrgb(117, 143, 118)hsl(122, 10%, 51%)
Dust of the Moonrgb(203, 200, 218)hsl(250, 20%, 82%)
Veranda Goldrgb(169, 153, 110)hsl(44, 26%, 55%)
Heronrgb(112, 96, 127)hsl(271, 14%, 44%)

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.

  • Aa7.02:1 Very good#243F2E on #CBC8DA
  • Aa7.02:1 Very good#CBC8DA on #243F2E
  • Aa5.48:1 Good#524926 on #CBC8DA
  • Aa5.48:1 Good#CBC8DA on #524926
  • Aa4.09:1 Poor#243F2E on #A9996E
  • Aa4.09:1 Poor#A9996E on #243F2E
  • Aa3.49:1 Poor#CBC8DA on #70607F
  • Aa3.49:1 Poor#70607F on #CBC8DA

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Jungle King to Heron — https://swatchly.xyz/palette/524926-243f2e-758f76-cbc8da-a9996e-70607f */
:root {
  --jungle-king: #524926;
  --everglade: #243f2e;
  --toad: #758f76;
  --dust-of-the-moon: #cbc8da;
  --veranda-gold: #a9996e;
  --heron: #70607f;
}

Tailwind CSS v4

/* Jungle King to Heron — https://swatchly.xyz/palette/524926-243f2e-758f76-cbc8da-a9996e-70607f */
@theme {
  --color-jungle-king: #524926;
  --color-jungle-king-50: #fbf5e0;
  --color-jungle-king-100: #f2ecd3;
  --color-jungle-king-200: #dfd8bb;
  --color-jungle-king-300: #cbc3a2;
  --color-jungle-king-400: #aea480;
  --color-jungle-king-500: #948a65;
  --color-jungle-king-600: #7a714d;
  --color-jungle-king-700: #645b3a;
  --color-jungle-king-800: #524926;
  --color-jungle-king-900: #3f381e;
  --color-jungle-king-950: #282310;
  --color-everglade: #243f2e;
  --color-everglade-50: #e9faee;
  --color-everglade-100: #ddf1e3;
  --color-everglade-200: #c7dece;
  --color-everglade-300: #aec9b7;
  --color-everglade-400: #8eab97;
  --color-everglade-500: #73917d;
  --color-everglade-600: #5a7764;
  --color-everglade-700: #46604f;
  --color-everglade-800: #364d3e;
  --color-everglade-900: #243f2e;
  --color-everglade-950: #18271e;
  --color-toad: #758f76;
  --color-toad-50: #ebfaeb;
  --color-toad-100: #e0f1e0;
  --color-toad-200: #cadfca;
  --color-toad-300: #b2c9b2;
  --color-toad-400: #91aa91;
  --color-toad-500: #758f76;
  --color-toad-600: #5b745c;
  --color-toad-700: #465d47;
  --color-toad-800: #354936;
  --color-toad-900: #273828;
  --color-toad-950: #172318;
  --color-dust-of-the-moon: #cbc8da;
  --color-dust-of-the-moon-50: #faf9ff;
  --color-dust-of-the-moon-100: #f2f0fb;
  --color-dust-of-the-moon-200: #e0deeb;
  --color-dust-of-the-moon-300: #cbc8da;
  --color-dust-of-the-moon-400: #aaa7b7;
  --color-dust-of-the-moon-500: #8d8a9a;
  --color-dust-of-the-moon-600: #706e7e;
  --color-dust-of-the-moon-700: #585664;
  --color-dust-of-the-moon-800: #44424e;
  --color-dust-of-the-moon-900: #33313c;
  --color-dust-of-the-moon-950: #1f1e26;
  --color-veranda-gold: #a9996e;
  --color-veranda-gold-50: #fcf2d8;
  --color-veranda-gold-100: #f1e7ca;
  --color-veranda-gold-200: #ded2af;
  --color-veranda-gold-300: #c8ba93;
  --color-veranda-gold-400: #a9996e;
  --color-veranda-gold-500: #8f7f55;
  --color-veranda-gold-600: #75663e;
  --color-veranda-gold-700: #5e512c;
  --color-veranda-gold-800: #4b3f1f;
  --color-veranda-gold-900: #3b3115;
  --color-veranda-gold-950: #261e0a;
  --color-heron: #70607f;
  --color-heron-50: #f8f2ff;
  --color-heron-100: #f0e5fc;
  --color-heron-200: #ddd0ea;
  --color-heron-300: #c7b7d5;
  --color-heron-400: #a797b7;
  --color-heron-500: #8b7b9b;
  --color-heron-600: #70607f;
  --color-heron-700: #594b66;
  --color-heron-800: #463a51;
  --color-heron-900: #362c40;
  --color-heron-950: #221a29;
}

Similar palettes