Honeyed Glow to Ochre Spice color palette

About this palette

Honeyed Glow to Ochre Spice is a 5-color warm, earthy palette: #EFC48B (Honeyed Glow), #713811 (Walnut), #717700 (Topiary Green), #3C2700 (Secret Passage), #E66A00 (Ochre Spice). It mixes orange, brown, green tones and feels warm overall. The strongest text pairing is #EFC48B on #3C2700 with a contrast ratio of 8.73:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Honeyed Glowrgb(239, 196, 139)hsl(34, 76%, 74%)
Walnutrgb(113, 56, 17)hsl(24, 74%, 25%)
Topiary Greenrgb(113, 119, 0)hsl(63, 100%, 23%)
Secret Passagergb(60, 39, 0)hsl(39, 100%, 12%)
Ochre Spicergb(230, 106, 0)hsl(28, 100%, 45%)

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.

  • Aa8.73:1 Very good#EFC48B on #3C2700
  • Aa8.73:1 Very good#3C2700 on #EFC48B
  • Aa5.69:1 Good#EFC48B on #713811
  • Aa5.69:1 Good#713811 on #EFC48B
  • Aa4.34:1 Poor#3C2700 on #E66A00
  • Aa4.34:1 Poor#E66A00 on #3C2700

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Honeyed Glow to Ochre Spice — https://swatchly.xyz/palette/efc48b-713811-717700-3c2700-e66a00 */
:root {
  --honeyed-glow: #efc48b;
  --walnut: #713811;
  --topiary-green: #717700;
  --secret-passage: #3c2700;
  --ochre-spice: #e66a00;
}

Tailwind CSS v4

/* Honeyed Glow to Ochre Spice — https://swatchly.xyz/palette/efc48b-713811-717700-3c2700-e66a00 */
@theme {
  --color-honeyed-glow: #efc48b;
  --color-honeyed-glow-50: #fffaf4;
  --color-honeyed-glow-100: #fff1de;
  --color-honeyed-glow-200: #fadcb5;
  --color-honeyed-glow-300: #efc48b;
  --color-honeyed-glow-400: #caa36f;
  --color-honeyed-glow-500: #ad854e;
  --color-honeyed-glow-600: #8f6931;
  --color-honeyed-glow-700: #74511c;
  --color-honeyed-glow-800: #5b3d0c;
  --color-honeyed-glow-900: #462d03;
  --color-honeyed-glow-950: #2d1b00;
  --color-walnut: #713811;
  --color-walnut-50: #fff2eb;
  --color-walnut-100: #ffe5d7;
  --color-walnut-200: #fecbae;
  --color-walnut-300: #edb494;
  --color-walnut-400: #d29470;
  --color-walnut-500: #b87954;
  --color-walnut-600: #9c603c;
  --color-walnut-700: #834b29;
  --color-walnut-800: #713811;
  --color-walnut-900: #562c10;
  --color-walnut-950: #391a06;
  --color-topiary-green: #717700;
  --color-topiary-green-50: #f5fbc7;
  --color-topiary-green-100: #ebf2b9;
  --color-topiary-green-200: #d9e09b;
  --color-topiary-green-300: #c3cb7b;
  --color-topiary-green-400: #a5ac51;
  --color-topiary-green-500: #8a912e;
  --color-topiary-green-600: #717700;
  --color-topiary-green-700: #595e00;
  --color-topiary-green-800: #464a00;
  --color-topiary-green-900: #353800;
  --color-topiary-green-950: #212300;
  --color-secret-passage: #3c2700;
  --color-secret-passage-50: #fff3e2;
  --color-secret-passage-100: #f9e9d0;
  --color-secret-passage-200: #e8d4b7;
  --color-secret-passage-300: #d4bd9c;
  --color-secret-passage-400: #b59c77;
  --color-secret-passage-500: #987f59;
  --color-secret-passage-600: #7b6440;
  --color-secret-passage-700: #614c2c;
  --color-secret-passage-800: #4a391d;
  --color-secret-passage-900: #3c2700;
  --color-secret-passage-950: #221808;
  --color-ochre-spice: #e66a00;
  --color-ochre-spice-50: #fff5f0;
  --color-ochre-spice-100: #ffece2;
  --color-ochre-spice-200: #ffd4be;
  --color-ochre-spice-300: #ffb891;
  --color-ochre-spice-400: #fe8941;
  --color-ochre-spice-500: #e66a00;
  --color-ochre-spice-600: #ba5400;
  --color-ochre-spice-700: #944200;
  --color-ochre-spice-800: #743200;
  --color-ochre-spice-900: #5a2500;
  --color-ochre-spice-950: #391500;
}

Similar palettes