Rosewater Tea

pastelcalmwarm

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

Built like a cup of rose tea — milk to petal to rose in ascending saturation — with a sage leaf note for contrast. Keeping the green as muted as the pink is the trick; a brighter green would snap the spell. The cocoa neutral is warm-toned on purpose, since charcoal would feel borrowed from a different palette.

Built around Dusty Rose.

Use this palette

Hex values
#c9a0a0, #e7d3cf, #faf5f3, #9caf88, #5a4a4a
CSS custom properties
:root {
  --color-rose: #c9a0a0;
  --color-petal: #e7d3cf;
  --color-milk: #faf5f3;
  --color-leaf: #9caf88;
  --color-cocoa: #5a4a4a;
}
Tailwind v4 theme
@theme {
  --color-rose: #c9a0a0;
  --color-petal: #e7d3cf;
  --color-milk: #faf5f3;
  --color-leaf: #9caf88;
  --color-cocoa: #5a4a4a;
}
JSON
{
  "name": "Rosewater Tea",
  "colors": [
    {
      "hex": "#c9a0a0",
      "role": "rose"
    },
    {
      "hex": "#e7d3cf",
      "role": "petal"
    },
    {
      "hex": "#faf5f3",
      "role": "milk"
    },
    {
      "hex": "#9caf88",
      "role": "leaf"
    },
    {
      "hex": "#5a4a4a",
      "role": "cocoa"
    }
  ]
}

Related palettes