Tutu to Botanical Night Color Palette

About this palette

Tutu to Botanical Night is a 5-color muted, cool palette: #F7E3E0 (Tutu), #D8B4AB (Borlotti Bean), #6B91AE (Heavenly Sky), #4C7467 (Green Sleeves), #1C3D37 (Botanical Night). It mixes white, pink, blue, turquoise tones and feels cool overall. The strongest text pairing is #F7E3E0 on #1C3D37 with a contrast ratio of 9.60:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tutu	rgb(247, 227, 224)	hsl(8, 59%, 92%)
Borlotti Bean	rgb(216, 180, 171)	hsl(12, 37%, 76%)
Heavenly Sky	rgb(107, 145, 174)	hsl(206, 29%, 55%)
Green Sleeves	rgb(76, 116, 103)	hsl(160, 21%, 38%)
Botanical Night	rgb(28, 61, 55)	hsl(169, 37%, 17%)

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.60:1 Very good#F7E3E0 on #1C3D37
Aa9.60:1 Very good#1C3D37 on #F7E3E0
Aa6.23:1 Good#D8B4AB on #1C3D37
Aa6.23:1 Good#1C3D37 on #D8B4AB
Aa4.25:1 Poor#F7E3E0 on #4C7467
Aa4.25:1 Poor#4C7467 on #F7E3E0
Aa3.55:1 Poor#6B91AE on #1C3D37
Aa3.55:1 Poor#1C3D37 on #6B91AE

Color blindness preview

CSS variables

/* Tutu to Botanical Night — https://swatchly.xyz/palette/f7e3e0-d8b4ab-6b91ae-4c7467-1c3d37 */
:root {
  --tutu: #f7e3e0;
  --borlotti-bean: #d8b4ab;
  --heavenly-sky: #6b91ae;
  --green-sleeves: #4c7467;
  --botanical-night: #1c3d37;
}

Tailwind CSS v4

/* Tutu to Botanical Night — https://swatchly.xyz/palette/f7e3e0-d8b4ab-6b91ae-4c7467-1c3d37 */
@theme {
  --color-tutu: #f7e3e0;
  --color-tutu-50: #fbf0ee;
  --color-tutu-100: #f7e3e0;
  --color-tutu-200: #e0d1cf;
  --color-tutu-300: #cbbbb8;
  --color-tutu-400: #ad9b99;
  --color-tutu-500: #92807e;
  --color-tutu-600: #786764;
  --color-tutu-700: #60514f;
  --color-tutu-800: #4c3f3d;
  --color-tutu-900: #3b302e;
  --color-tutu-950: #251d1c;
  --color-borlotti-bean: #d8b4ab;
  --color-borlotti-bean-50: #ffefeb;
  --color-borlotti-bean-100: #fbe3dd;
  --color-borlotti-bean-200: #e9cdc6;
  --color-borlotti-bean-300: #d8b4ab;
  --color-borlotti-bean-400: #b7968d;
  --color-borlotti-bean-500: #9c7b73;
  --color-borlotti-bean-600: #81625a;
  --color-borlotti-bean-700: #694c45;
  --color-borlotti-bean-800: #543b35;
  --color-borlotti-bean-900: #422d28;
  --color-borlotti-bean-950: #2a1b17;
  --color-heavenly-sky: #6b91ae;
  --color-heavenly-sky-50: #eef8ff;
  --color-heavenly-sky-100: #def0ff;
  --color-heavenly-sky-200: #c2dff6;
  --color-heavenly-sky-300: #a9cae4;
  --color-heavenly-sky-400: #87acc8;
  --color-heavenly-sky-500: #6b91ae;
  --color-heavenly-sky-600: #507591;
  --color-heavenly-sky-700: #3b5d76;
  --color-heavenly-sky-800: #2b485e;
  --color-heavenly-sky-900: #1e374a;
  --color-heavenly-sky-950: #10222f;
  --color-green-sleeves: #4c7467;
  --color-green-sleeves-50: #e4fcf3;
  --color-green-sleeves-100: #d7f2e8;
  --color-green-sleeves-200: #c0dfd4;
  --color-green-sleeves-300: #a5cabd;
  --color-green-sleeves-400: #83ab9d;
  --color-green-sleeves-500: #668f81;
  --color-green-sleeves-600: #4c7467;
  --color-green-sleeves-700: #395d51;
  --color-green-sleeves-800: #29493f;
  --color-green-sleeves-900: #1d3830;
  --color-green-sleeves-950: #10231d;
  --color-botanical-night: #1c3d37;
  --color-botanical-night-50: #e6faf6;
  --color-botanical-night-100: #daf1ec;
  --color-botanical-night-200: #c3ded8;
  --color-botanical-night-300: #aac9c2;
  --color-botanical-night-400: #88aba3;
  --color-botanical-night-500: #6d9088;
  --color-botanical-night-600: #54766f;
  --color-botanical-night-700: #405f59;
  --color-botanical-night-800: #304b46;
  --color-botanical-night-900: #1c3d37;
  --color-botanical-night-950: #142622;
}