Forestry to Atlantis color palette

2E451AForestry 8ADFFFWinter Wizard 8C6C99Purple Haze BD9273Baker’s Dream 3A5E75Atlantis

About this palette

Forestry to Atlantis is a 5-color cool palette: #2E451A (Forestry), #8ADFFF (Winter Wizard), #8C6C99 (Purple Haze), #BD9273 (Baker’s Dream), #3A5E75 (Atlantis). It mixes green, blue, purple, orange tones and feels cool overall. The strongest text pairing is #2E451A on #8ADFFF with a contrast ratio of 7.10:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestry	rgb(46, 69, 26)	hsl(92, 45%, 19%)
Winter Wizard	rgb(138, 223, 255)	hsl(196, 100%, 77%)
Purple Haze	rgb(140, 108, 153)	hsl(283, 18%, 51%)
Baker’s Dream	rgb(189, 146, 115)	hsl(25, 36%, 60%)
Atlantis	rgb(58, 94, 117)	hsl(203, 34%, 34%)

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.

Aa7.10:1 Very good#2E451A on #8ADFFF
Aa7.10:1 Very good#8ADFFF on #2E451A
Aa4.63:1 Good#8ADFFF on #3A5E75
Aa4.63:1 Good#3A5E75 on #8ADFFF
Aa3.79:1 Poor#2E451A on #BD9273
Aa3.79:1 Poor#BD9273 on #2E451A

Color blindness preview

CSS variables

/* Forestry to Atlantis — https://swatchly.xyz/palette/2e451a-8adfff-8c6c99-bd9273-3a5e75 */
:root {
  --forestry: #2e451a;
  --winter-wizard: #8adfff;
  --purple-haze: #8c6c99;
  --baker-s-dream: #bd9273;
  --atlantis: #3a5e75;
}

Tailwind CSS v4

/* Forestry to Atlantis — https://swatchly.xyz/palette/2e451a-8adfff-8c6c99-bd9273-3a5e75 */
@theme {
  --color-forestry: #2e451a;
  --color-forestry-50: #ebfbe0;
  --color-forestry-100: #e0f2d3;
  --color-forestry-200: #cae0bb;
  --color-forestry-300: #b1c9a0;
  --color-forestry-400: #8fa97c;
  --color-forestry-500: #738d5f;
  --color-forestry-600: #587145;
  --color-forestry-700: #435932;
  --color-forestry-800: #2e451a;
  --color-forestry-900: #253418;
  --color-forestry-950: #15200c;
  --color-winter-wizard: #8adfff;
  --color-winter-wizard-50: #def5ff;
  --color-winter-wizard-100: #c3eeff;
  --color-winter-wizard-200: #8adfff;
  --color-winter-wizard-300: #7fc8e3;
  --color-winter-wizard-400: #58aac7;
  --color-winter-wizard-500: #378fad;
  --color-winter-wizard-600: #187591;
  --color-winter-wizard-700: #005e77;
  --color-winter-wizard-800: #004a5e;
  --color-winter-wizard-900: #00394a;
  --color-winter-wizard-950: #00242f;
  --color-purple-haze: #8c6c99;
  --color-purple-haze-50: #faeeff;
  --color-purple-haze-100: #f4ddfe;
  --color-purple-haze-200: #e1c6ec;
  --color-purple-haze-300: #caabd6;
  --color-purple-haze-400: #a989b7;
  --color-purple-haze-500: #8c6c99;
  --color-purple-haze-600: #73557f;
  --color-purple-haze-700: #5d4267;
  --color-purple-haze-800: #4a3253;
  --color-purple-haze-900: #3a2642;
  --color-purple-haze-950: #25172b;
  --color-baker-s-dream: #bd9273;
  --color-baker-s-dream-50: #fff0e6;
  --color-baker-s-dream-100: #ffe2ce;
  --color-baker-s-dream-200: #efccb3;
  --color-baker-s-dream-300: #dab398;
  --color-baker-s-dream-400: #bd9273;
  --color-baker-s-dream-500: #a1785a;
  --color-baker-s-dream-600: #865f42;
  --color-baker-s-dream-700: #6d4a30;
  --color-baker-s-dream-800: #573922;
  --color-baker-s-dream-900: #452b17;
  --color-baker-s-dream-950: #2d1a0c;
  --color-atlantis: #3a5e75;
  --color-atlantis-50: #ecf7ff;
  --color-atlantis-100: #d8efff;
  --color-atlantis-200: #c0ddf1;
  --color-atlantis-300: #a7c8de;
  --color-atlantis-400: #85a9c2;
  --color-atlantis-500: #698ea7;
  --color-atlantis-600: #50748c;
  --color-atlantis-700: #3a5e75;
  --color-atlantis-800: #2c495c;
  --color-atlantis-900: #1f3949;
  --color-atlantis-950: #11232f;
}