Tutu to Blank Stare Color Palette

About this palette

Tutu to Blank Stare is a 4-color muted palette: #F8E3E3 (Tutu), #875B58 (Reading Tea Leaves), #1F291B (Swamp Thing), #8C9EB1 (Blank Stare). It mixes white, red, gray tones and feels warm overall. The strongest text pairing is #F8E3E3 on #1F291B with a contrast ratio of 12.28:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tutu	rgb(248, 227, 227)	hsl(0, 60%, 93%)
Reading Tea Leaves	rgb(135, 91, 88)	hsl(4, 21%, 44%)
Swamp Thing	rgb(31, 41, 27)	hsl(103, 21%, 13%)
Blank Stare	rgb(140, 158, 177)	hsl(211, 19%, 62%)

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.

Aa12.28:1 Super#F8E3E3 on #1F291B
Aa12.28:1 Super#1F291B on #F8E3E3
Aa5.49:1 Good#1F291B on #8C9EB1
Aa5.49:1 Good#8C9EB1 on #1F291B
Aa4.66:1 Good#F8E3E3 on #875B58
Aa4.66:1 Good#875B58 on #F8E3E3

Color blindness preview

CSS variables

/* Tutu to Blank Stare — https://swatchly.xyz/palette/f8e3e3-875b58-1f291b-8c9eb1 */
:root {
  --tutu: #f8e3e3;
  --reading-tea-leaves: #875b58;
  --swamp-thing: #1f291b;
  --blank-stare: #8c9eb1;
}

Tailwind CSS v4

/* Tutu to Blank Stare — https://swatchly.xyz/palette/f8e3e3-875b58-1f291b-8c9eb1 */
@theme {
  --color-tutu: #f8e3e3;
  --color-tutu-50: #fcf0f0;
  --color-tutu-100: #f8e3e3;
  --color-tutu-200: #e1d1d1;
  --color-tutu-300: #ccbbbb;
  --color-tutu-400: #ae9b9b;
  --color-tutu-500: #938080;
  --color-tutu-600: #786667;
  --color-tutu-700: #615151;
  --color-tutu-800: #4c3e3e;
  --color-tutu-900: #3b2f30;
  --color-tutu-950: #251d1d;
  --color-reading-tea-leaves: #875b58;
  --color-reading-tea-leaves-50: #fff2f0;
  --color-reading-tea-leaves-100: #ffe3e1;
  --color-reading-tea-leaves-200: #f2ccc8;
  --color-reading-tea-leaves-300: #deb3af;
  --color-reading-tea-leaves-400: #c0928e;
  --color-reading-tea-leaves-500: #a47672;
  --color-reading-tea-leaves-600: #875b58;
  --color-reading-tea-leaves-700: #6d4744;
  --color-reading-tea-leaves-800: #573634;
  --color-reading-tea-leaves-900: #452827;
  --color-reading-tea-leaves-950: #2c1817;
  --color-swamp-thing: #1f291b;
  --color-swamp-thing-50: #f0f8ed;
  --color-swamp-thing-100: #e6eee3;
  --color-swamp-thing-200: #d1dbcd;
  --color-swamp-thing-300: #bac5b5;
  --color-swamp-thing-400: #9aa695;
  --color-swamp-thing-500: #808c7b;
  --color-swamp-thing-600: #677262;
  --color-swamp-thing-700: #525d4e;
  --color-swamp-thing-800: #414a3d;
  --color-swamp-thing-900: #333b30;
  --color-swamp-thing-950: #1f291b;
  --color-blank-stare: #8c9eb1;
  --color-blank-stare-50: #eaf4ff;
  --color-blank-stare-100: #ddeaf7;
  --color-blank-stare-200: #c7d5e5;
  --color-blank-stare-300: #aebecf;
  --color-blank-stare-400: #8c9eb1;
  --color-blank-stare-500: #728496;
  --color-blank-stare-600: #5a6a7b;
  --color-blank-stare-700: #465464;
  --color-blank-stare-800: #354250;
  --color-blank-stare-900: #28333f;
  --color-blank-stare-950: #182028;
}