Start generating

Jungle Beat to Warm Neutral color palette

66512BJungle BeatEEDDC6Golden Retriever292010Burnt Coffee947E62GazelleBEB199Warm Neutral
Open in generator Export PNG, PDF, ASE…

About this palette

Jungle Beat to Warm Neutral is a 5-color muted, warm, earthy, vintage palette: #66512B (Jungle Beat), #EEDDC6 (Golden Retriever), #292010 (Burnt Coffee), #947E62 (Gazelle), #BEB199 (Warm Neutral). It mixes brown, yellow, gray, orange tones and feels warm overall. The strongest text pairing is #EEDDC6 on #292010 with a contrast ratio of 12.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Jungle Beatrgb(102, 81, 43)hsl(39, 41%, 28%)
Golden Retrieverrgb(238, 221, 198)hsl(35, 54%, 85%)
Burnt Coffeergb(41, 32, 16)hsl(38, 44%, 11%)
Gazellergb(148, 126, 98)hsl(34, 20%, 48%)
Warm Neutralrgb(190, 177, 153)hsl(39, 22%, 67%)

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.

  • Aa12.07:1 Super#EEDDC6 on #292010
  • Aa12.07:1 Super#292010 on #EEDDC6
  • Aa7.60:1 Very good#292010 on #BEB199
  • Aa7.60:1 Very good#BEB199 on #292010
  • Aa5.69:1 Good#66512B on #EEDDC6
  • Aa5.69:1 Good#EEDDC6 on #66512B
  • Aa4.14:1 Poor#292010 on #947E62
  • Aa4.14:1 Poor#947E62 on #292010

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Jungle Beat to Warm Neutral — https://swatchly.xyz/palette/66512b-eeddc6-292010-947e62-beb199 */
:root {
  --jungle-beat: #66512b;
  --golden-retriever: #eeddc6;
  --burnt-coffee: #292010;
  --gazelle: #947e62;
  --warm-neutral: #beb199;
}

Tailwind CSS v4

/* Jungle Beat to Warm Neutral — https://swatchly.xyz/palette/66512b-eeddc6-292010-947e62-beb199 */
@theme {
  --color-jungle-beat: #66512b;
  --color-jungle-beat-50: #fff4e1;
  --color-jungle-beat-100: #f8e9cf;
  --color-jungle-beat-200: #e7d5b6;
  --color-jungle-beat-300: #d2be9b;
  --color-jungle-beat-400: #b49e77;
  --color-jungle-beat-500: #99825b;
  --color-jungle-beat-600: #7d6842;
  --color-jungle-beat-700: #66512b;
  --color-jungle-beat-800: #503f21;
  --color-jungle-beat-900: #3e3016;
  --color-jungle-beat-950: #271d0a;
  --color-golden-retriever: #eeddc6;
  --color-golden-retriever-50: #fffaf3;
  --color-golden-retriever-100: #faf1e3;
  --color-golden-retriever-200: #eeddc6;
  --color-golden-retriever-300: #d3c5b3;
  --color-golden-retriever-400: #b3a490;
  --color-golden-retriever-500: #978772;
  --color-golden-retriever-600: #7a6c57;
  --color-golden-retriever-700: #615442;
  --color-golden-retriever-800: #4c4030;
  --color-golden-retriever-900: #3b3124;
  --color-golden-retriever-950: #251e14;
  --color-burnt-coffee: #292010;
  --color-burnt-coffee-50: #fbf4e9;
  --color-burnt-coffee-100: #f2eadd;
  --color-burnt-coffee-200: #dfd6c7;
  --color-burnt-coffee-300: #cac0af;
  --color-burnt-coffee-400: #aba08d;
  --color-burnt-coffee-500: #908572;
  --color-burnt-coffee-600: #766b59;
  --color-burnt-coffee-700: #5f5545;
  --color-burnt-coffee-800: #4b4334;
  --color-burnt-coffee-900: #3b3428;
  --color-burnt-coffee-950: #292010;
  --color-gazelle: #947e62;
  --color-gazelle-50: #fff2e2;
  --color-gazelle-100: #f6e7d4;
  --color-gazelle-200: #e4d2bc;
  --color-gazelle-300: #cfbaa1;
  --color-gazelle-400: #b09a7e;
  --color-gazelle-500: #947e62;
  --color-gazelle-600: #79654a;
  --color-gazelle-700: #624f37;
  --color-gazelle-800: #4e3d28;
  --color-gazelle-900: #3d2f1d;
  --color-gazelle-950: #271d10;
  --color-warm-neutral: #beb199;
  --color-warm-neutral-50: #f5edde;
  --color-warm-neutral-100: #e9e0cf;
  --color-warm-neutral-200: #d5cab6;
  --color-warm-neutral-300: #beb199;
  --color-warm-neutral-400: #a1947d;
  --color-warm-neutral-500: #887c65;
  --color-warm-neutral-600: #6f644e;
  --color-warm-neutral-700: #5a503c;
  --color-warm-neutral-800: #483f2e;
  --color-warm-neutral-900: #3a3223;
  --color-warm-neutral-950: #241e14;
}

Similar palettes