# Navy, gray and black linear swatches

Navy, gray and black linear swatches with 6 colors: #122849, #626f73, #b7aa97, #baa583, #616454, #122122. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYRzG3w4Y7t6LLtdE0BPwlEJ4HyW`
- Page: https://grabient.com/kYRzG3w4Y7t6LLtdE0BPwlEJ4HyW?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: light center, neutral
- Hues: complementary
- Contrast of its darkest and lightest colors: 7.2 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 | `#122849` | `oklch(27.95% 0.0675 258.05)` | Rurikon Blue | white, 14.6 to 1 |
| 2 | `#626f73` | `oklch(53.15% 0.0165 222.12)` | American River | white, 5.2 to 1 |
| 3 | `#b7aa97` | `oklch(74.41% 0.0303 77.34)` | Safari Chic | black, 9.2 to 1 |
| 4 | `#baa583` | `oklch(73.23% 0.0524 80.51)` | Old Salem | black, 8.8 to 1 |
| 5 | `#616454` | `oklch(49.61% 0.0248 116.44)` | Amazon Foliage | white, 6 to 1 |
| 6 | `#122122` | `oklch(23.62% 0.0207 196.76)` | Black Feather | white, 16.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #122849 0.000% 16.667%, #626f73 16.667% 33.333%, #b7aa97 33.333% 50.000%, #baa583 50.000% 66.667%, #616454 66.667% 83.333%, #122122 83.333% 100.000%);
background: linear-gradient(90deg, oklch(27.95% 0.0675 258.05) 0.000% 16.667%, oklch(53.15% 0.0165 222.12) 16.667% 33.333%, oklch(74.41% 0.0303 77.34) 33.333% 50.000%, oklch(73.23% 0.0524 80.51) 50.000% 66.667%, oklch(49.61% 0.0248 116.44) 66.667% 83.333%, oklch(23.62% 0.0207 196.76) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.068 | 258 |
| 2 | 0.531 | 0.017 | 222.1 |
| 3 | 0.744 | 0.03 | 77.3 |
| 4 | 0.732 | 0.052 | 80.5 |
| 5 | 0.496 | 0.025 | 116.4 |
| 6 | 0.236 | 0.021 | 196.8 |

## In these collections

- [Jade rabbit moonlight](https://grabient.com/jade-rabbit-moonlight)

## Other forms

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