# Complementary navy, gray and brown linear swatches

Complementary navy, gray and brown linear swatches with 14 colors: #000c22, #001424, #061f28, #14292c, #213330, #303e34, #414838, #51513d, #605c41, #706644, #807048, #907a4c, #a08450, #ab8b52. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWKCW0owm5jQKthElTzUx6-w`
- Page: https://grabient.com/kWKCW0owm5jQKthElTzUx6-w?style=linearSwatches&steps=14
- Drawn as: linear swatches, 14 steps, 90 degrees
- Kinds: dark to light
- Hues: complementary
- 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 | `#000c22` | `oklch(15.77% 0.0507 254.32)` | Void | white, 19.4 to 1 |
| 2 | `#001424` | `oklch(18.47% 0.0441 242.39)` | Kuretake Black Manga | white, 18.6 to 1 |
| 3 | `#061f28` | `oklch(22.36% 0.0348 225.27)` | Crow Feather | white, 17 to 1 |
| 4 | `#14292c` | `oklch(26.57% 0.0273 205.20)` | Black Box | white, 15.1 to 1 |
| 5 | `#213330` | `oklch(30.55% 0.0244 181.52)` | Concealed Green | white, 13.2 to 1 |
| 6 | `#303e34` | `oklch(34.70% 0.0243 152.86)` | Celtic | white, 11.3 to 1 |
| 7 | `#414838` | `oklch(38.89% 0.0268 126.45)` | Copper Pyrite Green | white, 9.5 to 1 |
| 8 | `#51513d` | `oklch(42.98% 0.0320 109.07)` | Panda | white, 8 to 1 |
| 9 | `#605c41` | `oklch(47.06% 0.0407 99.47)` | Pinyon Pine | white, 6.7 to 1 |
| 10 | `#706644` | `oklch(51.05% 0.0508 93.81)` | Mount Olive | white, 5.7 to 1 |
| 11 | `#807048` | `oklch(54.90% 0.0600 88.72)` | Valencia Moss | white, 4.8 to 1 |
| 12 | `#907a4c` | `oklch(58.96% 0.0693 84.71)` | Stonetalon Mountains | black, 5 to 1 |
| 13 | `#a08450` | `oklch(62.73% 0.0780 82.19)` | Bristle Grass | black, 5.9 to 1 |
| 14 | `#ab8b52` | `oklch(65.35% 0.0841 80.52)` | Teak | black, 6.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000c22 0.000% 7.143%, #001424 7.143% 14.286%, #061f28 14.286% 21.429%, #14292c 21.429% 28.571%, #213330 28.571% 35.714%, #303e34 35.714% 42.857%, #414838 42.857% 50.000%, #51513d 50.000% 57.143%, #605c41 57.143% 64.286%, #706644 64.286% 71.429%, #807048 71.429% 78.571%, #907a4c 78.571% 85.714%, #a08450 85.714% 92.857%, #ab8b52 92.857% 100.000%);
background: linear-gradient(90deg, oklch(15.77% 0.0507 254.32) 0.000% 7.143%, oklch(18.47% 0.0441 242.39) 7.143% 14.286%, oklch(22.36% 0.0348 225.27) 14.286% 21.429%, oklch(26.57% 0.0273 205.20) 21.429% 28.571%, oklch(30.55% 0.0244 181.52) 28.571% 35.714%, oklch(34.70% 0.0243 152.86) 35.714% 42.857%, oklch(38.89% 0.0268 126.45) 42.857% 50.000%, oklch(42.98% 0.0320 109.07) 50.000% 57.143%, oklch(47.06% 0.0407 99.47) 57.143% 64.286%, oklch(51.05% 0.0508 93.81) 64.286% 71.429%, oklch(54.90% 0.0600 88.72) 71.429% 78.571%, oklch(58.96% 0.0693 84.71) 78.571% 85.714%, oklch(62.73% 0.0780 82.19) 85.714% 92.857%, oklch(65.35% 0.0841 80.52) 92.857% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.157 | 0.051 | 253.8 |
| 2 | 0.276 | 0.026 | 199.9 |
| 3 | 0.409 | 0.029 | 116.5 |
| 4 | 0.539 | 0.058 | 90 |
| 5 | 0.654 | 0.084 | 80.5 |

## In these collections

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

## Other forms

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