Botanical Night to Over the Moon color palette

223B2FBotanical Night 805644Root Beer 728E78Toad EED2CCBlushing Coconut AFB3DCOver the Moon

About this palette

Botanical Night to Over the Moon is a 5-color muted, cool, earthy palette: #223B2F (Botanical Night), #805644 (Root Beer), #728E78 (Toad), #EED2CC (Blushing Coconut), #AFB3DC (Over the Moon). It mixes green, brown, gray, purple tones and feels cool overall. The strongest text pairing is #223B2F on #EED2CC with a contrast ratio of 8.49:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(34, 59, 47)	hsl(151, 27%, 18%)
Root Beer	rgb(128, 86, 68)	hsl(18, 31%, 38%)
Toad	rgb(114, 142, 120)	hsl(133, 11%, 50%)
Blushing Coconut	rgb(238, 210, 204)	hsl(11, 50%, 87%)
Over the Moon	rgb(175, 179, 220)	hsl(235, 39%, 77%)

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.49:1 Very good#223B2F on #EED2CC
Aa8.49:1 Very good#EED2CC on #223B2F
Aa5.94:1 Good#223B2F on #AFB3DC
Aa5.94:1 Good#AFB3DC on #223B2F
Aa4.42:1 Poor#805644 on #EED2CC
Aa4.42:1 Poor#EED2CC on #805644
Aa3.38:1 Poor#223B2F on #728E78
Aa3.38:1 Poor#728E78 on #223B2F

Color blindness preview

CSS variables

/* Botanical Night to Over the Moon — https://swatchly.xyz/palette/223b2f-805644-728e78-eed2cc-afb3dc */
:root {
  --botanical-night: #223b2f;
  --root-beer: #805644;
  --toad: #728e78;
  --blushing-coconut: #eed2cc;
  --over-the-moon: #afb3dc;
}

Tailwind CSS v4

/* Botanical Night to Over the Moon — https://swatchly.xyz/palette/223b2f-805644-728e78-eed2cc-afb3dc */
@theme {
  --color-botanical-night: #223b2f;
  --color-botanical-night-50: #e9faf1;
  --color-botanical-night-100: #def0e7;
  --color-botanical-night-200: #c8ded2;
  --color-botanical-night-300: #afc8bb;
  --color-botanical-night-400: #8ea99b;
  --color-botanical-night-500: #738e80;
  --color-botanical-night-600: #5a7466;
  --color-botanical-night-700: #455d51;
  --color-botanical-night-800: #344a3f;
  --color-botanical-night-900: #223b2f;
  --color-botanical-night-950: #17241e;
  --color-root-beer: #805644;
  --color-root-beer-50: #fff2ed;
  --color-root-beer-100: #ffe2d6;
  --color-root-beer-200: #f0cabb;
  --color-root-beer-300: #dbb19f;
  --color-root-beer-400: #bb8f7c;
  --color-root-beer-500: #9e725f;
  --color-root-beer-600: #805644;
  --color-root-beer-700: #674334;
  --color-root-beer-800: #523326;
  --color-root-beer-900: #41271c;
  --color-root-beer-950: #2a170f;
  --color-toad: #728e78;
  --color-toad-50: #eafaed;
  --color-toad-100: #def1e2;
  --color-toad-200: #c8decc;
  --color-toad-300: #afc8b4;
  --color-toad-400: #8ea994;
  --color-toad-500: #728e78;
  --color-toad-600: #59735e;
  --color-toad-700: #445c49;
  --color-toad-800: #334838;
  --color-toad-900: #26382a;
  --color-toad-950: #162319;
  --color-blushing-coconut: #eed2cc;
  --color-blushing-coconut-50: #fff3f1;
  --color-blushing-coconut-100: #fae8e4;
  --color-blushing-coconut-200: #eed2cc;
  --color-blushing-coconut-300: #d4bcb7;
  --color-blushing-coconut-400: #b59c97;
  --color-blushing-coconut-500: #9a807b;
  --color-blushing-coconut-600: #7e6661;
  --color-blushing-coconut-700: #65504b;
  --color-blushing-coconut-800: #503d39;
  --color-blushing-coconut-900: #3e2e2b;
  --color-blushing-coconut-950: #271c1a;
  --color-over-the-moon: #afb3dc;
  --color-over-the-moon-50: #eceeff;
  --color-over-the-moon-100: #dfe2fe;
  --color-over-the-moon-200: #c8cced;
  --color-over-the-moon-300: #afb3dc;
  --color-over-the-moon-400: #9296bc;
  --color-over-the-moon-500: #797ca3;
  --color-over-the-moon-600: #616488;
  --color-over-the-moon-700: #4d4f70;
  --color-over-the-moon-800: #3c3e5a;
  --color-over-the-moon-900: #2f3049;
  --color-over-the-moon-950: #1c1d2f;
}