Night Snow to Botanical Night Color Palette

About this palette

Night Snow to Botanical Night is a 5-color warm palette: #BACAFF (Night Snow), #624800 (Very Coffee), #FA5DAF (Kisses), #A14B79 (Our Little Secret), #00413A (Botanical Night). It mixes blue, brown, pink, red, turquoise tones and feels warm overall. The strongest text pairing is #BACAFF on #00413A 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
Night Snow	rgb(186, 202, 255)	hsl(226, 100%, 86%)
Very Coffee	rgb(98, 72, 0)	hsl(44, 100%, 19%)
Kisses	rgb(250, 93, 175)	hsl(329, 94%, 67%)
Our Little Secret	rgb(161, 75, 121)	hsl(328, 36%, 46%)
Botanical Night	rgb(0, 65, 58)	hsl(174, 100%, 13%)

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#BACAFF on #00413A
Aa7.14:1 Very good#00413A on #BACAFF
Aa5.31:1 Good#BACAFF on #624800
Aa5.31:1 Good#624800 on #BACAFF
Aa3.99:1 Poor#FA5DAF on #00413A
Aa3.99:1 Poor#00413A on #FA5DAF
Aa3.42:1 Poor#BACAFF on #A14B79
Aa3.42:1 Poor#A14B79 on #BACAFF

Color blindness preview

CSS variables

/* Night Snow to Botanical Night — https://swatchly.xyz/palette/bacaff-624800-fa5daf-a14b79-00413a */
:root {
  --night-snow: #bacaff;
  --very-coffee: #624800;
  --kisses: #fa5daf;
  --our-little-secret: #a14b79;
  --botanical-night: #00413a;
}

Tailwind CSS v4

/* Night Snow to Botanical Night — https://swatchly.xyz/palette/bacaff-624800-fa5daf-a14b79-00413a */
@theme {
  --color-night-snow: #bacaff;
  --color-night-snow-50: #e7edff;
  --color-night-snow-100: #d7e1ff;
  --color-night-snow-200: #bacaff;
  --color-night-snow-300: #a8b6e4;
  --color-night-snow-400: #8a98c9;
  --color-night-snow-500: #707eaf;
  --color-night-snow-600: #596694;
  --color-night-snow-700: #46517b;
  --color-night-snow-800: #364065;
  --color-night-snow-900: #293150;
  --color-night-snow-950: #181e34;
  --color-very-coffee: #624800;
  --color-very-coffee-50: #fff4de;
  --color-very-coffee-100: #fce9c4;
  --color-very-coffee-200: #e9d3a6;
  --color-very-coffee-300: #d4ba86;
  --color-very-coffee-400: #b5995f;
  --color-very-coffee-500: #987c40;
  --color-very-coffee-600: #7a6025;
  --color-very-coffee-700: #624800;
  --color-very-coffee-800: #4c3806;
  --color-very-coffee-900: #3b2b01;
  --color-very-coffee-950: #251900;
  --color-kisses: #fa5daf;
  --color-kisses-50: #fff0f6;
  --color-kisses-100: #ffe1ed;
  --color-kisses-200: #ffc3dc;
  --color-kisses-300: #ff9cc9;
  --color-kisses-400: #fa5daf;
  --color-kisses-500: #da3e93;
  --color-kisses-600: #b91c78;
  --color-kisses-700: #990060;
  --color-kisses-800: #79004b;
  --color-kisses-900: #5f003a;
  --color-kisses-950: #3e0025;
  --color-our-little-secret: #a14b79;
  --color-our-little-secret-50: #fff1f7;
  --color-our-little-secret-100: #ffe2ef;
  --color-our-little-secret-200: #ffc5e0;
  --color-our-little-secret-300: #f6a5cd;
  --color-our-little-secret-400: #da82af;
  --color-our-little-secret-500: #be6594;
  --color-our-little-secret-600: #a14b79;
  --color-our-little-secret-700: #843761;
  --color-our-little-secret-800: #6a274c;
  --color-our-little-secret-900: #541b3b;
  --color-our-little-secret-950: #370e25;
  --color-botanical-night: #00413a;
  --color-botanical-night-50: #defdf7;
  --color-botanical-night-100: #d1f4ed;
  --color-botanical-night-200: #b8e2da;
  --color-botanical-night-300: #9dccc4;
  --color-botanical-night-400: #7aafa6;
  --color-botanical-night-500: #5d948b;
  --color-botanical-night-600: #447a71;
  --color-botanical-night-700: #30635b;
  --color-botanical-night-800: #214f49;
  --color-botanical-night-900: #00413a;
  --color-botanical-night-950: #0a2824;
}