# Analogous orange, tan and gray linear swatches

Analogous orange, tan and gray linear swatches with 21 colors: #cf673e, #d16b42, #d47147, #d6784e, #d87f54, #d9855a, #d88c5f, #d59465, #d29b6b, #cea072, #c9a378, #c3a37c, #bca17e, #b59e7f, #ad9a7e, #a6947c, #9f8e79, #978573, #8f7d6e, #887568, #827065. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWoGgd2KtAt4awpWDsCRwq9Q`
- Page: https://grabient.com/kWoGgd2KtAt4awpWDsCRwq9Q?style=linearSwatches&steps=21&angle=270
- Drawn as: linear swatches, 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.000% 4.762%, #d16b42 4.762% 9.524%, #d47147 9.524% 14.286%, #d6784e 14.286% 19.048%, #d87f54 19.048% 23.810%, #d9855a 23.810% 28.571%, #d88c5f 28.571% 33.333%, #d59465 33.333% 38.095%, #d29b6b 38.095% 42.857%, #cea072 42.857% 47.619%, #c9a378 47.619% 52.381%, #c3a37c 52.381% 57.143%, #bca17e 57.143% 61.905%, #b59e7f 61.905% 66.667%, #ad9a7e 66.667% 71.429%, #a6947c 71.429% 76.190%, #9f8e79 76.190% 80.952%, #978573 80.952% 85.714%, #8f7d6e 85.714% 90.476%, #887568 90.476% 95.238%, #827065 95.238% 100.000%);
background: linear-gradient(270deg, oklch(62.99% 0.1433 41.48) 0.000% 4.762%, oklch(63.94% 0.1403 42.09) 4.762% 9.524%, oklch(65.30% 0.1362 42.80) 9.524% 14.286%, oklch(66.86% 0.1311 43.84) 14.286% 19.048%, oklch(68.39% 0.1252 45.44) 19.048% 23.810%, oklch(69.69% 0.1185 47.82) 23.810% 28.571%, oklch(70.87% 0.1105 51.52) 28.571% 33.333%, oklch(72.10% 0.1012 56.37) 33.333% 38.095%, oklch(73.16% 0.0913 61.60) 38.095% 42.857%, oklch(73.87% 0.0817 66.41) 42.857% 47.619%, oklch(74.02% 0.0730 70.02) 47.619% 52.381%, oklch(73.52% 0.0653 72.60) 52.381% 57.143%, oklch(72.53% 0.0579 74.67) 57.143% 61.905%, oklch(71.14% 0.0510 75.98) 61.905% 66.667%, oklch(69.50% 0.0450 76.27) 66.667% 71.429%, oklch(67.72% 0.0400 75.30) 71.429% 76.190%, oklch(65.52% 0.0362 72.27) 76.190% 80.952%, oklch(62.82% 0.0334 67.34) 80.952% 85.714%, oklch(60.04% 0.0315 61.71) 85.714% 90.476%, oklch(57.60% 0.0301 56.57) 90.476% 95.238%, oklch(55.91% 0.0289 53.11) 95.238% 100.000%);
```

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