# Terracotta and tan color palette

The Terracotta and tan color palette brings together orange. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the orange color family.

- Also called: Monochrome tan and brown angular swatches
- Seed: `kWsC81PhU96qMPs4FMCTxrBg`
- Page: https://grabient.com/kWsC81PhU96qMPs4FMCTxrBg?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: dark center, warm, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.3 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 | `#b4976f` | `oklch(69.29% 0.0648 74.53)` | Tapestry Gold | black, 7.5 to 1 |
| 2 | `#79583f` | `oklch(48.82% 0.0579 57.62)` | Chocolate Caliente | white, 6.4 to 1 |
| 3 | `#453228` | `oklch(33.46% 0.0331 48.11)` | Slugger | white, 12.1 to 1 |
| 4 | `#6c4a35` | `oklch(44.09% 0.0565 53.40)` | Guitar | white, 7.8 to 1 |
| 5 | `#a57e56` | `oklch(62.20% 0.0730 67.13)` | False Puce | black, 5.7 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #b4976f 0.000% 20.000%, #79583f 20.000% 40.000%, #453228 40.000% 60.000%, #6c4a35 60.000% 80.000%, #a57e56 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(69.29% 0.0648 74.53) 0.000% 20.000%, oklch(48.82% 0.0579 57.62) 20.000% 40.000%, oklch(33.46% 0.0331 48.11) 40.000% 60.000%, oklch(44.09% 0.0565 53.40) 60.000% 80.000%, oklch(62.20% 0.0730 67.13) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.693 | 0.065 | 74.5 |
| 2 | 0.488 | 0.058 | 57.6 |
| 3 | 0.335 | 0.033 | 48.1 |
| 4 | 0.441 | 0.056 | 53.4 |
| 5 | 0.622 | 0.073 | 67.1 |

## In these collections

- [Wood color palette](https://grabient.com/wood-color-palette)
- [Brown swatches](https://grabient.com/brown-swatches)

## Other forms

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