Start generating

Pink Champagne to Midnight Velvet color palette

E1E1FFPink ChampagneA4A2C3Imperial Lilac8B7CB4Aster6B5CA5Prophet Violet544B70Haunted Candelabra2B2640Midnight Velvet
Open in generator Export PNG, PDF, ASE…

About this palette

Pink Champagne to Midnight Velvet is a 6-color cool, monochromatic palette: #E1E1FF (Pink Champagne), #A4A2C3 (Imperial Lilac), #8B7CB4 (Aster), #6B5CA5 (Prophet Violet), #544B70 (Haunted Candelabra), #2B2640 (Midnight Velvet). It mixes purple tones and feels cool overall. The strongest text pairing is #E1E1FF on #2B2640 with a contrast ratio of 11.29:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pink Champagnergb(225, 225, 255)hsl(240, 100%, 94%)
Imperial Lilacrgb(164, 162, 195)hsl(244, 22%, 70%)
Asterrgb(139, 124, 180)hsl(256, 27%, 60%)
Prophet Violetrgb(107, 92, 165)hsl(252, 29%, 50%)
Haunted Candelabrargb(84, 75, 112)hsl(255, 20%, 37%)
Midnight Velvetrgb(43, 38, 64)hsl(252, 25%, 20%)

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.

  • Aa11.29:1 Very good#E1E1FF on #2B2640
  • Aa11.29:1 Very good#2B2640 on #E1E1FF
  • Aa6.27:1 Good#E1E1FF on #544B70
  • Aa6.27:1 Good#544B70 on #E1E1FF
  • Aa5.87:1 Good#A4A2C3 on #2B2640
  • Aa5.87:1 Good#2B2640 on #A4A2C3
  • Aa4.44:1 Poor#E1E1FF on #6B5CA5
  • Aa4.44:1 Poor#6B5CA5 on #E1E1FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pink Champagne to Midnight Velvet — https://swatchly.xyz/palette/e1e1ff-a4a2c3-8b7cb4-6b5ca5-544b70-2b2640 */
:root {
  --pink-champagne: #e1e1ff;
  --imperial-lilac: #a4a2c3;
  --aster: #8b7cb4;
  --prophet-violet: #6b5ca5;
  --haunted-candelabra: #544b70;
  --midnight-velvet: #2b2640;
}

Tailwind CSS v4

/* Pink Champagne to Midnight Velvet — https://swatchly.xyz/palette/e1e1ff-a4a2c3-8b7cb4-6b5ca5-544b70-2b2640 */
@theme {
  --color-pink-champagne: #e1e1ff;
  --color-pink-champagne-50: #ededff;
  --color-pink-champagne-100: #e1e1ff;
  --color-pink-champagne-200: #cfcfe6;
  --color-pink-champagne-300: #babad3;
  --color-pink-champagne-400: #9b9bb6;
  --color-pink-champagne-500: #81819c;
  --color-pink-champagne-600: #686881;
  --color-pink-champagne-700: #53536a;
  --color-pink-champagne-800: #404054;
  --color-pink-champagne-900: #313142;
  --color-pink-champagne-950: #1e1e2a;
  --color-imperial-lilac: #a4a2c3;
  --color-imperial-lilac-50: #f6f6ff;
  --color-imperial-lilac-100: #ecebff;
  --color-imperial-lilac-200: #d9d8f1;
  --color-imperial-lilac-300: #c3c1de;
  --color-imperial-lilac-400: #a4a2c3;
  --color-imperial-lilac-500: #8886a6;
  --color-imperial-lilac-600: #6d6b89;
  --color-imperial-lilac-700: #56546f;
  --color-imperial-lilac-800: #424058;
  --color-imperial-lilac-900: #323145;
  --color-imperial-lilac-950: #1e1d2c;
  --color-aster: #8b7cb4;
  --color-aster-50: #f6f3ff;
  --color-aster-100: #ede7ff;
  --color-aster-200: #dbd0fd;
  --color-aster-300: #c5b8eb;
  --color-aster-400: #a698cf;
  --color-aster-500: #8b7cb4;
  --color-aster-600: #706297;
  --color-aster-700: #5a4c7c;
  --color-aster-800: #463a64;
  --color-aster-900: #362c4f;
  --color-aster-950: #221a33;
  --color-prophet-violet: #6b5ca5;
  --color-prophet-violet-50: #f5f4ff;
  --color-prophet-violet-100: #eae7ff;
  --color-prophet-violet-200: #d6d0ff;
  --color-prophet-violet-300: #c0b5fa;
  --color-prophet-violet-400: #a193de;
  --color-prophet-violet-500: #8577c2;
  --color-prophet-violet-600: #6b5ca5;
  --color-prophet-violet-700: #554788;
  --color-prophet-violet-800: #42366e;
  --color-prophet-violet-900: #332858;
  --color-prophet-violet-950: #20183a;
  --color-haunted-candelabra: #544b70;
  --color-haunted-candelabra-50: #f6f3ff;
  --color-haunted-candelabra-100: #ece7ff;
  --color-haunted-candelabra-200: #d8d2f2;
  --color-haunted-candelabra-300: #c1b9df;
  --color-haunted-candelabra-400: #a299c1;
  --color-haunted-candelabra-500: #867da5;
  --color-haunted-candelabra-600: #6b6288;
  --color-haunted-candelabra-700: #544b70;
  --color-haunted-candelabra-800: #413a57;
  --color-haunted-candelabra-900: #322c45;
  --color-haunted-candelabra-950: #1f1a2c;
  --color-midnight-velvet: #2b2640;
  --color-midnight-velvet-50: #f5f3ff;
  --color-midnight-velvet-100: #ebe8fe;
  --color-midnight-velvet-200: #d7d4ed;
  --color-midnight-velvet-300: #c1bdd9;
  --color-midnight-velvet-400: #a09bba;
  --color-midnight-velvet-500: #837e9d;
  --color-midnight-velvet-600: #676380;
  --color-midnight-velvet-700: #4f4b65;
  --color-midnight-velvet-800: #3b384d;
  --color-midnight-velvet-900: #2b2640;
  --color-midnight-velvet-950: #191723;
}

Similar palettes