Botanical Night to Pinky Color Palette

About this palette

Botanical Night to Pinky is a 5-color warm palette: #00443F (Botanical Night), #960054 (Vertigo Cherry), #C56188 (Lipstick), #87FDDA (A State of Mint), #F585AE (Pinky). It mixes turquoise, red, pink tones and feels warm overall. The strongest text pairing is #00443F on #87FDDA with a contrast ratio of 9.00:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(0, 68, 63)	hsl(176, 100%, 13%)
Vertigo Cherry	rgb(150, 0, 84)	hsl(326, 100%, 29%)
Lipstick	rgb(197, 97, 136)	hsl(337, 46%, 58%)
A State of Mint	rgb(135, 253, 218)	hsl(162, 97%, 76%)
Pinky	rgb(245, 133, 174)	hsl(338, 85%, 74%)

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.

Aa9.00:1 Very good#00443F on #87FDDA
Aa9.00:1 Very good#87FDDA on #00443F
Aa7.05:1 Very good#960054 on #87FDDA
Aa7.05:1 Very good#87FDDA on #960054
Aa4.66:1 Good#00443F on #F585AE
Aa4.66:1 Good#F585AE on #00443F
Aa3.65:1 Poor#960054 on #F585AE
Aa3.65:1 Poor#F585AE on #960054

Color blindness preview

CSS variables

/* Botanical Night to Pinky — https://swatchly.xyz/palette/00443f-960054-c56188-87fdda-f585ae */
:root {
  --botanical-night: #00443f;
  --vertigo-cherry: #960054;
  --lipstick: #c56188;
  --a-state-of-mint: #87fdda;
  --pinky: #f585ae;
}

Tailwind CSS v4

/* Botanical Night to Pinky — https://swatchly.xyz/palette/00443f-960054-c56188-87fdda-f585ae */
@theme {
  --color-botanical-night: #00443f;
  --color-botanical-night-50: #ddfdf9;
  --color-botanical-night-100: #d0f4ef;
  --color-botanical-night-200: #b7e2dc;
  --color-botanical-night-300: #9bccc6;
  --color-botanical-night-400: #78afa9;
  --color-botanical-night-500: #5c958f;
  --color-botanical-night-600: #437b75;
  --color-botanical-night-700: #30655f;
  --color-botanical-night-800: #21524d;
  --color-botanical-night-900: #00443f;
  --color-botanical-night-950: #0a2b28;
  --color-vertigo-cherry: #960054;
  --color-vertigo-cherry-50: #fff1f5;
  --color-vertigo-cherry-100: #ffe2eb;
  --color-vertigo-cherry-200: #ffc4d8;
  --color-vertigo-cherry-300: #ff9dc1;
  --color-vertigo-cherry-400: #f06ba2;
  --color-vertigo-cherry-500: #d24a86;
  --color-vertigo-cherry-600: #b12d6b;
  --color-vertigo-cherry-700: #960054;
  --color-vertigo-cherry-800: #760441;
  --color-vertigo-cherry-900: #5d0032;
  --color-vertigo-cherry-950: #3d001f;
  --color-lipstick: #c56188;
  --color-lipstick-50: #fff1f5;
  --color-lipstick-100: #ffe3ec;
  --color-lipstick-200: #ffc6d8;
  --color-lipstick-300: #fda2c2;
  --color-lipstick-400: #e17ea3;
  --color-lipstick-500: #c56188;
  --color-lipstick-600: #a6476d;
  --color-lipstick-700: #893257;
  --color-lipstick-800: #6f2243;
  --color-lipstick-900: #581734;
  --color-lipstick-950: #3a0b20;
  --color-a-state-of-mint: #87fdda;
  --color-a-state-of-mint-50: #befee9;
  --color-a-state-of-mint-100: #87fdda;
  --color-a-state-of-mint-200: #8fe5ca;
  --color-a-state-of-mint-300: #6dd2b4;
  --color-a-state-of-mint-400: #3db596;
  --color-a-state-of-mint-500: #009a7c;
  --color-a-state-of-mint-600: #007d64;
  --color-a-state-of-mint-700: #006550;
  --color-a-state-of-mint-800: #004f3e;
  --color-a-state-of-mint-900: #003d2f;
  --color-a-state-of-mint-950: #00261d;
  --color-pinky: #f585ae;
  --color-pinky-50: #fff7f9;
  --color-pinky-100: #ffecf2;
  --color-pinky-200: #ffd2e0;
  --color-pinky-300: #ffb2cc;
  --color-pinky-400: #f585ae;
  --color-pinky-500: #d36890;
  --color-pinky-600: #b24a73;
  --color-pinky-700: #93335b;
  --color-pinky-800: #762146;
  --color-pinky-900: #5c1434;
  --color-pinky-950: #3b081f;
}