# Black, blue, dark purple and navy linear gradient

Black, blue, dark purple and navy linear gradient with 7 colors: #0f0007, #4c94a7, #9459d4, #354497, #09364c, #2e002b, #000108. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYHCL3VyCvj_LTwtFLBniTO4mMt6`
- Page: https://grabient.com/kYHCL3VyCvj_LTwtFLBniTO4mMt6
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid, dark
- Hues: wide
- Contrast of its darkest and lightest colors: 6 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 | `#0f0007` | `oklch(11.05% 0.0465 347.43)` | Glossy Black | white, 20.5 to 1 |
| 2 | `#4c94a7` | `oklch(62.66% 0.0776 218.17)` | Alpine Lake | black, 6 to 1 |
| 3 | `#9459d4` | `oklch(58.69% 0.1847 303.47)` | Morado Purple | black, 4.6 to 1 |
| 4 | `#354497` | `oklch(42.30% 0.1362 271.32)` | Galaxy Express | white, 8.6 to 1 |
| 5 | `#09364c` | `oklch(31.45% 0.0609 236.19)` | Sea of Stars | white, 12.8 to 1 |
| 6 | `#2e002b` | `oklch(21.01% 0.0950 331.49)` | Globe Thistle | white, 18.2 to 1 |
| 7 | `#000108` | `oklch(7.48% 0.0344 262.80)` | Benthic Black | white, 20.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0f0007 0.0%, #4c94a7 16.7%, #9459d4 33.3%, #354497 50.0%, #09364c 66.7%, #2e002b 83.3%, #000108 100.0%);
background: linear-gradient(90deg in oklch, oklch(11.05% 0.0465 347.43) 0.0%, oklch(62.66% 0.0776 218.17) 16.7%, oklch(58.69% 0.1847 303.47) 33.3%, oklch(42.30% 0.1362 271.32) 50.0%, oklch(31.45% 0.0609 236.19) 66.7%, oklch(21.01% 0.0950 331.49) 83.3%, oklch(7.48% 0.0344 262.80) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.11 | 0.047 | 347.3 |
| 2 | 0.685 | 0.09 | 208.9 |
| 3 | 0.5 | 0.207 | 336.8 |
| 4 | 0.354 | 0.056 | 205.7 |
| 5 | 0.236 | 0.101 | 332.5 |
| 6 | 0.075 | 0.034 | 262.8 |

## In these collections

- [Pink and blue gradients](https://grabient.com/pink-and-blue-gradients)

## Other forms

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