# Orange, yellow, green and blue linear gradient

Orange, yellow, green and blue linear gradient with 32 colors: #dfa341, #e1a741, #e3ad40, #e5b440, #e7bb41, #e9c342, #e9c944, #e9ce47, #e9d349, #e8d84c, #e7dc4f, #e5e053, #e2e357, #dee55c, #dae661, #d6e765, #d1e76a, #cce76f, #c6e675, #bfe57c, #bae283, #b6de8a, #b2da90, #add697, #a6d29d, #9dcea3, #91c9aa, #85c3b2, #7dbcb9, #7ab4be, #7badc0, #7da8bf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYwGA26zbCPE5wbvM0GZp1CloVSg`
- Page: https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 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 | `#e1a741` | `oklch(76.54% 0.1343 78.68)` | Brass Mesh | black, 9.8 to 1 |
| 3 | `#e3ad40` | `oklch(77.88% 0.1371 81.52)` | Tulip Tree | black, 10.3 to 1 |
| 4 | `#e5b440` | `oklch(79.46% 0.1404 84.87)` | Australium Gold | black, 10.9 to 1 |
| 5 | `#e7bb41` | `oklch(81.12% 0.1438 88.45)` | Capital Yellow | black, 11.6 to 1 |
| 6 | `#e9c342` | `oklch(82.69% 0.1471 91.96)` | Liberator Gold | black, 12.2 to 1 |
| 7 | `#e9c944` | `oklch(84.03% 0.1498 95.10)` | Snake Eyes | black, 12.8 to 1 |
| 8 | `#e9ce47` | `oklch(85.10% 0.1519 97.79)` | Golden Relic | black, 13.3 to 1 |
| 9 | `#e9d349` | `oklch(86.10% 0.1541 100.30)` | Aurora | black, 13.8 to 1 |
| 10 | `#e8d84c` | `oklch(87.01% 0.1560 102.69)` | Longlure Frogfish | black, 14.3 to 1 |
| 11 | `#e7dc4f` | `oklch(87.79% 0.1576 105.00)` | Goldvreneli 1882 | black, 14.7 to 1 |
| 12 | `#e5e053` | `oklch(88.41% 0.1586 107.27)` | Dragon’s Gold | black, 15 to 1 |
| 13 | `#e2e357` | `oklch(88.86% 0.1587 109.54)` | Dragon’s Gold | black, 15.3 to 1 |
| 14 | `#dee55c` | `oklch(89.09% 0.1579 111.79)` | Maximum Green Yellow | black, 15.4 to 1 |
| 15 | `#dae661` | `oklch(89.14% 0.1568 113.87)` | Mindaro | black, 15.5 to 1 |
| 16 | `#d6e765` | `oklch(89.02% 0.1550 115.86)` | Mindaro | black, 15.4 to 1 |
| 17 | `#d1e76a` | `oklch(88.75% 0.1524 117.89)` | Mindaro | black, 15.3 to 1 |
| 18 | `#cce76f` | `oklch(88.33% 0.1489 120.07)` | Venomous Sting | black, 15.2 to 1 |
| 19 | `#c6e675` | `oklch(87.78% 0.1441 122.54)` | Idocrase Green | black, 14.9 to 1 |
| 20 | `#bfe57c` | `oklch(87.12% 0.1378 125.26)` | Idocrase Green | black, 14.6 to 1 |
| 21 | `#bae283` | `oklch(86.30% 0.1290 127.38)` | Oxalis | black, 14.3 to 1 |
| 22 | `#b6de8a` | `oklch(85.33% 0.1184 129.26)` | Green Chalk | black, 13.8 to 1 |
| 23 | `#b2da90` | `oklch(84.23% 0.1071 131.59)` | Pastel Lime | black, 13.3 to 1 |
| 24 | `#add697` | `oklch(83.04% 0.0960 135.06)` | Cool Aloe | black, 12.8 to 1 |
| 25 | `#a6d29d` | `oklch(81.76% 0.0862 140.36)` | Relaxation Green | black, 12.2 to 1 |
| 26 | `#9dcea3` | `oklch(80.43% 0.0786 148.23)` | Garden Goddess | black, 11.7 to 1 |
| 27 | `#91c9aa` | `oklch(78.85% 0.0729 160.26)` | Peppermint Spray | black, 11.1 to 1 |
| 28 | `#85c3b2` | `oklch(77.05% 0.0684 175.55)` | Seaborn | black, 10.4 to 1 |
| 29 | `#7dbcb9` | `oklch(75.18% 0.0648 192.25)` | Polished Aqua | black, 9.7 to 1 |
| 30 | `#7ab4be` | `oklch(73.42% 0.0620 208.47)` | Culinary Blue | black, 9.1 to 1 |
| 31 | `#7badc0` | `oklch(71.93% 0.0598 222.34)` | Blue Eye Samurai | black, 8.5 to 1 |
| 32 | `#7da8bf` | `oklch(70.87% 0.0579 231.98)` | Stormfang | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(45deg, #dfa341 0.0%, #e1a741 3.2%, #e3ad40 6.5%, #e5b440 9.7%, #e7bb41 12.9%, #e9c342 16.1%, #e9c944 19.4%, #e9ce47 22.6%, #e9d349 25.8%, #e8d84c 29.0%, #e7dc4f 32.3%, #e5e053 35.5%, #e2e357 38.7%, #dee55c 41.9%, #dae661 45.2%, #d6e765 48.4%, #d1e76a 51.6%, #cce76f 54.8%, #c6e675 58.1%, #bfe57c 61.3%, #bae283 64.5%, #b6de8a 67.7%, #b2da90 71.0%, #add697 74.2%, #a6d29d 77.4%, #9dcea3 80.6%, #91c9aa 83.9%, #85c3b2 87.1%, #7dbcb9 90.3%, #7ab4be 93.5%, #7badc0 96.8%, #7da8bf 100.0%);
background: linear-gradient(45deg in oklch, oklch(75.59% 0.1323 76.64) 0.0%, oklch(76.54% 0.1343 78.68) 3.2%, oklch(77.88% 0.1371 81.52) 6.5%, oklch(79.46% 0.1404 84.87) 9.7%, oklch(81.12% 0.1438 88.45) 12.9%, oklch(82.69% 0.1471 91.96) 16.1%, oklch(84.03% 0.1498 95.10) 19.4%, oklch(85.10% 0.1519 97.79) 22.6%, oklch(86.10% 0.1541 100.30) 25.8%, oklch(87.01% 0.1560 102.69) 29.0%, oklch(87.79% 0.1576 105.00) 32.3%, oklch(88.41% 0.1586 107.27) 35.5%, oklch(88.86% 0.1587 109.54) 38.7%, oklch(89.09% 0.1579 111.79) 41.9%, oklch(89.14% 0.1568 113.87) 45.2%, oklch(89.02% 0.1550 115.86) 48.4%, oklch(88.75% 0.1524 117.89) 51.6%, oklch(88.33% 0.1489 120.07) 54.8%, oklch(87.78% 0.1441 122.54) 58.1%, oklch(87.12% 0.1378 125.26) 61.3%, oklch(86.30% 0.1290 127.38) 64.5%, oklch(85.33% 0.1184 129.26) 67.7%, oklch(84.23% 0.1071 131.59) 71.0%, oklch(83.04% 0.0960 135.06) 74.2%, oklch(81.76% 0.0862 140.36) 77.4%, oklch(80.43% 0.0786 148.23) 80.6%, oklch(78.85% 0.0729 160.26) 83.9%, oklch(77.05% 0.0684 175.55) 87.1%, oklch(75.18% 0.0648 192.25) 90.3%, oklch(73.42% 0.0620 208.47) 93.5%, oklch(71.93% 0.0598 222.34) 96.8%, 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?steps=32&angle=45)
- [PNG](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.png?steps=32&angle=45)
- [SVG](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.svg?steps=32&angle=45)
- [CSS](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.css?steps=32&angle=45)
- [ASE](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.ase?steps=32&angle=45)
- [GPL](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.gpl?steps=32&angle=45)
- [GRD](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.grd?steps=32&angle=45)
- [Design tokens](https://grabient.com/kYwGA26zbCPE5wbvM0GZp1CloVSg.tokens.json?steps=32&angle=45)
- [Social card](https://grabient.com/api/og?seed=kYwGA26zbCPE5wbvM0GZp1CloVSg&steps=32&angle=45)
- [Palettes like this one](https://grabient.com/palettes?q=kYwGA26zbCPE5wbvM0GZp1CloVSg)
- [Guide for agents](https://grabient.com/llms.txt)