# Orange, yellow, green and blue linear gradient

Orange, yellow, green and blue linear gradient with 7 colors: #dfa341, #e9c443, #e6dd50, #d4e768, #b8e088, #93caa9, #7da8bf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYwGA26zbCPE5wbvM0GZp1CloVSg`
- Page: https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, light
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#dfa341` | `oklch(75.59% 0.1323 76.64)` | Scrofulous Brown | black, 9.4 to 1 |
| 2 | `#e9c443` | `oklch(82.94% 0.1476 92.52)` | Liberator Gold | black, 12.4 to 1 |
| 3 | `#e6dd50` | `oklch(88.01% 0.1580 105.76)` | Goldvreneli 1882 | black, 14.8 to 1 |
| 4 | `#d4e768` | `oklch(88.90% 0.1538 116.86)` | Mindaro | black, 15.4 to 1 |
| 5 | `#b8e088` | `oklch(85.67% 0.1221 128.62)` | Green Chalk | black, 14 to 1 |
| 6 | `#93caa9` | `oklch(79.14% 0.0738 157.97)` | Peppermint Spray | black, 11.2 to 1 |
| 7 | `#7da8bf` | `oklch(70.87% 0.0579 231.98)` | Stormfang | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #dfa341 0.0%, #e9c443 16.7%, #e6dd50 33.3%, #d4e768 50.0%, #b8e088 66.7%, #93caa9 83.3%, #7da8bf 100.0%);
background: linear-gradient(90deg in oklch, oklch(75.59% 0.1323 76.64) 0.0%, oklch(82.94% 0.1476 92.52) 16.7%, oklch(88.01% 0.1580 105.76) 33.3%, oklch(88.90% 0.1538 116.86) 50.0%, oklch(85.67% 0.1221 128.62) 66.7%, oklch(79.14% 0.0738 157.97) 83.3%, oklch(70.87% 0.0579 231.98) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.756 | 0.132 | 76.6 |
| 2 | 0.843 | 0.15 | 95.7 |
| 3 | 0.89 | 0.158 | 110.5 |
| 4 | 0.874 | 0.141 | 124.2 |
| 5 | 0.807 | 0.08 | 146.4 |
| 6 | 0.709 | 0.058 | 232 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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