Tutu to Black Stallion Color Palette

About this palette

Tutu to Black Stallion is a 4-color palette: #FFE4E1 (Tutu), #EB7367 (You’re Blushing), #005180 (Grand Bleu), #011C1A (Black Stallion). It mixes white, red, blue, black tones and feels balanced overall. The strongest text pairing is #FFE4E1 on #011C1A with a contrast ratio of 14.75:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tutu	rgb(255, 228, 225)	hsl(6, 100%, 94%)
You’re Blushing	rgb(235, 115, 103)	hsl(5, 77%, 66%)
Grand Bleu	rgb(0, 81, 128)	hsl(202, 100%, 25%)
Black Stallion	rgb(1, 28, 26)	hsl(176, 93%, 6%)

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.

Aa14.75:1 Super#FFE4E1 on #011C1A
Aa14.75:1 Super#011C1A on #FFE4E1
Aa7.01:1 Very good#FFE4E1 on #005180
Aa7.01:1 Very good#005180 on #FFE4E1
Aa6.07:1 Good#EB7367 on #011C1A
Aa6.07:1 Good#011C1A on #EB7367

Color blindness preview

CSS variables

/* Tutu to Black Stallion — https://swatchly.xyz/palette/ffe4e1-eb7367-005180-011c1a */
:root {
  --tutu: #ffe4e1;
  --you-re-blushing: #eb7367;
  --grand-bleu: #005180;
  --black-stallion: #011c1a;
}

Tailwind CSS v4

/* Tutu to Black Stallion — https://swatchly.xyz/palette/ffe4e1-eb7367-005180-011c1a */
@theme {
  --color-tutu: #ffe4e1;
  --color-tutu-50: #fff2f0;
  --color-tutu-100: #ffe4e1;
  --color-tutu-200: #e6d2d0;
  --color-tutu-300: #d1bbb8;
  --color-tutu-400: #b39b98;
  --color-tutu-500: #98807d;
  --color-tutu-600: #7c6663;
  --color-tutu-700: #64504d;
  --color-tutu-800: #4f3d3c;
  --color-tutu-900: #3e2f2d;
  --color-tutu-950: #271c1b;
  --color-you-re-blushing: #eb7367;
  --color-you-re-blushing-50: #ffefed;
  --color-you-re-blushing-100: #ffe0dc;
  --color-you-re-blushing-200: #ffc3bb;
  --color-you-re-blushing-300: #ff9f93;
  --color-you-re-blushing-400: #eb7367;
  --color-you-re-blushing-500: #cd584d;
  --color-you-re-blushing-600: #ad3e36;
  --color-you-re-blushing-700: #902a24;
  --color-you-re-blushing-800: #751b17;
  --color-you-re-blushing-900: #5e100e;
  --color-you-re-blushing-950: #3f0606;
  --color-grand-bleu: #005180;
  --color-grand-bleu-50: #edf7ff;
  --color-grand-bleu-100: #daeeff;
  --color-grand-bleu-200: #b1dcff;
  --color-grand-bleu-300: #8bc5f3;
  --color-grand-bleu-400: #63a4d6;
  --color-grand-bleu-500: #4486b9;
  --color-grand-bleu-600: #296a99;
  --color-grand-bleu-700: #005180;
  --color-grand-bleu-800: #073f63;
  --color-grand-bleu-900: #01304f;
  --color-grand-bleu-950: #001e33;
  --color-black-stallion: #011c1a;
  --color-black-stallion-50: #e8f9f7;
  --color-black-stallion-100: #dcf0ee;
  --color-black-stallion-200: #c6ddda;
  --color-black-stallion-300: #adc7c4;
  --color-black-stallion-400: #8ba9a5;
  --color-black-stallion-500: #6d8b88;
  --color-black-stallion-600: #536f6c;
  --color-black-stallion-700: #3d5654;
  --color-black-stallion-800: #2b413f;
  --color-black-stallion-900: #1e2f2e;
  --color-black-stallion-950: #011c1a;
}