Seafoam Drift
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
The harmony here is the shoreline's own: cool seafoam and surf on one side, warm sand and driftwood on the other, meeting at the same gentle saturation the way water meets beach. That warm-cool balance keeps an all-pale scheme from feeling cold or clinical. Depth — a blue slid toward seafoam's own blue-green — supplies the dark value the pastels lack, so text and details hold up.
Built around Seafoam.
Use this palette
- #9fe2bfseafoam
- #d8f2e6surf
- #ece3d1sand
- #ab9078driftwood
- #1c3b4adepth
The variables, doing badge duty
:root {
--color-seafoam: #9fe2bf;
--color-surf: #d8f2e6;
--color-sand: #ece3d1;
--color-driftwood: #ab9078;
--color-depth: #1c3b4a;
}In Seafoam Drift's world
@theme {
--color-seafoam: #9fe2bf;
--color-surf: #d8f2e6;
--color-sand: #ece3d1;
--color-driftwood: #ab9078;
--color-depth: #1c3b4a;
}{
"name": "Seafoam Drift",
"colors": [
{
"hex": "#9fe2bf",
"role": "seafoam"
},
{
"hex": "#d8f2e6",
"role": "surf"
},
{
"hex": "#ece3d1",
"role": "sand"
},
{
"hex": "#ab9078",
"role": "driftwood"
},
{
"hex": "#1c3b4a",
"role": "depth"
}
]
}