African Violet
Click any swatch to copy its hex.
See it in place
Design that earns its keep
A tiny landing page, painted entirely with this palette so you can judge it doing real work.
Get startedFast
Ships static, loads instantly.
Honest
Every choice explained.
How the preview picks colors: the lightest swatch becomes the page background, the darkest becomes the text, and the most vivid becomes the button. To override: tap a chip to arm it, then click any outlined part of the mockup to paint (or drag the chip there). Your arrangement is saved into this page's URL, so copying the link shares it.
Why it works
Taken straight from the houseplant: saturated violet petals against soft green leaves, a pairing nature uses constantly because violet and green sit far apart on the wheel without being hostile complements. Lilac gives the flower color a gentle tint for large areas, cream keeps the ground warm, and aubergine supplies a dark that stays inside the violet family. Vivid but botanical — energetic without going neon.
Built around Violet.
Use this palette
- #7f00ffviolet
- #8bbf6aleaf
- #fdf8f0cream
- #3c1053aubergine
- #cdaef0lilac
The variables, doing badge duty
:root {
--color-violet: #7f00ff;
--color-leaf: #8bbf6a;
--color-cream: #fdf8f0;
--color-aubergine: #3c1053;
--color-lilac: #cdaef0;
}In African Violet's world
@theme {
--color-violet: #7f00ff;
--color-leaf: #8bbf6a;
--color-cream: #fdf8f0;
--color-aubergine: #3c1053;
--color-lilac: #cdaef0;
}{
"name": "African Violet",
"colors": [
{
"hex": "#7f00ff",
"role": "violet"
},
{
"hex": "#8bbf6a",
"role": "leaf"
},
{
"hex": "#fdf8f0",
"role": "cream"
},
{
"hex": "#3c1053",
"role": "aubergine"
},
{
"hex": "#cdaef0",
"role": "lilac"
}
]
}