Dark Roast Marigold
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
Espresso against marigold is a bee-and-coffee-bean contrast: the near-black brown makes the golden yellow look lit from within, and the yellow returns the favor by making the brown feel rich instead of heavy. Stone is the crucial mediator — a gray-taupe that quiets the middle values so the two stars keep the stage. Bark extends the dark end for text on oat-milk backgrounds, giving the system real front-end utility.
Built around Espresso.
Use this palette
- #3c2a21espresso
- #e2a33bmarigold
- #f4ecdfoat-milk
- #9b8b79stone
- #241a15bark
The variables, doing badge duty
:root {
--color-espresso: #3c2a21;
--color-marigold: #e2a33b;
--color-oat-milk: #f4ecdf;
--color-stone: #9b8b79;
--color-bark: #241a15;
}In Dark Roast Marigold's world
@theme {
--color-espresso: #3c2a21;
--color-marigold: #e2a33b;
--color-oat-milk: #f4ecdf;
--color-stone: #9b8b79;
--color-bark: #241a15;
}{
"name": "Dark Roast Marigold",
"colors": [
{
"hex": "#3c2a21",
"role": "espresso"
},
{
"hex": "#e2a33b",
"role": "marigold"
},
{
"hex": "#f4ecdf",
"role": "oat-milk"
},
{
"hex": "#9b8b79",
"role": "stone"
},
{
"hex": "#241a15",
"role": "bark"
}
]
}