# Rainbow from blue to orange linear gradient

Rainbow from blue to orange linear gradient with 7 colors: #013e95, #78417f, #a46b50, #8bc488, #4df3fe, #8abe5a, #b95225. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUY2-4yh5RXCw0lHtK0A`
- Page: https://grabient.com/kUY2-4yh5RXCw0lHtK0A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, rainbow
- Hues: tetradic
- Contrast of its darkest and lightest colors: 7.3 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 | `#013e95` | `oklch(38.98% 0.1530 259.45)` | Amalfitan Azure | white, 9.8 to 1 |
| 2 | `#78417f` | `oklch(46.73% 0.1146 323.19)` | Nightly Violet | white, 7.3 to 1 |
| 3 | `#a46b50` | `oklch(58.27% 0.0827 46.34)` | Hot Cacao | black, 4.8 to 1 |
| 4 | `#8bc488` | `oklch(76.65% 0.1031 143.17)` | Leprechaun Laugh | black, 10.3 to 1 |
| 5 | `#4df3fe` | `oklch(88.58% 0.1337 201.68)` | Frozen Turquoise | black, 15.6 to 1 |
| 6 | `#8abe5a` | `oklch(74.34% 0.1424 131.61)` | Makin It Rain | black, 9.6 to 1 |
| 7 | `#b95225` | `oklch(56.30% 0.1447 42.11)` | Roland-Garros | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #013e95 0.0%, #78417f 16.7%, #a46b50 33.3%, #8bc488 50.0%, #4df3fe 66.7%, #8abe5a 83.3%, #b95225 100.0%);
background: linear-gradient(90deg in oklch, oklch(38.98% 0.1530 259.45) 0.0%, oklch(46.73% 0.1146 323.19) 16.7%, oklch(58.27% 0.0827 46.34) 33.3%, oklch(76.65% 0.1031 143.17) 50.0%, oklch(88.58% 0.1337 201.68) 66.7%, oklch(74.34% 0.1424 131.61) 83.3%, oklch(56.30% 0.1447 42.11) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.39 | 0.153 | 259.5 |
| 2 | 0.583 | 0.083 | 406.3 |
| 3 | 0.886 | 0.134 | 561.7 |
| 4 | 0.563 | 0.145 | 402.1 |

## Other forms

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