Botanical Night to Frost Fairy Color Palette

About this palette

Botanical Night to Frost Fairy is a 4-color vintage palette: #004541 (Botanical Night), #796A44 (Lizard), #BB7E85 (Old Rose), #C2CAF3 (Frost Fairy). It mixes turquoise, brown, red, purple tones and feels balanced overall. The strongest text pairing is #004541 on #C2CAF3 with a contrast ratio of 6.76:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(0, 69, 65)	hsl(177, 100%, 14%)
Lizard	rgb(121, 106, 68)	hsl(43, 28%, 37%)
Old Rose	rgb(187, 126, 133)	hsl(353, 31%, 61%)
Frost Fairy	rgb(194, 202, 243)	hsl(230, 67%, 86%)

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.

Aa6.76:1 Good#004541 on #C2CAF3
Aa6.76:1 Good#C2CAF3 on #004541
Aa3.34:1 Poor#004541 on #BB7E85
Aa3.34:1 Poor#BB7E85 on #004541
Aa3.29:1 Poor#796A44 on #C2CAF3
Aa3.29:1 Poor#C2CAF3 on #796A44

Color blindness preview

CSS variables

/* Botanical Night to Frost Fairy — https://swatchly.xyz/palette/004541-796a44-bb7e85-c2caf3 */
:root {
  --botanical-night: #004541;
  --lizard: #796a44;
  --old-rose: #bb7e85;
  --frost-fairy: #c2caf3;
}

Tailwind CSS v4

/* Botanical Night to Frost Fairy — https://swatchly.xyz/palette/004541-796a44-bb7e85-c2caf3 */
@theme {
  --color-botanical-night: #004541;
  --color-botanical-night-50: #ddfdf9;
  --color-botanical-night-100: #d0f4f0;
  --color-botanical-night-200: #b7e2dd;
  --color-botanical-night-300: #99cbc6;
  --color-botanical-night-400: #73aba5;
  --color-botanical-night-500: #558e89;
  --color-botanical-night-600: #3a726d;
  --color-botanical-night-700: #265955;
  --color-botanical-night-800: #004541;
  --color-botanical-night-900: #0e3431;
  --color-botanical-night-950: #06201e;
  --color-lizard: #796a44;
  --color-lizard-50: #fef5de;
  --color-lizard-100: #f5ead1;
  --color-lizard-200: #e3d7b8;
  --color-lizard-300: #cec09d;
  --color-lizard-400: #afa07a;
  --color-lizard-500: #94845e;
  --color-lizard-600: #796a44;
  --color-lizard-700: #615431;
  --color-lizard-800: #4d4123;
  --color-lizard-900: #3b3218;
  --color-lizard-950: #251e0c;
  --color-old-rose: #bb7e85;
  --color-old-rose-50: #fff4f5;
  --color-old-rose-100: #ffe9eb;
  --color-old-rose-200: #ffd0d4;
  --color-old-rose-300: #eeb9be;
  --color-old-rose-400: #d4999f;
  --color-old-rose-500: #bb7e85;
  --color-old-rose-600: #9c6269;
  --color-old-rose-700: #7f4a51;
  --color-old-rose-800: #66383e;
  --color-old-rose-900: #50292e;
  --color-old-rose-950: #33171b;
  --color-frost-fairy: #c2caf3;
  --color-frost-fairy-50: #e9edff;
  --color-frost-fairy-100: #dae0fd;
  --color-frost-fairy-200: #c2caf3;
  --color-frost-fairy-300: #afb6da;
  --color-frost-fairy-400: #9198be;
  --color-frost-fairy-500: #787fa4;
  --color-frost-fairy-600: #606689;
  --color-frost-fairy-700: #4c5171;
  --color-frost-fairy-800: #3b405c;
  --color-frost-fairy-900: #2d3149;
  --color-frost-fairy-950: #1b1e2f;
}