Mint Macaron

pastelfresh

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

Mint and rose are the patisserie pairing: near-complements diluted with the same amount of white, so they contrast in hue while matching perfectly in lightness. That equal-value softness is what makes the combination feel edible rather than jarring. Cocoa is the crucial fourth ingredient — a warm brown dark enough for lettering, echoing the chocolate that grounds every good macaron box.

Built around Mint Green.

Use this palette

Hex values
#aaf0d0, #fdf6ec, #f4a7b9, #5b3a29
CSS custom properties
:root {
  --color-mint: #aaf0d0;
  --color-sugar: #fdf6ec;
  --color-rose: #f4a7b9;
  --color-cocoa: #5b3a29;
}
Tailwind v4 theme
@theme {
  --color-mint: #aaf0d0;
  --color-sugar: #fdf6ec;
  --color-rose: #f4a7b9;
  --color-cocoa: #5b3a29;
}
JSON
{
  "name": "Mint Macaron",
  "colors": [
    {
      "hex": "#aaf0d0",
      "role": "mint"
    },
    {
      "hex": "#fdf6ec",
      "role": "sugar"
    },
    {
      "hex": "#f4a7b9",
      "role": "rose"
    },
    {
      "hex": "#5b3a29",
      "role": "cocoa"
    }
  ]
}

Related palettes