Midnight Velvet to Ballerina color palette

2E2247Midnight Velvet 3D346BHer Highness 605F27Reptile Revenge 549D80Natural Orchestra DA9ABCSweet Perfume F4CEDFBallerina

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Velvet to Ballerina is a 6-color vintage palette: #2E2247 (Midnight Velvet), #3D346B (Her Highness), #605F27 (Reptile Revenge), #549D80 (Natural Orchestra), #DA9ABC (Sweet Perfume), #F4CEDF (Ballerina). It mixes purple, brown, turquoise, pink tones and feels balanced overall. The strongest text pairing is #2E2247 on #F4CEDF with a contrast ratio of 10.27:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(46, 34, 71)	hsl(259, 35%, 21%)
Her Highness	rgb(61, 52, 107)	hsl(250, 35%, 31%)
Reptile Revenge	rgb(96, 95, 39)	hsl(59, 42%, 26%)
Natural Orchestra	rgb(84, 157, 128)	hsl(156, 30%, 47%)
Sweet Perfume	rgb(218, 154, 188)	hsl(328, 46%, 73%)
Ballerina	rgb(244, 206, 223)	hsl(333, 63%, 88%)

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.

Aa10.27:1 Very good#2E2247 on #F4CEDF
Aa10.27:1 Very good#F4CEDF on #2E2247
Aa7.75:1 Very good#3D346B on #F4CEDF
Aa7.75:1 Very good#F4CEDF on #3D346B
Aa6.50:1 Good#2E2247 on #DA9ABC
Aa6.50:1 Good#DA9ABC on #2E2247
Aa4.91:1 Good#3D346B on #DA9ABC
Aa4.91:1 Good#DA9ABC on #3D346B

Color blindness preview

CSS variables

/* Midnight Velvet to Ballerina — https://swatchly.xyz/palette/2e2247-3d346b-605f27-549d80-da9abc-f4cedf */
:root {
  --midnight-velvet: #2e2247;
  --her-highness: #3d346b;
  --reptile-revenge: #605f27;
  --natural-orchestra: #549d80;
  --sweet-perfume: #da9abc;
  --ballerina: #f4cedf;
}

Tailwind CSS v4

/* Midnight Velvet to Ballerina — https://swatchly.xyz/palette/2e2247-3d346b-605f27-549d80-da9abc-f4cedf */
@theme {
  --color-midnight-velvet: #2e2247;
  --color-midnight-velvet-50: #f6f3ff;
  --color-midnight-velvet-100: #ede7ff;
  --color-midnight-velvet-200: #dad1f5;
  --color-midnight-velvet-300: #c4bae2;
  --color-midnight-velvet-400: #a398c4;
  --color-midnight-velvet-500: #877ba6;
  --color-midnight-velvet-600: #6b5f88;
  --color-midnight-velvet-700: #52486c;
  --color-midnight-velvet-800: #3e3553;
  --color-midnight-velvet-900: #2e2247;
  --color-midnight-velvet-950: #1a1526;
  --color-her-highness: #3d346b;
  --color-her-highness-50: #f4f4ff;
  --color-her-highness-100: #eae8ff;
  --color-her-highness-200: #d5d2ff;
  --color-her-highness-300: #bdb8f1;
  --color-her-highness-400: #9d97d4;
  --color-her-highness-500: #817ab8;
  --color-her-highness-600: #676099;
  --color-her-highness-700: #50497d;
  --color-her-highness-800: #3d346b;
  --color-her-highness-900: #2e294e;
  --color-her-highness-950: #1c1833;
  --color-reptile-revenge: #605f27;
  --color-reptile-revenge-50: #f7f8d8;
  --color-reptile-revenge-100: #eeeeca;
  --color-reptile-revenge-200: #dcdcb1;
  --color-reptile-revenge-300: #c7c796;
  --color-reptile-revenge-400: #a9a973;
  --color-reptile-revenge-500: #8f8f57;
  --color-reptile-revenge-600: #76753e;
  --color-reptile-revenge-700: #605f27;
  --color-reptile-revenge-800: #4b4a1b;
  --color-reptile-revenge-900: #3a3910;
  --color-reptile-revenge-950: #242406;
  --color-natural-orchestra: #549d80;
  --color-natural-orchestra-50: #dffff0;
  --color-natural-orchestra-100: #cef9e5;
  --color-natural-orchestra-200: #b4e9d1;
  --color-natural-orchestra-300: #98d5ba;
  --color-natural-orchestra-400: #73b79b;
  --color-natural-orchestra-500: #549d80;
  --color-natural-orchestra-600: #378065;
  --color-natural-orchestra-700: #21674e;
  --color-natural-orchestra-800: #10513c;
  --color-natural-orchestra-900: #053f2d;
  --color-natural-orchestra-950: #00271a;
  --color-sweet-perfume: #da9abc;
  --color-sweet-perfume-50: #fff8fc;
  --color-sweet-perfume-100: #ffeef6;
  --color-sweet-perfume-200: #ffd4ea;
  --color-sweet-perfume-300: #f1bcd7;
  --color-sweet-perfume-400: #da9abc;
  --color-sweet-perfume-500: #b97c9d;
  --color-sweet-perfume-600: #9a5f80;
  --color-sweet-perfume-700: #7d4866;
  --color-sweet-perfume-800: #63354f;
  --color-sweet-perfume-900: #4d263c;
  --color-sweet-perfume-950: #301524;
  --color-ballerina: #f4cedf;
  --color-ballerina-50: #fff3f8;
  --color-ballerina-100: #fee6f0;
  --color-ballerina-200: #f4cedf;
  --color-ballerina-300: #d9b9c7;
  --color-ballerina-400: #ba98a8;
  --color-ballerina-500: #9e7c8c;
  --color-ballerina-600: #826271;
  --color-ballerina-700: #694c59;
  --color-ballerina-800: #533a46;
  --color-ballerina-900: #412b36;
  --color-ballerina-950: #291a21;
}