# Tan color palette

The Tan color palette brings together orange, light orange, and gold. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is gold.

- Also called: Monochrome brown and tan angular swatches
- Seed: `kYmy4v3ZfA2uTwPcHL7QRc-qkLvi`
- Page: https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi?style=angularSwatches&steps=6&angle=135
- Drawn as: angular swatches, 6 steps, 135 degrees
- Kinds: light center, muted, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.9 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#9d7c5a` | `oklch(61.02% 0.0634 66.80)` | Westminster | black, 5.4 to 1 |
| 2 | `#c2a47c` | `oklch(73.62% 0.0648 74.19)` | Almandine | black, 8.9 to 1 |
| 3 | `#decaa5` | `oklch(84.65% 0.0537 82.65)` | Egg Liqueur | black, 13.1 to 1 |
| 4 | `#c49f6e` | `oklch(72.44% 0.0785 73.14)` | Hazed Nuts | black, 8.5 to 1 |
| 5 | `#815e40` | `oklch(51.18% 0.0634 62.57)` | Jute Brown | white, 5.7 to 1 |
| 6 | `#412f25` | `oklch(32.28% 0.0317 47.78)` | Morocco Brown | white, 12.6 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #9d7c5a 0.000% 16.667%, #c2a47c 16.667% 33.333%, #decaa5 33.333% 50.000%, #c49f6e 50.000% 66.667%, #815e40 66.667% 83.333%, #412f25 83.333% 100.000%);
background: conic-gradient(from 135deg, oklch(61.02% 0.0634 66.80) 0.000% 16.667%, oklch(73.62% 0.0648 74.19) 16.667% 33.333%, oklch(84.65% 0.0537 82.65) 33.333% 50.000%, oklch(72.44% 0.0785 73.14) 50.000% 66.667%, oklch(51.18% 0.0634 62.57) 66.667% 83.333%, oklch(32.28% 0.0317 47.78) 83.333% 100.000%);
```

## Keyframes

6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.063 | 66.8 |
| 2 | 0.736 | 0.065 | 74.2 |
| 3 | 0.846 | 0.054 | 82.6 |
| 4 | 0.724 | 0.079 | 73.1 |
| 5 | 0.512 | 0.063 | 62.6 |
| 6 | 0.323 | 0.032 | 47.8 |

## In these collections

- [Beige swatches](https://grabient.com/beige-swatches)
- [Beige](https://grabient.com/beige)
- [Brown swatches](https://grabient.com/brown-swatches)

## Other forms

- [JSON](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.json?style=angularSwatches&steps=6&angle=135)
- [PNG](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.png?style=angularSwatches&steps=6&angle=135)
- [SVG](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.svg?style=angularSwatches&steps=6&angle=135)
- [CSS](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.css?style=angularSwatches&steps=6&angle=135)
- [ASE](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.ase?style=angularSwatches&steps=6&angle=135)
- [GPL](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.gpl?style=angularSwatches&steps=6&angle=135)
- [GRD](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.grd?style=angularSwatches&steps=6&angle=135)
- [Design tokens](https://grabient.com/kYmy4v3ZfA2uTwPcHL7QRc-qkLvi.tokens.json?style=angularSwatches&steps=6&angle=135)
- [Social card](https://grabient.com/api/og?seed=kYmy4v3ZfA2uTwPcHL7QRc-qkLvi&style=angularSwatches&steps=6&angle=135)
- [Palettes like this one](https://grabient.com/palettes?q=kYmy4v3ZfA2uTwPcHL7QRc-qkLvi)
- [Guide for agents](https://grabient.com/llms.txt)