Jewel Box
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
Emerald, gilt and garnet are all gemstone hues, and setting them on midnight does what a jeweler's velvet tray does — deep blue-black makes each stone read brighter than it would on white. Green and garnet-red are complements, but midnight separates them so they flatter instead of vibrate. Ivory is the invitation-stock neutral that lets the scheme move onto paper.
Built around Emerald.
Use this palette
- #50c878emerald
- #14213dmidnight
- #d4af37gilt
- #f5f1e8ivory
- #7b2d43garnet
The variables, doing badge duty
:root {
--color-emerald: #50c878;
--color-midnight: #14213d;
--color-gilt: #d4af37;
--color-ivory: #f5f1e8;
--color-garnet: #7b2d43;
}In Jewel Box's world
@theme {
--color-emerald: #50c878;
--color-midnight: #14213d;
--color-gilt: #d4af37;
--color-ivory: #f5f1e8;
--color-garnet: #7b2d43;
}{
"name": "Jewel Box",
"colors": [
{
"hex": "#50c878",
"role": "emerald"
},
{
"hex": "#14213d",
"role": "midnight"
},
{
"hex": "#d4af37",
"role": "gilt"
},
{
"hex": "#f5f1e8",
"role": "ivory"
},
{
"hex": "#7b2d43",
"role": "garnet"
}
]
}