# Analogous purple to navy linear gradient

Analogous purple to navy linear gradient with 7 colors: #ad4ad1, #923bc2, #732bac, #592392, #422179, #2f2567, #24285a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUl5jgusa-qwzPsmoD2g`
- Page: https://grabient.com/kUl5jgusa-qwzPsmoD2g
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#ad4ad1` | `oklch(59.45% 0.2094 315.70)` | Purple Yam | black, 4.6 to 1 |
| 2 | `#923bc2` | `oklch(53.47% 0.2052 311.01)` | Purple Vanity | white, 5.7 to 1 |
| 3 | `#732bac` | `oklch(46.06% 0.1943 305.14)` | Fuchsia Nebula | white, 7.8 to 1 |
| 4 | `#592392` | `oklch(39.79% 0.1697 300.91)` | Banafš Violet | white, 10.1 to 1 |
| 5 | `#422179` | `oklch(34.65% 0.1406 295.62)` | Explorer of the Galaxies | white, 12.1 to 1 |
| 6 | `#2f2567` | `oklch(31.77% 0.1110 285.52)` | Indie Go | white, 13.2 to 1 |
| 7 | `#24285a` | `oklch(30.31% 0.0882 276.60)` | Deep Breath | white, 13.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ad4ad1 0.0%, #923bc2 16.7%, #732bac 33.3%, #592392 50.0%, #422179 66.7%, #2f2567 83.3%, #24285a 100.0%);
background: linear-gradient(90deg in oklch, oklch(59.45% 0.2094 315.70) 0.0%, oklch(53.47% 0.2052 311.01) 16.7%, oklch(46.06% 0.1943 305.14) 33.3%, oklch(39.79% 0.1697 300.91) 50.0%, oklch(34.65% 0.1406 295.62) 66.7%, oklch(31.77% 0.1110 285.52) 83.3%, oklch(30.31% 0.0882 276.60) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.594 | 0.209 | 315.7 |
| 2 | 0.461 | 0.194 | 305.1 |
| 3 | 0.346 | 0.141 | 295.6 |
| 4 | 0.303 | 0.088 | 276.6 |

## In these collections

- [Jewel tone swatches](https://grabient.com/jewel-tone-swatches)
- [Jewel tones](https://grabient.com/jewel-tones)

## Other forms

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