Queen of Trees to Basil Smash color palette

233A16Queen of Trees 3B6900Forest Empress 5D8838Hidden Paradise 86AB5ALime It or Leave It B6DC97Basil Smash

Open in generator Export PNG, PDF, ASE…

About this palette

Queen of Trees to Basil Smash is a 5-color cool, earthy, monochromatic, gradient palette: #233A16 (Queen of Trees), #3B6900 (Forest Empress), #5D8838 (Hidden Paradise), #86AB5A (Lime It or Leave It), #B6DC97 (Basil Smash). It mixes green tones and feels cool overall. The strongest text pairing is #233A16 on #B6DC97 with a contrast ratio of 8.10:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queen of Trees	rgb(35, 58, 22)	hsl(98, 45%, 16%)
Forest Empress	rgb(59, 105, 0)	hsl(86, 100%, 21%)
Hidden Paradise	rgb(93, 136, 56)	hsl(92, 42%, 38%)
Lime It or Leave It	rgb(134, 171, 90)	hsl(87, 33%, 51%)
Basil Smash	rgb(182, 220, 151)	hsl(93, 50%, 73%)

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.10:1 Very good#233A16 on #B6DC97
Aa8.10:1 Very good#B6DC97 on #233A16
Aa4.73:1 Good#233A16 on #86AB5A
Aa4.73:1 Good#86AB5A on #233A16
Aa4.26:1 Poor#3B6900 on #B6DC97
Aa4.26:1 Poor#B6DC97 on #3B6900

Color blindness preview

CSS variables

/* Queen of Trees to Basil Smash — https://swatchly.xyz/palette/233a16-3b6900-5d8838-86ab5a-b6dc97 */
:root {
  --queen-of-trees: #233a16;
  --forest-empress: #3b6900;
  --hidden-paradise: #5d8838;
  --lime-it-or-leave-it: #86ab5a;
  --basil-smash: #b6dc97;
}

Tailwind CSS v4

/* Queen of Trees to Basil Smash — https://swatchly.xyz/palette/233a16-3b6900-5d8838-86ab5a-b6dc97 */
@theme {
  --color-queen-of-trees: #233a16;
  --color-queen-of-trees-50: #ebfbe3;
  --color-queen-of-trees-100: #e0f2d7;
  --color-queen-of-trees-200: #cadfc0;
  --color-queen-of-trees-300: #b1caa6;
  --color-queen-of-trees-400: #90ab84;
  --color-queen-of-trees-500: #758f68;
  --color-queen-of-trees-600: #5b744f;
  --color-queen-of-trees-700: #465d3b;
  --color-queen-of-trees-800: #35492b;
  --color-queen-of-trees-900: #233a16;
  --color-queen-of-trees-950: #172311;
  --color-forest-empress: #3b6900;
  --color-forest-empress-50: #e5ffd4;
  --color-forest-empress-100: #d6f8c0;
  --color-forest-empress-200: #c0e7a5;
  --color-forest-empress-300: #a7d387;
  --color-forest-empress-400: #85b560;
  --color-forest-empress-500: #6a9a41;
  --color-forest-empress-600: #518025;
  --color-forest-empress-700: #3b6900;
  --color-forest-empress-800: #2d5200;
  --color-forest-empress-900: #213f00;
  --color-forest-empress-950: #132800;
  --color-hidden-paradise: #5d8838;
  --color-hidden-paradise-50: #e2fdce;
  --color-hidden-paradise-100: #d3f2bd;
  --color-hidden-paradise-200: #b9de9f;
  --color-hidden-paradise-300: #9dc77f;
  --color-hidden-paradise-400: #7aa657;
  --color-hidden-paradise-500: #5d8838;
  --color-hidden-paradise-600: #476f21;
  --color-hidden-paradise-700: #355910;
  --color-hidden-paradise-800: #284704;
  --color-hidden-paradise-900: #1d3800;
  --color-hidden-paradise-950: #102400;
  --color-lime-it-or-leave-it: #86ab5a;
  --color-lime-it-or-leave-it-50: #e6fdcf;
  --color-lime-it-or-leave-it-100: #d9f3bf;
  --color-lime-it-or-leave-it-200: #c2e0a2;
  --color-lime-it-or-leave-it-300: #a8ca83;
  --color-lime-it-or-leave-it-400: #86ab5a;
  --color-lime-it-or-leave-it-500: #6c903f;
  --color-lime-it-or-leave-it-600: #547526;
  --color-lime-it-or-leave-it-700: #405e12;
  --color-lime-it-or-leave-it-800: #304a03;
  --color-lime-it-or-leave-it-900: #243a00;
  --color-lime-it-or-leave-it-950: #152500;
  --color-basil-smash: #b6dc97;
  --color-basil-smash-50: #e0f8ce;
  --color-basil-smash-100: #d3edbf;
  --color-basil-smash-200: #b6dc97;
  --color-basil-smash-300: #a4c58a;
  --color-basil-smash-400: #85a868;
  --color-basil-smash-500: #6b8e4d;
  --color-basil-smash-600: #547435;
  --color-basil-smash-700: #415e24;
  --color-basil-smash-800: #314b17;
  --color-basil-smash-900: #243a0d;
  --color-basil-smash-950: #152505;
}