Mauve and Moss
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
Mauve and moss are near-complements — red-violet and yellow-green — but both are so heavily grayed that the opposition reads as quiet tension instead of contrast, like dried flowers against eucalyptus. Petal gives mauve a lighter register for backgrounds, ivory keeps the whole thing warm, and graphite's violet undertone ties the dark back to the anchor. A florist's palette, equally at home on a wall or an invitation suite.
Built around Mauve.
Use this palette
- #b784a7mauve
- #7d8f69moss
- #f6f2eeivory
- #3d3a43graphite
- #d9c1cfpetal
The variables, doing badge duty
:root {
--color-mauve: #b784a7;
--color-moss: #7d8f69;
--color-ivory: #f6f2ee;
--color-graphite: #3d3a43;
--color-petal: #d9c1cf;
}In Mauve and Moss's world
@theme {
--color-mauve: #b784a7;
--color-moss: #7d8f69;
--color-ivory: #f6f2ee;
--color-graphite: #3d3a43;
--color-petal: #d9c1cf;
}{
"name": "Mauve and Moss",
"colors": [
{
"hex": "#b784a7",
"role": "mauve"
},
{
"hex": "#7d8f69",
"role": "moss"
},
{
"hex": "#f6f2ee",
"role": "ivory"
},
{
"hex": "#3d3a43",
"role": "graphite"
},
{
"hex": "#d9c1cf",
"role": "petal"
}
]
}