Dusk color palette
The last light after sunset, when the sky turns from violet to a near-black indigo. #2C1654 and #4A1A7C are deep and inky, #7B2FBE is a rich purple, and #B879F0 and #E4C1F9 hold the glow. Most of the weight is dark, so this leans toward night themes. Astrology and sleep apps are where it fits most naturally.
Dusk palette in use
With #2C1654 as the background, #E4C1F9 handles body text. #B879F0 suits buttons and links, #4A1A7C cards and modals, and #7B2FBE active states.
This pair measures 9.84:1, so it works for body text too. The button uses #7B2FBE with white text.
ButtonGood for
- Astrology app
- Sleep tracker interface
- Evening gala invitation
- Poetry journal cover
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 |
|---|---|---|---|
#2C1654 | #E4C1F9 | 9.84:1 | AAA |
#4A1A7C | #E4C1F9 | 7.68:1 | AAA |
#2C1654 | #B879F0 | 5.20:1 | AA |
#7B2FBE | #E4C1F9 | 4.44:1 | AA large |
#4A1A7C | #B879F0 | 4.06:1 | AA large |
Dusk palette as code
CSS variables
:root {
--dusk-1: #2C1654;
--dusk-2: #4A1A7C;
--dusk-3: #7B2FBE;
--dusk-4: #B879F0;
--dusk-5: #E4C1F9;
}Tailwind v4
@theme {
--color-dusk-1: #2C1654;
--color-dusk-2: #4A1A7C;
--color-dusk-3: #7B2FBE;
--color-dusk-4: #B879F0;
--color-dusk-5: #E4C1F9;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'dusk': {
100: '#2C1654',
200: '#4A1A7C',
300: '#7B2FBE',
400: '#B879F0',
500: '#E4C1F9',
},SCSS
$dusk-1: #2C1654;
$dusk-2: #4A1A7C;
$dusk-3: #7B2FBE;
$dusk-4: #B879F0;
$dusk-5: #E4C1F9;JSON
["#2C1654","#4A1A7C","#7B2FBE","#B879F0","#E4C1F9"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.