Spearmint Fizz
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
This runs on a 1950s soda-fountain logic: cool mint tones in two strengths, one hot coral accent, and navy standing in for black. Coral is close to mint's true complement, so calls-to-action snap forward from the cool field, while jade gives the green range a mid value so illustrations aren't stuck between pale and dark. Navy keeps the contrast friendly where pure black would feel harsh.
Built around Mint Green.
Use this palette
- #aaf0d0spearmint
- #f2fbf7soda
- #63c9a8jade
- #ff6f61coral
- #1f3a5fnavy
The variables, doing badge duty
:root {
--color-spearmint: #aaf0d0;
--color-soda: #f2fbf7;
--color-jade: #63c9a8;
--color-coral: #ff6f61;
--color-navy: #1f3a5f;
}In Spearmint Fizz's world
@theme {
--color-spearmint: #aaf0d0;
--color-soda: #f2fbf7;
--color-jade: #63c9a8;
--color-coral: #ff6f61;
--color-navy: #1f3a5f;
}{
"name": "Spearmint Fizz",
"colors": [
{
"hex": "#aaf0d0",
"role": "spearmint"
},
{
"hex": "#f2fbf7",
"role": "soda"
},
{
"hex": "#63c9a8",
"role": "jade"
},
{
"hex": "#ff6f61",
"role": "coral"
},
{
"hex": "#1f3a5f",
"role": "navy"
}
]
}