Botanical Night to Guava Glow color palette

1C3F36Botanical Night 7F5F68Reading Tea Leaves 5B827EStream Burble 95BCB4Treetop F3BDCBGuava Glow

About this palette

Botanical Night to Guava Glow is a 5-color muted, cool, vintage palette: #1C3F36 (Botanical Night), #7F5F68 (Reading Tea Leaves), #5B827E (Stream Burble), #95BCB4 (Treetop), #F3BDCB (Guava Glow). It mixes turquoise, red, pink tones and feels cool overall. The strongest text pairing is #1C3F36 on #F3BDCB with a contrast ratio of 7.14:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(28, 63, 54)	hsl(165, 38%, 18%)
Reading Tea Leaves	rgb(127, 95, 104)	hsl(343, 14%, 44%)
Stream Burble	rgb(91, 130, 126)	hsl(174, 18%, 43%)
Treetop	rgb(149, 188, 180)	hsl(168, 23%, 66%)
Guava Glow	rgb(243, 189, 203)	hsl(344, 69%, 85%)

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.14:1 Very good#1C3F36 on #F3BDCB
Aa7.14:1 Very good#F3BDCB on #1C3F36
Aa5.59:1 Good#1C3F36 on #95BCB4
Aa5.59:1 Good#95BCB4 on #1C3F36
Aa3.46:1 Poor#7F5F68 on #F3BDCB
Aa3.46:1 Poor#F3BDCB on #7F5F68

Color blindness preview

CSS variables

/* Botanical Night to Guava Glow — https://swatchly.xyz/palette/1c3f36-7f5f68-5b827e-95bcb4-f3bdcb */
:root {
  --botanical-night: #1c3f36;
  --reading-tea-leaves: #7f5f68;
  --stream-burble: #5b827e;
  --treetop: #95bcb4;
  --guava-glow: #f3bdcb;
}

Tailwind CSS v4

/* Botanical Night to Guava Glow — https://swatchly.xyz/palette/1c3f36-7f5f68-5b827e-95bcb4-f3bdcb */
@theme {
  --color-botanical-night: #1c3f36;
  --color-botanical-night-50: #e5fbf4;
  --color-botanical-night-100: #d9f2ea;
  --color-botanical-night-200: #c2dfd6;
  --color-botanical-night-300: #a9c9bf;
  --color-botanical-night-400: #88aca1;
  --color-botanical-night-500: #6c9186;
  --color-botanical-night-600: #54776d;
  --color-botanical-night-700: #406057;
  --color-botanical-night-800: #304d45;
  --color-botanical-night-900: #1c3f36;
  --color-botanical-night-950: #142722;
  --color-reading-tea-leaves: #7f5f68;
  --color-reading-tea-leaves-50: #fff1f4;
  --color-reading-tea-leaves-100: #fbe4ea;
  --color-reading-tea-leaves-200: #eaced5;
  --color-reading-tea-leaves-300: #d5b6be;
  --color-reading-tea-leaves-400: #b7959e;
  --color-reading-tea-leaves-500: #9b7983;
  --color-reading-tea-leaves-600: #7f5f68;
  --color-reading-tea-leaves-700: #664a52;
  --color-reading-tea-leaves-800: #513940;
  --color-reading-tea-leaves-900: #402b31;
  --color-reading-tea-leaves-950: #281a1e;
  --color-stream-burble: #5b827e;
  --color-stream-burble-50: #e1f9f6;
  --color-stream-burble-100: #d2edea;
  --color-stream-burble-200: #b8d8d4;
  --color-stream-burble-300: #9cc0bc;
  --color-stream-burble-400: #789f9b;
  --color-stream-burble-500: #5b827e;
  --color-stream-burble-600: #456966;
  --color-stream-burble-700: #335451;
  --color-stream-burble-800: #264340;
  --color-stream-burble-900: #1b3432;
  --color-stream-burble-950: #0f2120;
  --color-treetop: #95bcb4;
  --color-treetop-50: #dcf4ee;
  --color-treetop-100: #cde8e2;
  --color-treetop-200: #b3d3cc;
  --color-treetop-300: #95bcb4;
  --color-treetop-400: #799f97;
  --color-treetop-500: #61867f;
  --color-treetop-600: #4a6d67;
  --color-treetop-700: #385852;
  --color-treetop-800: #2a4741;
  --color-treetop-900: #1f3834;
  --color-treetop-950: #112320;
  --color-guava-glow: #f3bdcb;
  --color-guava-glow-50: #ffe8ed;
  --color-guava-glow-100: #fdd8e1;
  --color-guava-glow-200: #f3bdcb;
  --color-guava-glow-300: #d9aab7;
  --color-guava-glow-400: #bd8c99;
  --color-guava-glow-500: #a3727f;
  --color-guava-glow-600: #885a66;
  --color-guava-glow-700: #6f4652;
  --color-guava-glow-800: #5a3640;
  --color-guava-glow-900: #472831;
  --color-guava-glow-950: #2e181e;
}