Queen of Trees to Sea of Galilee color palette

203C19Queen of Trees 553A00Pineapple E4D2B2Dust Storm A888BCPetrified Purple A7C199Camping Grounds 46618BSea of Galilee

Open in generator Export PNG, PDF, ASE…

About this palette

Queen of Trees to Sea of Galilee is a 6-color cool, earthy palette: #203C19 (Queen of Trees), #553A00 (Pineapple), #E4D2B2 (Dust Storm), #A888BC (Petrified Purple), #A7C199 (Camping Grounds), #46618B (Sea of Galilee). It mixes green, brown, yellow, purple, blue tones and feels cool overall. The strongest text pairing is #203C19 on #E4D2B2 with a contrast ratio of 8.22:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queen of Trees	rgb(32, 60, 25)	hsl(108, 41%, 17%)
Pineapple	rgb(85, 58, 0)	hsl(41, 100%, 17%)
Dust Storm	rgb(228, 210, 178)	hsl(38, 48%, 80%)
Petrified Purple	rgb(168, 136, 188)	hsl(277, 28%, 64%)
Camping Grounds	rgb(167, 193, 153)	hsl(99, 24%, 68%)
Sea of Galilee	rgb(70, 97, 139)	hsl(217, 33%, 41%)

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.22:1 Very good#203C19 on #E4D2B2
Aa8.22:1 Very good#E4D2B2 on #203C19
Aa7.11:1 Very good#553A00 on #E4D2B2
Aa7.11:1 Very good#E4D2B2 on #553A00
Aa6.23:1 Good#203C19 on #A7C199
Aa6.23:1 Good#A7C199 on #203C19
Aa5.39:1 Good#553A00 on #A7C199
Aa5.39:1 Good#A7C199 on #553A00

Color blindness preview

CSS variables

/* Queen of Trees to Sea of Galilee — https://swatchly.xyz/palette/203c19-553a00-e4d2b2-a888bc-a7c199-46618b */
:root {
  --queen-of-trees: #203c19;
  --pineapple: #553a00;
  --dust-storm: #e4d2b2;
  --petrified-purple: #a888bc;
  --camping-grounds: #a7c199;
  --sea-of-galilee: #46618b;
}

Tailwind CSS v4

/* Queen of Trees to Sea of Galilee — https://swatchly.xyz/palette/203c19-553a00-e4d2b2-a888bc-a7c199-46618b */
@theme {
  --color-queen-of-trees: #203c19;
  --color-queen-of-trees-50: #e9fce4;
  --color-queen-of-trees-100: #ddf3d8;
  --color-queen-of-trees-200: #c7e0c1;
  --color-queen-of-trees-300: #aecba7;
  --color-queen-of-trees-400: #8dac85;
  --color-queen-of-trees-500: #71916a;
  --color-queen-of-trees-600: #587651;
  --color-queen-of-trees-700: #435f3d;
  --color-queen-of-trees-800: #334b2d;
  --color-queen-of-trees-900: #203c19;
  --color-queen-of-trees-950: #162512;
  --color-pineapple: #553a00;
  --color-pineapple-50: #fff4e2;
  --color-pineapple-100: #fde8c8;
  --color-pineapple-200: #ecd4ae;
  --color-pineapple-300: #d7bc90;
  --color-pineapple-400: #b99c6b;
  --color-pineapple-500: #9d7f4e;
  --color-pineapple-600: #816534;
  --color-pineapple-700: #684e21;
  --color-pineapple-800: #553a00;
  --color-pineapple-900: #402d0a;
  --color-pineapple-950: #281b04;
  --color-dust-storm: #e4d2b2;
  --color-dust-storm-50: #fcf2df;
  --color-dust-storm-100: #f3e7d3;
  --color-dust-storm-200: #e4d2b2;
  --color-dust-storm-300: #ccbca1;
  --color-dust-storm-400: #ae9d80;
  --color-dust-storm-500: #938265;
  --color-dust-storm-600: #78694c;
  --color-dust-storm-700: #615339;
  --color-dust-storm-800: #4d402a;
  --color-dust-storm-900: #3c311e;
  --color-dust-storm-950: #261e10;
  --color-petrified-purple: #a888bc;
  --color-petrified-purple-50: #f8ecff;
  --color-petrified-purple-100: #f1dcff;
  --color-petrified-purple-200: #dec4ef;
  --color-petrified-purple-300: #c8aada;
  --color-petrified-purple-400: #a888bc;
  --color-petrified-purple-500: #8e6fa1;
  --color-petrified-purple-600: #755787;
  --color-petrified-purple-700: #5e446e;
  --color-petrified-purple-800: #4b3459;
  --color-petrified-purple-900: #3c2847;
  --color-petrified-purple-950: #27182f;
  --color-camping-grounds: #a7c199;
  --color-camping-grounds-50: #e6f6de;
  --color-camping-grounds-100: #d9ebd0;
  --color-camping-grounds-200: #c2d7b7;
  --color-camping-grounds-300: #a7c199;
  --color-camping-grounds-400: #8aa37d;
  --color-camping-grounds-500: #718963;
  --color-camping-grounds-600: #59704c;
  --color-camping-grounds-700: #455a39;
  --color-camping-grounds-800: #35472b;
  --color-camping-grounds-900: #293820;
  --color-camping-grounds-950: #182311;
  --color-sea-of-galilee: #46618b;
  --color-sea-of-galilee-50: #eff6ff;
  --color-sea-of-galilee-100: #e0ecff;
  --color-sea-of-galilee-200: #c4dbff;
  --color-sea-of-galilee-300: #adc7ef;
  --color-sea-of-galilee-400: #8da9d5;
  --color-sea-of-galilee-500: #738fbc;
  --color-sea-of-galilee-600: #5b76a2;
  --color-sea-of-galilee-700: #46618b;
  --color-sea-of-galilee-800: #354c6f;
  --color-sea-of-galilee-900: #263a58;
  --color-sea-of-galilee-950: #16243a;
}