# Tan, gray and black linear swatches

Tan, gray and black linear swatches with 6 colors: #c98c50, #afa580, #829798, #666888, #483766, #292834. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWr04t2w7FcyJ0Q0H0TpAe-g`
- Page: https://grabient.com/kWr04t2w7FcyJ0Q0H0TpAe-g?style=linearSwatches&steps=6&angle=0
- Drawn as: linear swatches, 6 steps, 0 degrees
- Kinds: light to dark, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 5.8 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 | `#c98c50` | `oklch(68.90% 0.1075 63.98)` | Orange Nectar Bat | black, 7.3 to 1 |
| 2 | `#afa580` | `oklch(71.97% 0.0511 94.15)` | Woollen Vest | black, 8.4 to 1 |
| 3 | `#829798` | `oklch(66.05% 0.0239 200.01)` | Tidepool Wonder | black, 6.8 to 1 |
| 4 | `#666888` | `oklch(52.77% 0.0506 282.13)` | Luscious Lavender | white, 5.3 to 1 |
| 5 | `#483766` | `oklch(37.80% 0.0794 298.46)` | Petunia | white, 10.4 to 1 |
| 6 | `#292834` | `oklch(28.35% 0.0207 285.90)` | Mangu Black | white, 14.4 to 1 |

## CSS

```css
background: linear-gradient(0deg, #c98c50 0.000% 16.667%, #afa580 16.667% 33.333%, #829798 33.333% 50.000%, #666888 50.000% 66.667%, #483766 66.667% 83.333%, #292834 83.333% 100.000%);
background: linear-gradient(0deg, oklch(68.90% 0.1075 63.98) 0.000% 16.667%, oklch(71.97% 0.0511 94.15) 16.667% 33.333%, oklch(66.05% 0.0239 200.01) 33.333% 50.000%, oklch(52.77% 0.0506 282.13) 50.000% 66.667%, oklch(37.80% 0.0794 298.46) 66.667% 83.333%, oklch(28.35% 0.0207 285.90) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.689 | 0.107 | 64 |
| 2 | 0.717 | 0.04 | 110.5 |
| 3 | 0.602 | 0.026 | 255.3 |
| 4 | 0.409 | 0.085 | 297.5 |
| 5 | 0.283 | 0.021 | 285.9 |

## In these collections

- [Violet rain on sandstone](https://grabient.com/violet-rain-on-sandstone)
- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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