Glacier Melt

freshcalmminimal

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 started

Fast

Ships static, loads instantly.

Honest

Every choice explained.

Drag to place · tap to copy

How the preview picks colors: the lightest swatch becomes the page background, the darkest becomes the text, and the most vivid becomes the button. Drag a chip onto any part of the mockup to override it — your arrangement is saved into this page's URL, so copying the link shares it.

Why it works

Everything here is drawn from meltwater: snow, ice, aqua and fjord form a single cool gradient from white to deep blue-teal, which guarantees harmony because hue barely shifts while value does all the work. Aqua is the saturation peak and should mark interactive moments; fjord and slate carry structure and text. A natural fit for climate, fintech and health products that want clean without feeling sterile.

Built around Aqua.

Use this palette

Hex values
#00c2c7, #bfeef0, #31708e, #f5fbfc, #274653
CSS custom properties
:root {
  --color-aqua: #00c2c7;
  --color-ice: #bfeef0;
  --color-fjord: #31708e;
  --color-snow: #f5fbfc;
  --color-slate: #274653;
}
Tailwind v4 theme
@theme {
  --color-aqua: #00c2c7;
  --color-ice: #bfeef0;
  --color-fjord: #31708e;
  --color-snow: #f5fbfc;
  --color-slate: #274653;
}
JSON
{
  "name": "Glacier Melt",
  "colors": [
    {
      "hex": "#00c2c7",
      "role": "aqua"
    },
    {
      "hex": "#bfeef0",
      "role": "ice"
    },
    {
      "hex": "#31708e",
      "role": "fjord"
    },
    {
      "hex": "#f5fbfc",
      "role": "snow"
    },
    {
      "hex": "#274653",
      "role": "slate"
    }
  ]
}

Related palettes