Santa Fe Turquoise

earthywarmvibrant

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

Turquoise against terracotta clay is the signature contrast of the American Southwest — cool stone set in warm adobe — and it endures because the two are near-complements with the desert's sand and bone mediating between them. Umber grounds the scheme the way dark timber grounds a whitewashed room. Turquoise is the only saturated player here, so even generous use of it stays legible against the earthen field.

Built around Turquoise.

Use this palette

Hex values
#40e0d0, #c96f4a, #e8d5b5, #6e4327, #faf4ea
CSS custom properties
:root {
  --color-turquoise: #40e0d0;
  --color-clay: #c96f4a;
  --color-sand: #e8d5b5;
  --color-umber: #6e4327;
  --color-bone: #faf4ea;
}
Tailwind v4 theme
@theme {
  --color-turquoise: #40e0d0;
  --color-clay: #c96f4a;
  --color-sand: #e8d5b5;
  --color-umber: #6e4327;
  --color-bone: #faf4ea;
}
JSON
{
  "name": "Santa Fe Turquoise",
  "colors": [
    {
      "hex": "#40e0d0",
      "role": "turquoise"
    },
    {
      "hex": "#c96f4a",
      "role": "clay"
    },
    {
      "hex": "#e8d5b5",
      "role": "sand"
    },
    {
      "hex": "#6e4327",
      "role": "umber"
    },
    {
      "hex": "#faf4ea",
      "role": "bone"
    }
  ]
}

Related palettes