Utility Canvas
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 is workwear translated to the screen: khaki and canvas as the warm fabric grounds, navy as the chore-coat mid-dark, and one safety-orange accent doing the job of a stitched label. Warm tan against cool navy is a temperature contrast that stays professional because both sides are heavily muted; only the orange is allowed real saturation, which makes calls-to-action unmissable. Charcoal handles body text more softly than black on the warm background.
Built around Khaki.
Use this palette
- #c3b091khaki
- #f4f1e9canvas
- #2f3d54navy
- #d2622aorange
- #2b2b28charcoal
The variables, doing badge duty
:root {
--color-khaki: #c3b091;
--color-canvas: #f4f1e9;
--color-navy: #2f3d54;
--color-orange: #d2622a;
--color-charcoal: #2b2b28;
}In Utility Canvas's world
@theme {
--color-khaki: #c3b091;
--color-canvas: #f4f1e9;
--color-navy: #2f3d54;
--color-orange: #d2622a;
--color-charcoal: #2b2b28;
}{
"name": "Utility Canvas",
"colors": [
{
"hex": "#c3b091",
"role": "khaki"
},
{
"hex": "#f4f1e9",
"role": "canvas"
},
{
"hex": "#2f3d54",
"role": "navy"
},
{
"hex": "#d2622a",
"role": "orange"
},
{
"hex": "#2b2b28",
"role": "charcoal"
}
]
}