# Purple, blue and black linear gradient

Purple, blue and black linear gradient with 7 colors: #7d5591, #4073c1, #7fa8dd, #8771a2, #36203c, #1b1927, #cc524f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYg0vfSTC4t6ZwYxHsgF4S5Uw4zG`
- Page: https://grabient.com/kYg0vfSTC4t6ZwYxHsgF4S5Uw4zG
- Drawn as: linear gradient, 7 steps, 90 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 7 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 | `#7d5591` | `oklch(51.57% 0.1033 313.59)` | Juneberry | white, 5.8 to 1 |
| 2 | `#4073c1` | `oklch(55.79% 0.1337 258.88)` | Palace Blue | white, 4.7 to 1 |
| 3 | `#7fa8dd` | `oklch(72.27% 0.0892 254.61)` | Swift | black, 8.5 to 1 |
| 4 | `#8771a2` | `oklch(58.81% 0.0777 304.74)` | Babiana | black, 4.9 to 1 |
| 5 | `#36203c` | `oklch(28.45% 0.0585 319.31)` | Power Outage | white, 14.7 to 1 |
| 6 | `#1b1927` | `oklch(22.32% 0.0255 288.20)` | Coarse Wool | white, 17.2 to 1 |
| 7 | `#cc524f` | `oklch(59.84% 0.1557 24.40)` | Chinese Dragon | black, 4.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #7d5591 0.0%, #4073c1 16.7%, #7fa8dd 33.3%, #8771a2 50.0%, #36203c 66.7%, #1b1927 83.3%, #cc524f 100.0%);
background: linear-gradient(90deg in oklch, oklch(51.57% 0.1033 313.59) 0.0%, oklch(55.79% 0.1337 258.88) 16.7%, oklch(72.27% 0.0892 254.61) 33.3%, oklch(58.81% 0.0777 304.74) 50.0%, oklch(28.45% 0.0585 319.31) 66.7%, oklch(22.32% 0.0255 288.20) 83.3%, oklch(59.84% 0.1557 24.40) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.516 | 0.103 | 313.6 |
| 2 | 0.575 | 0.134 | 252.3 |
| 3 | 0.744 | 0.07 | 266 |
| 4 | 0.386 | 0.084 | 334.7 |
| 5 | 0.185 | 0.012 | 278.7 |
| 6 | 0.598 | 0.156 | 384.4 |

## Other forms

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