Saddle and Denim

earthywarmretro

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

Tan leather and worn denim have been paired on workwear for a century, and the color relationship explains why: faded indigo is the natural cool complement to yellow-brown hide, both softened by use to the same low saturation. Saddle and oak deepen the leather story into a full value range, with muslin as the undyed light. Heritage, tool, and apparel brands can run this set almost unmodified.

Built around Tan.

Use this palette

Hex values
#d2b48c, #8a5a33, #3f5d7a, #f3ecdd, #40352a
CSS custom properties
:root {
  --color-tan: #d2b48c;
  --color-saddle: #8a5a33;
  --color-denim: #3f5d7a;
  --color-muslin: #f3ecdd;
  --color-oak: #40352a;
}
Tailwind v4 theme
@theme {
  --color-tan: #d2b48c;
  --color-saddle: #8a5a33;
  --color-denim: #3f5d7a;
  --color-muslin: #f3ecdd;
  --color-oak: #40352a;
}
JSON
{
  "name": "Saddle and Denim",
  "colors": [
    {
      "hex": "#d2b48c",
      "role": "tan"
    },
    {
      "hex": "#8a5a33",
      "role": "saddle"
    },
    {
      "hex": "#3f5d7a",
      "role": "denim"
    },
    {
      "hex": "#f3ecdd",
      "role": "muslin"
    },
    {
      "hex": "#40352a",
      "role": "oak"
    }
  ]
}

Related palettes