# Midnight violet sage bands

Navy and gray linear swatches with 13 colors: #000d27, #020c30, #0c0e37, #19143e, #271f46, #342d4e, #423e55, #4f515e, #5a636a, #667674, #76857c, #829488, #899f91. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy and gray linear swatches
- Seed: `kYKjK2GhzCieWQa5Bz2ygezVaLvu`
- Page: https://grabient.com/kYKjK2GhzCieWQa5Bz2ygezVaLvu?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, muted, dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.8 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 | `#000d27` | `oklch(16.57% 0.0578 256.55)` | Void | white, 19.2 to 1 |
| 2 | `#020c30` | `oklch(17.56% 0.0736 263.99)` | Mysterious Depths | white, 19 to 1 |
| 3 | `#0c0e37` | `oklch(19.38% 0.0784 274.60)` | Infinite Night | white, 18.5 to 1 |
| 4 | `#19143e` | `oklch(22.59% 0.0766 283.14)` | Prune Plum | white, 17.3 to 1 |
| 5 | `#271f46` | `oklch(27.08% 0.0694 290.77)` | Black Market | white, 15.3 to 1 |
| 6 | `#342d4e` | `oklch(32.14% 0.0579 292.80)` | Midnight Pie | white, 12.8 to 1 |
| 7 | `#423e55` | `oklch(37.82% 0.0388 291.01)` | Artistic Licence | white, 10.1 to 1 |
| 8 | `#4f515e` | `oklch(43.74% 0.0213 278.67)` | Night Night | white, 7.8 to 1 |
| 9 | `#5a636a` | `oklch(49.50% 0.0162 241.18)` | Calligraphy | white, 6.1 to 1 |
| 10 | `#667674` | `oklch(55.18% 0.0186 189.00)` | North Grey | white, 4.7 to 1 |
| 11 | `#76857c` | `oklch(60.23% 0.0221 159.98)` | Limerick | black, 5.4 to 1 |
| 12 | `#829488` | `oklch(64.89% 0.0274 156.66)` | Wethersfield Moss | black, 6.5 to 1 |
| 13 | `#899f91` | `oklch(68.11% 0.0317 158.72)` | Mossleaf | black, 7.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000d27 0.000% 7.692%, #020c30 7.692% 15.385%, #0c0e37 15.385% 23.077%, #19143e 23.077% 30.769%, #271f46 30.769% 38.462%, #342d4e 38.462% 46.154%, #423e55 46.154% 53.846%, #4f515e 53.846% 61.538%, #5a636a 61.538% 69.231%, #667674 69.231% 76.923%, #76857c 76.923% 84.615%, #829488 84.615% 92.308%, #899f91 92.308% 100.000%);
background: linear-gradient(90deg, oklch(16.57% 0.0578 256.55) 0.000% 7.692%, oklch(17.56% 0.0736 263.99) 7.692% 15.385%, oklch(19.38% 0.0784 274.60) 15.385% 23.077%, oklch(22.59% 0.0766 283.14) 23.077% 30.769%, oklch(27.08% 0.0694 290.77) 30.769% 38.462%, oklch(32.14% 0.0579 292.80) 38.462% 46.154%, oklch(37.82% 0.0388 291.01) 46.154% 53.846%, oklch(43.74% 0.0213 278.67) 53.846% 61.538%, oklch(49.50% 0.0162 241.18) 61.538% 69.231%, oklch(55.18% 0.0186 189.00) 69.231% 76.923%, oklch(60.23% 0.0221 159.98) 76.923% 84.615%, oklch(64.89% 0.0274 156.66) 84.615% 92.308%, oklch(68.11% 0.0317 158.72) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.165 | 0.069 | 255.9 |
| 2 | 0.205 | 0.079 | 278.1 |
| 3 | 0.311 | 0.061 | 292.9 |
| 4 | 0.449 | 0.019 | 273.9 |
| 5 | 0.583 | 0.021 | 167.2 |
| 6 | 0.681 | 0.032 | 158.7 |

## In these collections

- [Navy swatches](https://grabient.com/navy-swatches)

## Other forms

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