# Tan color palette

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

- Also called: Monochrome brown, tan and gray radial swatches
- Seed: `kWmyM23ZRAW4RQJgjr7SIy_g`
- Page: https://grabient.com/kWmyM23ZRAW4RQJgjr7SIy_g?style=radialSwatches&steps=5&angle=225
- Drawn as: radial swatches, 5 steps, 225 degrees
- Kinds: pastel, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.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 | `#948063` | `oklch(61.02% 0.0482 76.64)` | Rich Biscuit | black, 5.5 to 1 |
| 2 | `#bca683` | `oklch(73.62% 0.0551 79.81)` | Flaxen Field | black, 8.9 to 1 |
| 3 | `#e1d1b1` | `oklch(86.61% 0.0469 85.09)` | Corinthian Pillar | black, 13.9 to 1 |
| 4 | `#c0ae95` | `oklch(75.98% 0.0400 75.58)` | Riviera Beach | black, 9.7 to 1 |
| 5 | `#857562` | `oklch(57.09% 0.0344 72.41)` | Sandy Shoes | black, 4.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #948063 0.000% 20.000%, #bca683 20.000% 40.000%, #e1d1b1 40.000% 60.000%, #c0ae95 60.000% 80.000%, #857562 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(61.02% 0.0482 76.64) 0.000% 20.000%, oklch(73.62% 0.0551 79.81) 20.000% 40.000%, oklch(86.61% 0.0469 85.09) 40.000% 60.000%, oklch(75.98% 0.0400 75.58) 60.000% 80.000%, oklch(57.09% 0.0344 72.41) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.048 | 76.6 |
| 2 | 0.736 | 0.055 | 79.8 |
| 3 | 0.866 | 0.047 | 85.1 |
| 4 | 0.76 | 0.04 | 75.6 |
| 5 | 0.571 | 0.034 | 72.4 |

## In these collections

- [Beige swatches](https://grabient.com/beige-swatches)
- [Beige](https://grabient.com/beige)
- [Neutral swatches](https://grabient.com/neutral-swatches)

## Other forms

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