After hours color palette
Lilac on deep indigo. Moody and atmospheric while text stays bright and readable.
Best for: Music, events, creative apps
- Background
#171b29 - Surface
#252b3e - Text
#f1edff - Accent
#b7a0ef - Muted text
#abb2ca
After hours on a real website
Colorit's example site restyled with this palette. Balanced keeps surfaces close to the background; Expressive tints cards and sections with the accent. Your own site looks different: capture it to see.
Readable by design
Colorit turns the five colors into a full theme and checks each text pair. Ratios of 4.5:1 and above meet WCAG AA for body text.
| Pair | Contrast |
|---|---|
| Text on background | 14.9:1 |
| Muted text on background | 8.1:1 |
| Button text on accent | 8.2:1 |
| Text on cards | 10.3:1 |
Use the After hours palette in code
The five colors as CSS variables and as a Tailwind v4 theme. For the full semantic theme (surfaces, borders, button states) as shadcn/ui, Tailwind or CSS, open it in the free theme generator. A prompt for your coding tool, made for your own captured site, comes with Colorit Pro.
:root {
--color-1: #171b29;
--color-2: #252b3e;
--color-3: #f1edff;
--color-4: #b7a0ef;
--color-5: #abb2ca;
}
@theme {
--color-1: #171b29;
--color-2: #252b3e;
--color-3: #f1edff;
--color-4: #b7a0ef;
--color-5: #abb2ca;
}