# Terracotta and tan orange palette

The Terracotta and tan orange palette brings together orange and light orange. The colors span a narrow lightness range, combining moderate 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: Analogous orange, tan and gray linear gradient
- Seed: `kWoGgd2KtAt4awpWDsCRwq9Q`
- Page: https://grabient.com/kWoGgd2KtAt4awpWDsCRwq9Q?steps=21&angle=270
- Drawn as: linear gradient, 21 steps, 270 degrees
- Kinds: warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 2 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 | `#cf673e` | `oklch(62.99% 0.1433 41.48)` | Koi | black, 5.6 to 1 |
| 2 | `#d16b42` | `oklch(63.94% 0.1403 42.09)` | Fresh Acorn | black, 5.8 to 1 |
| 3 | `#d47147` | `oklch(65.30% 0.1362 42.80)` | Coral Gold | black, 6.2 to 1 |
| 4 | `#d6784e` | `oklch(66.86% 0.1311 43.84)` | Jack-O-Lantern | black, 6.6 to 1 |
| 5 | `#d87f54` | `oklch(68.39% 0.1252 45.44)` | Copper Harbor | black, 7 to 1 |
| 6 | `#d9855a` | `oklch(69.69% 0.1185 47.82)` | Show Business | black, 7.4 to 1 |
| 7 | `#d88c5f` | `oklch(70.87% 0.1105 51.52)` | Longhorn | black, 7.8 to 1 |
| 8 | `#d59465` | `oklch(72.10% 0.1012 56.37)` | Pumpkin Patch | black, 8.2 to 1 |
| 9 | `#d29b6b` | `oklch(73.16% 0.0913 61.60)` | Prayer Flag | black, 8.6 to 1 |
| 10 | `#cea072` | `oklch(73.87% 0.0817 66.41)` | White Oak | black, 8.9 to 1 |
| 11 | `#c9a378` | `oklch(74.02% 0.0730 70.02)` | Fresh Sawdust | black, 9 to 1 |
| 12 | `#c3a37c` | `oklch(73.52% 0.0653 72.60)` | Almandine | black, 8.8 to 1 |
| 13 | `#bca17e` | `oklch(72.53% 0.0579 74.67)` | Oxford Street | black, 8.5 to 1 |
| 14 | `#b59e7f` | `oklch(71.14% 0.0510 75.98)` | Silestone | black, 8.1 to 1 |
| 15 | `#ad9a7e` | `oklch(69.50% 0.0450 76.27)` | Smallmouth Bass | black, 7.6 to 1 |
| 16 | `#a6947c` | `oklch(67.72% 0.0400 75.30)` | Tawny Ember | black, 7.1 to 1 |
| 17 | `#9f8e79` | `oklch(65.52% 0.0362 72.27)` | Cottage Walk | black, 6.5 to 1 |
| 18 | `#978573` | `oklch(62.82% 0.0334 67.34)` | Country Club | black, 5.9 to 1 |
| 19 | `#8f7d6e` | `oklch(60.04% 0.0315 61.71)` | Bridle Leather | black, 5.2 to 1 |
| 20 | `#887568` | `oklch(57.60% 0.0301 56.57)` | Pine Bark | black, 4.7 to 1 |
| 21 | `#827065` | `oklch(55.91% 0.0289 53.11)` | Cardamom Spice | white, 4.7 to 1 |

## CSS

```css
background: linear-gradient(270deg, #cf673e 0.0%, #d16b42 5.0%, #d47147 10.0%, #d6784e 15.0%, #d87f54 20.0%, #d9855a 25.0%, #d88c5f 30.0%, #d59465 35.0%, #d29b6b 40.0%, #cea072 45.0%, #c9a378 50.0%, #c3a37c 55.0%, #bca17e 60.0%, #b59e7f 65.0%, #ad9a7e 70.0%, #a6947c 75.0%, #9f8e79 80.0%, #978573 85.0%, #8f7d6e 90.0%, #887568 95.0%, #827065 100.0%);
background: linear-gradient(270deg in oklch, oklch(62.99% 0.1433 41.48) 0.0%, oklch(63.94% 0.1403 42.09) 5.0%, oklch(65.30% 0.1362 42.80) 10.0%, oklch(66.86% 0.1311 43.84) 15.0%, oklch(68.39% 0.1252 45.44) 20.0%, oklch(69.69% 0.1185 47.82) 25.0%, oklch(70.87% 0.1105 51.52) 30.0%, oklch(72.10% 0.1012 56.37) 35.0%, oklch(73.16% 0.0913 61.60) 40.0%, oklch(73.87% 0.0817 66.41) 45.0%, oklch(74.02% 0.0730 70.02) 50.0%, oklch(73.52% 0.0653 72.60) 55.0%, oklch(72.53% 0.0579 74.67) 60.0%, oklch(71.14% 0.0510 75.98) 65.0%, oklch(69.50% 0.0450 76.27) 70.0%, oklch(67.72% 0.0400 75.30) 75.0%, oklch(65.52% 0.0362 72.27) 80.0%, oklch(62.82% 0.0334 67.34) 85.0%, oklch(60.04% 0.0315 61.71) 90.0%, oklch(57.60% 0.0301 56.57) 95.0%, oklch(55.91% 0.0289 53.11) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.63 | 0.143 | 41.5 |
| 2 | 0.697 | 0.119 | 47.8 |
| 3 | 0.74 | 0.073 | 70 |
| 4 | 0.677 | 0.04 | 75.3 |
| 5 | 0.559 | 0.029 | 53.1 |

## In these collections

- [Orange gradients](https://grabient.com/orange-gradients)

## Other forms

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