# Warm beige, yellow, orange and red linear gradient

Warm beige, yellow, orange and red linear gradient with 7 colors: #e9e7c2, #e9e28c, #efd026, #f9a700, #ff781d, #fe513e, #f53a57. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU6iRK7T2_FvIuhR0Dxg`
- Page: https://grabient.com/kU6iRK7T2_FvIuhR0Dxg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, neon, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.9 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 | `#e9e7c2` | `oklch(92.13% 0.0496 104.77)` | More Mint | black, 16.7 to 1 |
| 2 | `#e9e28c` | `oklch(89.84% 0.1077 104.17)` | Tender Sprout | black, 15.6 to 1 |
| 3 | `#efd026` | `oklch(85.83% 0.1695 97.37)` | Giallo | black, 13.7 to 1 |
| 4 | `#f9a700` | `oklch(79.04% 0.1676 73.91)` | California Girl | black, 10.5 to 1 |
| 5 | `#ff781d` | `oklch(72.05% 0.1879 47.70)` | Royal Oranje | black, 7.9 to 1 |
| 6 | `#fe513e` | `oklch(67.25% 0.2120 29.80)` | Ogre Odour | black, 6.4 to 1 |
| 7 | `#f53a57` | `oklch(64.17% 0.2205 18.11)` | Flowerhorn Cichlid Red | black, 5.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e9e7c2 0.0%, #e9e28c 16.7%, #efd026 33.3%, #f9a700 50.0%, #ff781d 66.7%, #fe513e 83.3%, #f53a57 100.0%);
background: linear-gradient(90deg in oklch, oklch(92.13% 0.0496 104.77) 0.0%, oklch(89.84% 0.1077 104.17) 16.7%, oklch(85.83% 0.1695 97.37) 33.3%, oklch(79.04% 0.1676 73.91) 50.0%, oklch(72.05% 0.1879 47.70) 66.7%, oklch(67.25% 0.2120 29.80) 83.3%, oklch(64.17% 0.2205 18.11) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.921 | 0.05 | 104.8 |
| 2 | 0.858 | 0.169 | 97.4 |
| 3 | 0.72 | 0.2 | 47.7 |
| 4 | 0.642 | 0.22 | 18.1 |

## In these collections

- [Summer swatches](https://grabient.com/summer-swatches)

## Other forms

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