Poodle Skirt to Queen of the Night Shift color palette

About this palette

Poodle Skirt to Queen of the Night Shift is a 4-color vintage, gradient palette: #FFA7BC (Poodle Skirt), #BC85AA (Romanov Mauve), #7D6296 (Muted Purple), #423F80 (Queen of the Night Shift). It mixes pink, purple tones and feels balanced overall. The strongest text pairing is #FFA7BC on #423F80 with a contrast ratio of 5.10:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Poodle Skirtrgb(255, 167, 188)hsl(346, 100%, 83%)
Romanov Mauvergb(188, 133, 170)hsl(320, 29%, 63%)
Muted Purplergb(125, 98, 150)hsl(271, 21%, 49%)
Queen of the Night Shiftrgb(66, 63, 128)hsl(243, 34%, 37%)

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.

  • Aa5.10:1 Good#FFA7BC on #423F80
  • Aa5.10:1 Good#423F80 on #FFA7BC
  • Aa3.14:1 Poor#BC85AA on #423F80
  • Aa3.14:1 Poor#423F80 on #BC85AA

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Poodle Skirt to Queen of the Night Shift — https://swatchly.xyz/palette/ffa7bc-bc85aa-7d6296-423f80 */
:root {
  --poodle-skirt: #ffa7bc;
  --romanov-mauve: #bc85aa;
  --muted-purple: #7d6296;
  --queen-of-the-night-shift: #423f80;
}

Tailwind CSS v4

/* Poodle Skirt to Queen of the Night Shift — https://swatchly.xyz/palette/ffa7bc-bc85aa-7d6296-423f80 */
@theme {
  --color-poodle-skirt: #ffa7bc;
  --color-poodle-skirt-50: #fff3f6;
  --color-poodle-skirt-100: #ffe6eb;
  --color-poodle-skirt-200: #ffcad5;
  --color-poodle-skirt-300: #ffa7bc;
  --color-poodle-skirt-400: #da899d;
  --color-poodle-skirt-500: #bd6c81;
  --color-poodle-skirt-600: #9f5166;
  --color-poodle-skirt-700: #823c50;
  --color-poodle-skirt-800: #692b3d;
  --color-poodle-skirt-900: #521f2e;
  --color-poodle-skirt-950: #36111c;
  --color-romanov-mauve: #bc85aa;
  --color-romanov-mauve-50: #ffecf8;
  --color-romanov-mauve-100: #ffdaf2;
  --color-romanov-mauve-200: #efc2e0;
  --color-romanov-mauve-300: #daa8c9;
  --color-romanov-mauve-400: #bc85aa;
  --color-romanov-mauve-500: #a16c90;
  --color-romanov-mauve-600: #855476;
  --color-romanov-mauve-700: #6d405f;
  --color-romanov-mauve-800: #58314c;
  --color-romanov-mauve-900: #46253c;
  --color-romanov-mauve-950: #2e1627;
  --color-muted-purple: #7d6296;
  --color-muted-purple-50: #f8f2ff;
  --color-muted-purple-100: #f2e6ff;
  --color-muted-purple-200: #e4cff9;
  --color-muted-purple-300: #d0b7e8;
  --color-muted-purple-400: #b297cc;
  --color-muted-purple-500: #977cb1;
  --color-muted-purple-600: #7d6296;
  --color-muted-purple-700: #644c7b;
  --color-muted-purple-800: #4f3a63;
  --color-muted-purple-900: #3d2b4e;
  --color-muted-purple-950: #271932;
  --color-queen-of-the-night-shift: #423f80;
  --color-queen-of-the-night-shift-50: #f3f4ff;
  --color-queen-of-the-night-shift-100: #e8e9ff;
  --color-queen-of-the-night-shift-200: #d1d3ff;
  --color-queen-of-the-night-shift-300: #b9bbfc;
  --color-queen-of-the-night-shift-400: #9b9ce2;
  --color-queen-of-the-night-shift-500: #8181c8;
  --color-queen-of-the-night-shift-600: #6868ac;
  --color-queen-of-the-night-shift-700: #535291;
  --color-queen-of-the-night-shift-800: #423f80;
  --color-queen-of-the-night-shift-900: #333161;
  --color-queen-of-the-night-shift-950: #1f1e41;
}

Similar palettes