# Duotone dark purple to light blue linear gradient

Duotone dark purple to light blue linear gradient with 7 colors: #3a203f, #4d2b53, #654276, #6c6ca7, #779fcb, #b1d0e8, #e9f5ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUSi_kuCG_FecuJ6hz6A`
- Page: https://grabient.com/kUSi_kuCG_FecuJ6hz6A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 13 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 | `#3a203f` | `oklch(29.13% 0.0648 321.33)` | Kokimurasaki Purple | white, 14.4 to 1 |
| 2 | `#4d2b53` | `oklch(35.06% 0.0794 321.53)` | Purple Shade | white, 11.7 to 1 |
| 3 | `#654276` | `oklch(44.09% 0.0923 313.93)` | Palace Purple | white, 8 to 1 |
| 4 | `#6c6ca7` | `oklch(55.71% 0.0909 283.02)` | Kimberlite | white, 4.8 to 1 |
| 5 | `#779fcb` | `oklch(68.90% 0.0785 251.58)` | Blue Lechery | black, 7.5 to 1 |
| 6 | `#b1d0e8` | `oklch(84.23% 0.0481 241.87)` | Vive le Vent | black, 13 to 1 |
| 7 | `#e9f5ff` | `oklch(96.46% 0.0188 239.93)` | Moon White | black, 19 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3a203f 0.0%, #4d2b53 16.7%, #654276 33.3%, #6c6ca7 50.0%, #779fcb 66.7%, #b1d0e8 83.3%, #e9f5ff 100.0%);
background: linear-gradient(90deg in oklch, oklch(29.13% 0.0648 321.33) 0.0%, oklch(35.06% 0.0794 321.53) 16.7%, oklch(44.09% 0.0923 313.93) 33.3%, oklch(55.71% 0.0909 283.02) 50.0%, oklch(68.90% 0.0785 251.58) 66.7%, oklch(84.23% 0.0481 241.87) 83.3%, oklch(96.46% 0.0188 239.93) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.065 | 321.3 |
| 2 | 0.441 | 0.092 | 313.9 |
| 3 | 0.689 | 0.079 | 251.6 |
| 4 | 0.965 | 0.019 | 240 |

## In these collections

- [Blue and purple gradients](https://grabient.com/blue-and-purple-gradients)

## Other forms

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