Queen of Trees to Candle Glow Color Palette

About this palette

Queen of Trees to Candle Glow is a 4-color cool palette: #2A3C17 (Queen of Trees), #7C6090 (Muted Purple), #8CB6DC (Adrift on the Nile), #FFE8C4 (Candle Glow). It mixes green, purple, blue, white tones and feels cool overall. The strongest text pairing is #2A3C17 on #FFE8C4 with a contrast ratio of 10.01:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queen of Trees	rgb(42, 60, 23)	hsl(89, 45%, 16%)
Muted Purple	rgb(124, 96, 144)	hsl(275, 20%, 47%)
Adrift on the Nile	rgb(140, 182, 220)	hsl(208, 53%, 71%)
Candle Glow	rgb(255, 232, 196)	hsl(37, 100%, 88%)

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.

Aa10.01:1 Very good#2A3C17 on #FFE8C4
Aa10.01:1 Very good#FFE8C4 on #2A3C17
Aa5.60:1 Good#2A3C17 on #8CB6DC
Aa5.60:1 Good#8CB6DC on #2A3C17
Aa4.47:1 Poor#7C6090 on #FFE8C4
Aa4.47:1 Poor#FFE8C4 on #7C6090

Color blindness preview

CSS variables

/* Queen of Trees to Candle Glow — https://swatchly.xyz/palette/2a3c17-7c6090-8cb6dc-ffe8c4 */
:root {
  --queen-of-trees: #2a3c17;
  --muted-purple: #7c6090;
  --adrift-on-the-nile: #8cb6dc;
  --candle-glow: #ffe8c4;
}

Tailwind CSS v4

/* Queen of Trees to Candle Glow — https://swatchly.xyz/palette/2a3c17-7c6090-8cb6dc-ffe8c4 */
@theme {
  --color-queen-of-trees: #2a3c17;
  --color-queen-of-trees-50: #edfae2;
  --color-queen-of-trees-100: #e2f1d6;
  --color-queen-of-trees-200: #cddebe;
  --color-queen-of-trees-300: #b5c9a4;
  --color-queen-of-trees-400: #95aa82;
  --color-queen-of-trees-500: #7a8f67;
  --color-queen-of-trees-600: #61754e;
  --color-queen-of-trees-700: #4c5e3b;
  --color-queen-of-trees-800: #3b4b2b;
  --color-queen-of-trees-900: #2a3c17;
  --color-queen-of-trees-950: #1b2511;
  --color-muted-purple: #7c6090;
  --color-muted-purple-50: #f9f2ff;
  --color-muted-purple-100: #f4e5ff;
  --color-muted-purple-200: #e4cef6;
  --color-muted-purple-300: #d0b6e3;
  --color-muted-purple-400: #b296c7;
  --color-muted-purple-500: #977aac;
  --color-muted-purple-600: #7c6090;
  --color-muted-purple-700: #644a75;
  --color-muted-purple-800: #4f395e;
  --color-muted-purple-900: #3d2a4a;
  --color-muted-purple-950: #271930;
  --color-adrift-on-the-nile: #8cb6dc;
  --color-adrift-on-the-nile-50: #f7fbff;
  --color-adrift-on-the-nile-100: #eaf5ff;
  --color-adrift-on-the-nile-200: #cbe6ff;
  --color-adrift-on-the-nile-300: #b1d3f1;
  --color-adrift-on-the-nile-400: #8cb6dc;
  --color-adrift-on-the-nile-500: #6f97bc;
  --color-adrift-on-the-nile-600: #527a9d;
  --color-adrift-on-the-nile-700: #3b6080;
  --color-adrift-on-the-nile-800: #294a66;
  --color-adrift-on-the-nile-900: #1c374f;
  --color-adrift-on-the-nile-950: #0e2131;
  --color-candle-glow: #ffe8c4;
  --color-candle-glow-50: #fff4e2;
  --color-candle-glow-100: #ffe8c4;
  --color-candle-glow-200: #e6d5bb;
  --color-candle-glow-300: #d1bea1;
  --color-candle-glow-400: #b39e7e;
  --color-candle-glow-500: #988362;
  --color-candle-glow-600: #7c6949;
  --color-candle-glow-700: #645235;
  --color-candle-glow-800: #4f4026;
  --color-candle-glow-900: #3e301b;
  --color-candle-glow-950: #271e0e;
}