Shibori Cloth
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
Like fabric pulled from a dye vat, this palette is one pigment at different exposures: indigo at full depth, ultramarine after a shorter soak, mist where the resist held, cotton where the cloth stayed bound. Because everything shares the same blue-violet root, harmony is structural rather than stylistic. Midnight adds a text-safe near-black that still reads as dye instead of printer ink.
Built around Indigo.
Use this palette
- #4b0082indigo
- #45549eultramarine
- #a9b4d8mist
- #f6f7f4cotton
- #23204amidnight
The variables, doing badge duty
:root {
--color-indigo: #4b0082;
--color-ultramarine: #45549e;
--color-mist: #a9b4d8;
--color-cotton: #f6f7f4;
--color-midnight: #23204a;
}In Shibori Cloth's world
@theme {
--color-indigo: #4b0082;
--color-ultramarine: #45549e;
--color-mist: #a9b4d8;
--color-cotton: #f6f7f4;
--color-midnight: #23204a;
}{
"name": "Shibori Cloth",
"colors": [
{
"hex": "#4b0082",
"role": "indigo"
},
{
"hex": "#45549e",
"role": "ultramarine"
},
{
"hex": "#a9b4d8",
"role": "mist"
},
{
"hex": "#f6f7f4",
"role": "cotton"
},
{
"hex": "#23204a",
"role": "midnight"
}
]
}