Velvet Lounge color palette
Plush and theatrical. Five magentas start at a near-black wine, #3D0034, and climb through plum and fuchsia to a glowing orchid, #E666E0. The saturation stays high, so even the darkest shade feels like velvet. It belongs on dark backgrounds, where the brighter magentas look lit by stage lights. Cabaret shows and cocktail lounges are its natural setting.
Velvet Lounge palette in use
Against a #3D0034 background, set headings and text in #E666E0. #CC00B8 makes the button color, #A0008C the hover state, and #700060 suits cards and modals.
This pair measures 5.88:1, so it works for body text too. The button uses #CC00B8 with white text.
ButtonGood for
- Cabaret show poster
- Cocktail lounge menu
- Drag event flyer
- Indie music label
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#3D0034 | #E666E0 | 5.88:1 | AA |
#700060 | #E666E0 | 3.95:1 | AA large |
#3D0034 | #CC00B8 | 3.41:1 | AA large |
Velvet Lounge palette as code
CSS variables
:root {
--velvet-lounge-1: #3D0034;
--velvet-lounge-2: #700060;
--velvet-lounge-3: #A0008C;
--velvet-lounge-4: #CC00B8;
--velvet-lounge-5: #E666E0;
}Tailwind v4
@theme {
--color-velvet-lounge-1: #3D0034;
--color-velvet-lounge-2: #700060;
--color-velvet-lounge-3: #A0008C;
--color-velvet-lounge-4: #CC00B8;
--color-velvet-lounge-5: #E666E0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'velvet-lounge': {
100: '#3D0034',
200: '#700060',
300: '#A0008C',
400: '#CC00B8',
500: '#E666E0',
},SCSS
$velvet-lounge-1: #3D0034;
$velvet-lounge-2: #700060;
$velvet-lounge-3: #A0008C;
$velvet-lounge-4: #CC00B8;
$velvet-lounge-5: #E666E0;JSON
["#3D0034","#700060","#A0008C","#CC00B8","#E666E0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.