# Black, gray, peach and brown linear gradient

Black, gray, peach and brown linear gradient with 7 colors: #171719, #737071, #d8d1c4, #e3a97b, #d35854, #ca6824, #b28b2e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUNAPL7YdSk65OPTqscA`
- Page: https://grabient.com/kUNAPL7YdSk65OPTqscA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.7 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 | `#171719` | `oklch(20.47% 0.0041 286.17)` | Piano Black | white, 17.9 to 1 |
| 2 | `#737071` | `oklch(54.87% 0.0031 8.60)` | Dull | white, 4.8 to 1 |
| 3 | `#d8d1c4` | `oklch(86.22% 0.0193 83.63)` | Mineral | black, 13.8 to 1 |
| 4 | `#e3a97b` | `oklch(77.88% 0.0916 60.12)` | Sun Bleached Ochre | black, 10.2 to 1 |
| 5 | `#d35854` | `oklch(61.81% 0.1571 24.45)` | Valencia | black, 5.3 to 1 |
| 6 | `#ca6824` | `oklch(62.25% 0.1457 50.87)` | Kohaku Amber | black, 5.5 to 1 |
| 7 | `#b28b2e` | `oklch(65.75% 0.1171 84.68)` | Mineral Umber | black, 6.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #171719 0.0%, #737071 16.7%, #d8d1c4 33.3%, #e3a97b 50.0%, #d35854 66.7%, #ca6824 83.3%, #b28b2e 100.0%);
background: linear-gradient(90deg in oklch, oklch(20.47% 0.0041 286.17) 0.0%, oklch(54.87% 0.0031 8.60) 16.7%, oklch(86.22% 0.0193 83.63) 33.3%, oklch(77.88% 0.0916 60.12) 50.0%, oklch(61.81% 0.1571 24.45) 66.7%, oklch(62.25% 0.1457 50.87) 83.3%, oklch(65.75% 0.1171 84.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.004 | 286.2 |
| 2 | 0.862 | 0.019 | 443.6 |
| 3 | 0.618 | 0.157 | 384.4 |
| 4 | 0.657 | 0.117 | 444.7 |

## In these collections

- [Brooched](https://grabient.com/brooched)

## Other forms

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