Forest Empress to Indigo Color Palette

About this palette

Forest Empress to Indigo is a 5-color cool palette: #336E00 (Forest Empress), #B77700 (Caramel Coating), #C6DBFF (Icy Plains), #EDA000 (Hot Butter), #4A0072 (Indigo). It mixes green, orange, blue, purple tones and feels cool overall. The strongest text pairing is #C6DBFF on #4A0072 with a contrast ratio of 9.76:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forest Empress	rgb(51, 110, 0)	hsl(92, 100%, 22%)
Caramel Coating	rgb(183, 119, 0)	hsl(39, 100%, 36%)
Icy Plains	rgb(198, 219, 255)	hsl(218, 100%, 89%)
Hot Butter	rgb(237, 160, 0)	hsl(41, 100%, 46%)
Indigo	rgb(74, 0, 114)	hsl(279, 100%, 22%)

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.

Aa9.76:1 Very good#C6DBFF on #4A0072
Aa9.76:1 Very good#4A0072 on #C6DBFF
Aa6.28:1 Good#EDA000 on #4A0072
Aa6.28:1 Good#4A0072 on #EDA000
Aa4.44:1 Poor#336E00 on #C6DBFF
Aa4.44:1 Poor#C6DBFF on #336E00
Aa3.68:1 Poor#B77700 on #4A0072
Aa3.68:1 Poor#4A0072 on #B77700

Color blindness preview

CSS variables

/* Forest Empress to Indigo — https://swatchly.xyz/palette/336e00-b77700-c6dbff-eda000-4a0072 */
:root {
  --forest-empress: #336e00;
  --caramel-coating: #b77700;
  --icy-plains: #c6dbff;
  --hot-butter: #eda000;
  --indigo: #4a0072;
}

Tailwind CSS v4

/* Forest Empress to Indigo — https://swatchly.xyz/palette/336e00-b77700-c6dbff-eda000-4a0072 */
@theme {
  --color-forest-empress: #336e00;
  --color-forest-empress-50: #e4ffd8;
  --color-forest-empress-100: #d1f9bf;
  --color-forest-empress-200: #bae9a4;
  --color-forest-empress-300: #a0d687;
  --color-forest-empress-400: #7eb960;
  --color-forest-empress-500: #629f41;
  --color-forest-empress-600: #498425;
  --color-forest-empress-700: #336e00;
  --color-forest-empress-800: #265600;
  --color-forest-empress-900: #1c4300;
  --color-forest-empress-950: #0f2a00;
  --color-caramel-coating: #b77700;
  --color-caramel-coating-50: #fff3e5;
  --color-caramel-coating-100: #ffe7cb;
  --color-caramel-coating-200: #ffce91;
  --color-caramel-coating-300: #efb56b;
  --color-caramel-coating-400: #d3933b;
  --color-caramel-coating-500: #b77700;
  --color-caramel-coating-600: #945f00;
  --color-caramel-coating-700: #764b00;
  --color-caramel-coating-800: #5d3a00;
  --color-caramel-coating-900: #482c00;
  --color-caramel-coating-950: #2e1a00;
  --color-icy-plains: #c6dbff;
  --color-icy-plains-50: #f2f7ff;
  --color-icy-plains-100: #e4eeff;
  --color-icy-plains-200: #c6dbff;
  --color-icy-plains-300: #b2c4e2;
  --color-icy-plains-400: #91a4c4;
  --color-icy-plains-500: #7588a9;
  --color-icy-plains-600: #5b6d8c;
  --color-icy-plains-700: #465672;
  --color-icy-plains-800: #35435b;
  --color-icy-plains-900: #273348;
  --color-icy-plains-950: #171f2e;
  --color-hot-butter: #eda000;
  --color-hot-butter-50: #ffeace;
  --color-hot-butter-100: #ffdaa9;
  --color-hot-butter-200: #fdbe62;
  --color-hot-butter-300: #eda000;
  --color-hot-butter-400: #c88600;
  --color-hot-butter-500: #a87000;
  --color-hot-butter-600: #885a00;
  --color-hot-butter-700: #6e4800;
  --color-hot-butter-800: #583900;
  --color-hot-butter-900: #472d00;
  --color-hot-butter-950: #2d1b00;
  --color-indigo: #4a0072;
  --color-indigo-50: #f8f2ff;
  --color-indigo-100: #f2e5ff;
  --color-indigo-200: #e5cbff;
  --color-indigo-300: #d6abff;
  --color-indigo-400: #bc84ee;
  --color-indigo-500: #a167d2;
  --color-indigo-600: #854cb3;
  --color-indigo-700: #6c3796;
  --color-indigo-800: #57277b;
  --color-indigo-900: #4a0072;
  --color-indigo-950: #2c0d41;
}