# Black, navy, dark purple and brown linear swatches

Black, navy, dark purple and brown linear swatches with 9 colors: #020c07, #020d30, #360032, #500051, #1e356c, #064f4b, #196f32, #526100, #4b440c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYJBFzmiXSKgzQGvlrGPrG4bCau-`
- Page: https://grabient.com/kYJBFzmiXSKgzQGvlrGPrG4bCau-?style=linearSwatches&steps=9&angle=45
- Drawn as: linear swatches, 9 steps, 45 degrees
- Kinds: vivid, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.1 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 | `#020c07` | `oklch(14.17% 0.0234 162.42)` | Whiten’t | white, 19.8 to 1 |
| 2 | `#020d30` | `oklch(17.49% 0.0730 263.06)` | Mysterious Depths | white, 19 to 1 |
| 3 | `#360032` | `oklch(23.06% 0.1044 331.26)` | Exquisite Eggplant | white, 17.4 to 1 |
| 4 | `#500051` | `oklch(30.35% 0.1402 327.44)` | Beaten Purple | white, 14.3 to 1 |
| 5 | `#1e356c` | `oklch(34.40% 0.0990 264.40)` | Passionate Blue | white, 11.7 to 1 |
| 6 | `#064f4b` | `oklch(38.75% 0.0649 188.50)` | Action Green | white, 9.3 to 1 |
| 7 | `#196f32` | `oklch(47.73% 0.1239 148.41)` | Hawaiian Ti Leaf | white, 6.2 to 1 |
| 8 | `#526100` | `oklch(46.27% 0.1095 119.68)` | Camouflage Green | white, 6.8 to 1 |
| 9 | `#4b440c` | `oklch(38.19% 0.0730 102.19)` | Alligator Gladiator | white, 9.8 to 1 |

## CSS

```css
background: linear-gradient(45deg, #020c07 0.000% 11.111%, #020d30 11.111% 22.222%, #360032 22.222% 33.333%, #500051 33.333% 44.444%, #1e356c 44.444% 55.556%, #064f4b 55.556% 66.667%, #196f32 66.667% 77.778%, #526100 77.778% 88.889%, #4b440c 88.889% 100.000%);
background: linear-gradient(45deg, oklch(14.17% 0.0234 162.42) 0.000% 11.111%, oklch(17.49% 0.0730 263.06) 11.111% 22.222%, oklch(23.06% 0.1044 331.26) 22.222% 33.333%, oklch(30.35% 0.1402 327.44) 33.333% 44.444%, oklch(34.40% 0.0990 264.40) 44.444% 55.556%, oklch(38.75% 0.0649 188.50) 55.556% 66.667%, oklch(47.73% 0.1239 148.41) 66.667% 77.778%, oklch(46.27% 0.1095 119.68) 77.778% 88.889%, oklch(38.19% 0.0730 102.19) 88.889% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.023 | 162.4 |
| 2 | 0.205 | 0.103 | 316.7 |
| 3 | 0.315 | 0.141 | 320.9 |
| 4 | 0.374 | 0.062 | 199.4 |
| 5 | 0.492 | 0.136 | 136 |
| 6 | 0.382 | 0.073 | 102.2 |

## Other forms

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