Violet Bloom color palette
It starts at an indigo-leaning violet, #5C16C5, and lightens through purple #8338EC and a dustier orchid, #A663CC, to lavender and pale lilac #E9D5FF. The orchid is less saturated than its neighbors, which softens the middle of the ramp. The set feels creative and a little futuristic. AI startups and design agencies with a modern look are good candidates.
Violet Bloom palette in use
Light backgrounds go in #E9D5FF, and text and headings in #5C16C5. #8338EC is the primary button color, with #C084FC for hover states and #A663CC for tags and illustrations.
This pair measures 6.49:1, so it works for body text too. The button uses #8338EC with white text.
ButtonGood for
- AI startup landing page
- Design agency portfolio
- Tech conference branding
- Meditation app
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 |
|---|---|---|---|
#5C16C5 | #E9D5FF | 6.49:1 | AA |
#8338EC | #E9D5FF | 4.12:1 | AA large |
#5C16C5 | #C084FC | 3.34:1 | AA large |
Violet Bloom palette as code
CSS variables
:root {
--violet-bloom-1: #5C16C5;
--violet-bloom-2: #8338EC;
--violet-bloom-3: #A663CC;
--violet-bloom-4: #C084FC;
--violet-bloom-5: #E9D5FF;
}Tailwind v4
@theme {
--color-violet-bloom-1: #5C16C5;
--color-violet-bloom-2: #8338EC;
--color-violet-bloom-3: #A663CC;
--color-violet-bloom-4: #C084FC;
--color-violet-bloom-5: #E9D5FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'violet-bloom': {
100: '#5C16C5',
200: '#8338EC',
300: '#A663CC',
400: '#C084FC',
500: '#E9D5FF',
},SCSS
$violet-bloom-1: #5C16C5;
$violet-bloom-2: #8338EC;
$violet-bloom-3: #A663CC;
$violet-bloom-4: #C084FC;
$violet-bloom-5: #E9D5FF;JSON
["#5C16C5","#8338EC","#A663CC","#C084FC","#E9D5FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.