# Midnight teal ochre bands

Complementary navy, gray and brown linear swatches with 13 colors: #000c22, #001525, #082128, #182c2d, #263731, #374235, #494c3b, #5a5740, #6b6343, #7c6d47, #8e784b, #9f834f, #ab8b52. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary navy, gray and brown linear swatches
- Seed: `kWKCW0owm5jQKthElTzUx6-w`
- Page: https://grabient.com/kWKCW0owm5jQKthElTzUx6-w?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 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 | `#001525` | `oklch(18.75% 0.0435 240.95)` | Creeping Death | white, 18.5 to 1 |
| 3 | `#082128` | `oklch(23.07% 0.0333 222.09)` | Crow Feather | white, 16.7 to 1 |
| 4 | `#182c2d` | `oklch(27.56% 0.0262 199.93)` | Black Chasm | white, 14.6 to 1 |
| 5 | `#263731` | `oklch(31.92% 0.0241 172.18)` | Tetsu Black | white, 12.5 to 1 |
| 6 | `#374235` | `oklch(36.45% 0.0251 141.15)` | Sensaimidori Green | white, 10.5 to 1 |
| 7 | `#494c3b` | `oklch(40.94% 0.0289 116.45)` | Sooty Willow Bamboo | white, 8.7 to 1 |
| 8 | `#5a5740` | `oklch(45.36% 0.0367 102.79)` | Devlan Mud | white, 7.2 to 1 |
| 9 | `#6b6343` | `oklch(49.74% 0.0475 95.47)` | Bronze Medal | white, 6 to 1 |
| 10 | `#7c6d47` | `oklch(53.94% 0.0579 90.03)` | Mossy Shade | white, 5 to 1 |
| 11 | `#8e784b` | `oklch(58.28% 0.0678 85.26)` | Rustic Ranch | black, 4.9 to 1 |
| 12 | `#9f834f` | `oklch(62.45% 0.0774 82.36)` | Wheatmeal | black, 5.8 to 1 |
| 13 | `#ab8b52` | `oklch(65.35% 0.0841 80.52)` | Teak | black, 6.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000c22 0.000% 7.692%, #001525 7.692% 15.385%, #082128 15.385% 23.077%, #182c2d 23.077% 30.769%, #263731 30.769% 38.462%, #374235 38.462% 46.154%, #494c3b 46.154% 53.846%, #5a5740 53.846% 61.538%, #6b6343 61.538% 69.231%, #7c6d47 69.231% 76.923%, #8e784b 76.923% 84.615%, #9f834f 84.615% 92.308%, #ab8b52 92.308% 100.000%);
background: linear-gradient(90deg, oklch(15.77% 0.0507 254.32) 0.000% 7.692%, oklch(18.75% 0.0435 240.95) 7.692% 15.385%, oklch(23.07% 0.0333 222.09) 15.385% 23.077%, oklch(27.56% 0.0262 199.93) 23.077% 30.769%, oklch(31.92% 0.0241 172.18) 30.769% 38.462%, oklch(36.45% 0.0251 141.15) 38.462% 46.154%, oklch(40.94% 0.0289 116.45) 46.154% 53.846%, oklch(45.36% 0.0367 102.79) 53.846% 61.538%, oklch(49.74% 0.0475 95.47) 61.538% 69.231%, oklch(53.94% 0.0579 90.03) 69.231% 76.923%, oklch(58.28% 0.0678 85.26) 76.923% 84.615%, oklch(62.45% 0.0774 82.36) 84.615% 92.308%, oklch(65.35% 0.0841 80.52) 92.308% 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=13)
- [PNG](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.png?style=linearSwatches&steps=13)
- [SVG](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.svg?style=linearSwatches&steps=13)
- [CSS](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.css?style=linearSwatches&steps=13)
- [ASE](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.ase?style=linearSwatches&steps=13)
- [GPL](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.gpl?style=linearSwatches&steps=13)
- [GRD](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.grd?style=linearSwatches&steps=13)
- [Design tokens](https://grabient.com/kWKCW0owm5jQKthElTzUx6-w.tokens.json?style=linearSwatches&steps=13)
- [Social card](https://grabient.com/api/og?seed=kWKCW0owm5jQKthElTzUx6-w&style=linearSwatches&steps=13)
- [Palettes like this one](https://grabient.com/palettes?q=kWKCW0owm5jQKthElTzUx6-w)
- [Guide for agents](https://grabient.com/llms.txt)