# White, gray and orange linear gradient

White, gray and orange linear gradient with 7 colors: #ffffff, #f5f3e1, #deece4, #d5d5d5, #6f6f6f, #5f7257, #ffba58. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW_gpH9wlBu8AUQ4gDWajm0I`
- Page: https://grabient.com/kW_gpH9wlBu8AUQ4gDWajm0I
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: neutral, light
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#ffffff` | `oklch(100.00% 0.0001 106.39)` | White | black, 20.9 to 1 |
| 2 | `#f5f3e1` | `oklch(96.03% 0.0234 100.23)` | Tibetan Jasmine | black, 18.7 to 1 |
| 3 | `#deece4` | `oklch(92.96% 0.0183 162.58)` | Wishy-Washy Lichen | black, 17.1 to 1 |
| 4 | `#d5d5d5` | `oklch(87.40% 0.0000 89.88)` | Silver Medal | black, 14.3 to 1 |
| 5 | `#6f6f6f` | `oklch(54.08% 0.0000 89.88)` | Welded Iron | white, 5 to 1 |
| 6 | `#5f7257` | `oklch(52.86% 0.0470 136.48)` | Vineyard Green | white, 5.2 to 1 |
| 7 | `#ffba58` | `oklch(83.46% 0.1384 73.08)` | Cape Jasmine | black, 12.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ffffff 0.0%, #f5f3e1 16.7%, #deece4 33.3%, #d5d5d5 50.0%, #6f6f6f 66.7%, #5f7257 83.3%, #ffba58 100.0%);
background: linear-gradient(90deg in oklch, oklch(100.00% 0.0001 106.39) 0.0%, oklch(96.03% 0.0234 100.23) 16.7%, oklch(92.96% 0.0183 162.58) 33.3%, oklch(87.40% 0.0000 89.88) 50.0%, oklch(54.08% 0.0000 89.88) 66.7%, oklch(52.86% 0.0470 136.48) 83.3%, oklch(83.46% 0.1384 73.08) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 1 | 0.014 | 100.5 |
| 2 | 0.937 | 0.025 | 115.3 |
| 3 | 0.874 | 0 | 260.1 |
| 4 | 0.445 | 0 | 172.4 |
| 5 | 0.835 | 0.158 | 73.1 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)

## Other forms

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