Vibrant Velvet to Her Majesty Color Palette

About this palette

Vibrant Velvet to Her Majesty is a 5-color vibrant, warm, neon palette: #C00D8D (Vibrant Velvet), #9E7A00 (Bronze), #747EFF (Orchid), #FF88A6 (Strawberry Dreams), #FFA5A3 (Her Majesty). It mixes red, yellow, purple, pink tones and feels warm overall. The strongest text pairing is #C00D8D on #FFA5A3 with a contrast ratio of 3.03:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Vibrant Velvet	rgb(192, 13, 141)	hsl(317, 87%, 40%)
Bronze	rgb(158, 122, 0)	hsl(46, 100%, 31%)
Orchid	rgb(116, 126, 255)	hsl(236, 100%, 73%)
Strawberry Dreams	rgb(255, 136, 166)	hsl(345, 100%, 77%)
Her Majesty	rgb(255, 165, 163)	hsl(1, 100%, 82%)

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.

Aa3.03:1 Poor#C00D8D on #FFA5A3
Aa3.03:1 Poor#FFA5A3 on #C00D8D

Color blindness preview

CSS variables

/* Vibrant Velvet to Her Majesty — https://swatchly.xyz/palette/c00d8d-9e7a00-747eff-ff88a6-ffa5a3 */
:root {
  --vibrant-velvet: #c00d8d;
  --bronze: #9e7a00;
  --orchid: #747eff;
  --strawberry-dreams: #ff88a6;
  --her-majesty: #ffa5a3;
}

Tailwind CSS v4

/* Vibrant Velvet to Her Majesty — https://swatchly.xyz/palette/c00d8d-9e7a00-747eff-ff88a6-ffa5a3 */
@theme {
  --color-vibrant-velvet: #c00d8d;
  --color-vibrant-velvet-50: #fff0f8;
  --color-vibrant-velvet-100: #ffe3f2;
  --color-vibrant-velvet-200: #ffc5e5;
  --color-vibrant-velvet-300: #ff9fd7;
  --color-vibrant-velvet-400: #fb60c3;
  --color-vibrant-velvet-500: #df3ba8;
  --color-vibrant-velvet-600: #c00d8d;
  --color-vibrant-velvet-700: #9b0071;
  --color-vibrant-velvet-800: #7b0059;
  --color-vibrant-velvet-900: #600044;
  --color-vibrant-velvet-950: #3f002b;
  --color-bronze: #9e7a00;
  --color-bronze-50: #fff3d7;
  --color-bronze-100: #ffe7ad;
  --color-bronze-200: #eed18c;
  --color-bronze-300: #d9b868;
  --color-bronze-400: #bb9738;
  --color-bronze-500: #9e7a00;
  --color-bronze-600: #806200;
  --color-bronze-700: #664d00;
  --color-bronze-800: #503c00;
  --color-bronze-900: #3f2e00;
  --color-bronze-950: #281d00;
  --color-orchid: #747eff;
  --color-orchid-50: #f4f6ff;
  --color-orchid-100: #eaedff;
  --color-orchid-200: #d3daff;
  --color-orchid-300: #b8c3ff;
  --color-orchid-400: #93a0ff;
  --color-orchid-500: #747eff;
  --color-orchid-600: #5a60dd;
  --color-orchid-700: #4647bb;
  --color-orchid-800: #35349a;
  --color-orchid-900: #27247c;
  --color-orchid-950: #171453;
  --color-strawberry-dreams: #ff88a6;
  --color-strawberry-dreams-50: #ffe7eb;
  --color-strawberry-dreams-100: #ffd5dd;
  --color-strawberry-dreams-200: #ffb3c3;
  --color-strawberry-dreams-300: #ff88a6;
  --color-strawberry-dreams-400: #dd6c8a;
  --color-strawberry-dreams-500: #c25271;
  --color-strawberry-dreams-600: #a43a5a;
  --color-strawberry-dreams-700: #892847;
  --color-strawberry-dreams-800: #711a38;
  --color-strawberry-dreams-900: #5c112b;
  --color-strawberry-dreams-950: #3d061a;
  --color-her-majesty: #ffa5a3;
  --color-her-majesty-50: #fff2f1;
  --color-her-majesty-100: #ffe4e3;
  --color-her-majesty-200: #ffc8c6;
  --color-her-majesty-300: #ffa5a3;
  --color-her-majesty-400: #db8786;
  --color-her-majesty-500: #be6b6a;
  --color-her-majesty-600: #a05151;
  --color-her-majesty-700: #843c3d;
  --color-her-majesty-800: #6a2c2d;
  --color-her-majesty-900: #541f21;
  --color-her-majesty-950: #371112;
}