# Terracotta wood palette

The Terracotta wood palette brings together light orange and 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 tan and brown linear swatches
- Seed: `kWvycxwBs9GeVQm9kL7Uxw_4`
- Page: https://grabient.com/kWvycxwBs9GeVQm9kL7Uxw_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: muted, warm, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.6 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 | `#c5a98a` | `oklch(75.20% 0.0537 69.61)` | Townhall Tan | black, 9.4 to 1 |
| 2 | `#885640` | `oklch(50.39% 0.0744 45.30)` | Brown Patina | white, 6 to 1 |
| 3 | `#ddbc9b` | `oklch(81.50% 0.0579 66.44)` | Cane Sugar Glaze | black, 11.7 to 1 |
| 4 | `#735946` | `oklch(48.43% 0.0455 56.93)` | Old Porch | white, 6.5 to 1 |
| 5 | `#b58461` | `oklch(65.35% 0.0772 56.93)` | Choco Biscuit | black, 6.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c5a98a 0.000% 20.000%, #885640 20.000% 40.000%, #ddbc9b 40.000% 60.000%, #735946 60.000% 80.000%, #b58461 80.000% 100.000%);
background: linear-gradient(90deg, oklch(75.20% 0.0537 69.61) 0.000% 20.000%, oklch(50.39% 0.0744 45.30) 20.000% 40.000%, oklch(81.50% 0.0579 66.44) 40.000% 60.000%, oklch(48.43% 0.0455 56.93) 60.000% 80.000%, oklch(65.35% 0.0772 56.93) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.752 | 0.054 | 69.6 |
| 2 | 0.504 | 0.074 | 45.3 |
| 3 | 0.815 | 0.058 | 66.4 |
| 4 | 0.484 | 0.045 | 56.9 |
| 5 | 0.654 | 0.077 | 56.9 |

## In these collections

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

## Other forms

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