# Pastel analogous orange, tan and gray linear swatches

Pastel analogous orange, tan and gray linear swatches with 21 colors: #ff834d, #ff8750, #ff8d54, #ff9459, #ff9a5e, #ffa063, #fea76a, #fdad71, #fbb378, #f9b97f, #f6be85, #f2c28c, #edc795, #e8caa0, #e3ccac, #dcceb7, #d3cfbe, #cad1c4, #c0d0cc, #becdd4, #c2c9d6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYvHke4zRA2ipQRsHMGbIjCmoHU6`
- Page: https://grabient.com/kYvHke4zRA2ipQRsHMGbIjCmoHU6?style=linearSwatches&steps=21&angle=0
- Drawn as: linear swatches, 21 steps, 0 degrees
- Kinds: even lightness, pastel, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.5 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 | `#ff834d` | `oklch(74.01% 0.1662 42.89)` | Tangerine Dream | black, 8.5 to 1 |
| 2 | `#ff8750` | `oklch(74.71% 0.1618 44.17)` | Tiger of Mysore | black, 8.8 to 1 |
| 3 | `#ff8d54` | `oklch(75.71% 0.1556 46.00)` | Paradise Bird | black, 9.1 to 1 |
| 4 | `#ff9459` | `oklch(76.85% 0.1490 48.12)` | Rainbow Trout | black, 9.6 to 1 |
| 5 | `#ff9a5e` | `oklch(77.95% 0.1428 50.29)` | Papaya | black, 10 to 1 |
| 6 | `#ffa063` | `oklch(79.04% 0.1363 52.42)` | Orange Spice | black, 10.4 to 1 |
| 7 | `#fea76a` | `oklch(80.19% 0.1288 54.65)` | Echinoderm | black, 10.9 to 1 |
| 8 | `#fdad71` | `oklch(81.30% 0.1210 57.07)` | Orange Marmalade | black, 11.4 to 1 |
| 9 | `#fbb378` | `oklch(82.28% 0.1130 59.80)` | Market Melon | black, 11.8 to 1 |
| 10 | `#f9b97f` | `oklch(83.14% 0.1052 62.74)` | Asagi Yellow | black, 12.2 to 1 |
| 11 | `#f6be85` | `oklch(83.91% 0.0973 65.87)` | Apricot Yellow | black, 12.6 to 1 |
| 12 | `#f2c28c` | `oklch(84.55% 0.0887 69.41)` | Ginger Root Peel | black, 12.9 to 1 |
| 13 | `#edc795` | `oklch(85.04% 0.0785 73.54)` | Humble Gold | black, 13.1 to 1 |
| 14 | `#e8caa0` | `oklch(85.36% 0.0650 75.10)` | Compatible Cream | black, 13.3 to 1 |
| 15 | `#e3ccac` | `oklch(85.53% 0.0491 75.06)` | Warm Biscuits | black, 13.4 to 1 |
| 16 | `#dcceb7` | `oklch(85.56% 0.0341 79.80)` | Yarmouth Oyster | black, 13.5 to 1 |
| 17 | `#d3cfbe` | `oklch(85.43% 0.0234 95.73)` | Ocean Pearl | black, 13.4 to 1 |
| 18 | `#cad1c4` | `oklch(85.06% 0.0187 131.20)` | White Granite | black, 13.3 to 1 |
| 19 | `#c0d0cc` | `oklch(84.47% 0.0179 180.60)` | White Box | black, 13.1 to 1 |
| 20 | `#becdd4` | `oklch(83.87% 0.0188 229.30)` | Keepsake | black, 12.8 to 1 |
| 21 | `#c2c9d6` | `oklch(83.46% 0.0193 262.69)` | Icy Brook | black, 12.6 to 1 |

## CSS

```css
background: linear-gradient(0deg, #ff834d 0.000% 4.762%, #ff8750 4.762% 9.524%, #ff8d54 9.524% 14.286%, #ff9459 14.286% 19.048%, #ff9a5e 19.048% 23.810%, #ffa063 23.810% 28.571%, #fea76a 28.571% 33.333%, #fdad71 33.333% 38.095%, #fbb378 38.095% 42.857%, #f9b97f 42.857% 47.619%, #f6be85 47.619% 52.381%, #f2c28c 52.381% 57.143%, #edc795 57.143% 61.905%, #e8caa0 61.905% 66.667%, #e3ccac 66.667% 71.429%, #dcceb7 71.429% 76.190%, #d3cfbe 76.190% 80.952%, #cad1c4 80.952% 85.714%, #c0d0cc 85.714% 90.476%, #becdd4 90.476% 95.238%, #c2c9d6 95.238% 100.000%);
background: linear-gradient(0deg, oklch(74.01% 0.1662 42.89) 0.000% 4.762%, oklch(74.71% 0.1618 44.17) 4.762% 9.524%, oklch(75.71% 0.1556 46.00) 9.524% 14.286%, oklch(76.85% 0.1490 48.12) 14.286% 19.048%, oklch(77.95% 0.1428 50.29) 19.048% 23.810%, oklch(79.04% 0.1363 52.42) 23.810% 28.571%, oklch(80.19% 0.1288 54.65) 28.571% 33.333%, oklch(81.30% 0.1210 57.07) 33.333% 38.095%, oklch(82.28% 0.1130 59.80) 38.095% 42.857%, oklch(83.14% 0.1052 62.74) 42.857% 47.619%, oklch(83.91% 0.0973 65.87) 47.619% 52.381%, oklch(84.55% 0.0887 69.41) 52.381% 57.143%, oklch(85.04% 0.0785 73.54) 57.143% 61.905%, oklch(85.36% 0.0650 75.10) 61.905% 66.667%, oklch(85.53% 0.0491 75.06) 66.667% 71.429%, oklch(85.56% 0.0341 79.80) 71.429% 76.190%, oklch(85.43% 0.0234 95.73) 76.190% 80.952%, oklch(85.06% 0.0187 131.20) 80.952% 85.714%, oklch(84.47% 0.0179 180.60) 85.714% 90.476%, oklch(83.87% 0.0188 229.30) 90.476% 95.238%, oklch(83.46% 0.0193 262.69) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.74 | 0.167 | 42.9 |
| 2 | 0.78 | 0.143 | 50.3 |
| 3 | 0.823 | 0.113 | 59.8 |
| 4 | 0.85 | 0.079 | 73.5 |
| 5 | 0.854 | 0.023 | 95.7 |
| 6 | 0.835 | 0.019 | 262.7 |

## In these collections

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

## Other forms

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