Poodle Skirt to Morocco Color Palette

About this palette

Poodle Skirt to Morocco is a 5-color warm palette: #F9B1B7 (Poodle Skirt), #833E6B (Midnight Aubergine), #F382B0 (Pinky), #5C321B (Count Chocula), #BD7165 (Morocco). It mixes pink, red, brown tones and feels warm overall. The strongest text pairing is #F9B1B7 on #5C321B with a contrast ratio of 6.23:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poodle Skirt	rgb(249, 177, 183)	hsl(355, 86%, 84%)
Midnight Aubergine	rgb(131, 62, 107)	hsl(321, 36%, 38%)
Pinky	rgb(243, 130, 176)	hsl(336, 82%, 73%)
Count Chocula	rgb(92, 50, 27)	hsl(21, 55%, 23%)
Morocco	rgb(189, 113, 101)	hsl(8, 40%, 57%)

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.

Aa6.23:1 Good#F9B1B7 on #5C321B
Aa6.23:1 Good#5C321B on #F9B1B7
Aa4.48:1 Poor#F382B0 on #5C321B
Aa4.48:1 Poor#5C321B on #F382B0
Aa4.19:1 Poor#F9B1B7 on #833E6B
Aa4.19:1 Poor#833E6B on #F9B1B7
Aa3.01:1 Poor#833E6B on #F382B0
Aa3.01:1 Poor#F382B0 on #833E6B

Color blindness preview

CSS variables

/* Poodle Skirt to Morocco — https://swatchly.xyz/palette/f9b1b7-833e6b-f382b0-5c321b-bd7165 */
:root {
  --poodle-skirt: #f9b1b7;
  --midnight-aubergine: #833e6b;
  --pinky: #f382b0;
  --count-chocula: #5c321b;
  --morocco: #bd7165;
}

Tailwind CSS v4

/* Poodle Skirt to Morocco — https://swatchly.xyz/palette/f9b1b7-833e6b-f382b0-5c321b-bd7165 */
@theme {
  --color-poodle-skirt: #f9b1b7;
  --color-poodle-skirt-50: #fff6f6;
  --color-poodle-skirt-100: #ffeaeb;
  --color-poodle-skirt-200: #ffcfd2;
  --color-poodle-skirt-300: #f9b1b7;
  --color-poodle-skirt-400: #d49298;
  --color-poodle-skirt-500: #b7757b;
  --color-poodle-skirt-600: #995a60;
  --color-poodle-skirt-700: #7d444a;
  --color-poodle-skirt-800: #643238;
  --color-poodle-skirt-900: #4e2429;
  --color-poodle-skirt-950: #321518;
  --color-midnight-aubergine: #833e6b;
  --color-midnight-aubergine-50: #fff0f9;
  --color-midnight-aubergine-100: #ffe1f2;
  --color-midnight-aubergine-200: #ffc4e7;
  --color-midnight-aubergine-300: #eeabd3;
  --color-midnight-aubergine-400: #d289b6;
  --color-midnight-aubergine-500: #b76e9c;
  --color-midnight-aubergine-600: #9b5481;
  --color-midnight-aubergine-700: #833e6b;
  --color-midnight-aubergine-800: #682f54;
  --color-midnight-aubergine-900: #522242;
  --color-midnight-aubergine-950: #36122a;
  --color-pinky: #f382b0;
  --color-pinky-50: #fff6f9;
  --color-pinky-100: #ffebf1;
  --color-pinky-200: #ffd0e0;
  --color-pinky-300: #ffafcd;
  --color-pinky-400: #f382b0;
  --color-pinky-500: #d16592;
  --color-pinky-600: #b14876;
  --color-pinky-700: #92315d;
  --color-pinky-800: #751f48;
  --color-pinky-900: #5c1337;
  --color-pinky-950: #3b0721;
  --color-count-chocula: #5c321b;
  --color-count-chocula-50: #fff2ec;
  --color-count-chocula-100: #ffe5d8;
  --color-count-chocula-200: #f5ceba;
  --color-count-chocula-300: #e2b59f;
  --color-count-chocula-400: #c4947b;
  --color-count-chocula-500: #a7775f;
  --color-count-chocula-600: #8a5d46;
  --color-count-chocula-700: #6f4732;
  --color-count-chocula-800: #5c321b;
  --color-count-chocula-900: #442818;
  --color-count-chocula-950: #2c170c;
  --color-morocco: #bd7165;
  --color-morocco-50: #fff2f0;
  --color-morocco-100: #ffe6e1;
  --color-morocco-200: #ffcbc1;
  --color-morocco-300: #f4afa3;
  --color-morocco-400: #d88d81;
  --color-morocco-500: #bd7165;
  --color-morocco-600: #9f574c;
  --color-morocco-700: #824137;
  --color-morocco-800: #693028;
  --color-morocco-900: #53231c;
  --color-morocco-950: #36130f;
}