Cobalt Drizzle
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
Cool gray, mist, and paper are one blue-gray hue sliced into three interface-ready values, so backgrounds, cards, and dividers come pre-coordinated. Cobalt is not a departure from that hue — it is the same blue undertone pushed to full saturation, which is why it feels inevitable rather than bolted on. Asphalt gives the dark end enough blue to stay in the same weather system.
Built around Cool Gray.
Use this palette
- #9aa2abdrizzle
- #d6dademist
- #f2f4f5paper
- #2f5da8cobalt
- #33383easphalt
The variables, doing badge duty
:root {
--color-drizzle: #9aa2ab;
--color-mist: #d6dade;
--color-paper: #f2f4f5;
--color-cobalt: #2f5da8;
--color-asphalt: #33383e;
}In Cobalt Drizzle's world
@theme {
--color-drizzle: #9aa2ab;
--color-mist: #d6dade;
--color-paper: #f2f4f5;
--color-cobalt: #2f5da8;
--color-asphalt: #33383e;
}{
"name": "Cobalt Drizzle",
"colors": [
{
"hex": "#9aa2ab",
"role": "drizzle"
},
{
"hex": "#d6dade",
"role": "mist"
},
{
"hex": "#f2f4f5",
"role": "paper"
},
{
"hex": "#2f5da8",
"role": "cobalt"
},
{
"hex": "#33383e",
"role": "asphalt"
}
]
}