# Muted olive cobalt bands

Complementary brown, gray and blue linear swatches with 13 colors: #564d1a, #515031, #594e41, #575055, #545367, #525383, #4d559a, #4956af, #4458c4, #3f5ad5, #3c5ce2, #365dea, #315eee. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary brown, gray and blue linear swatches
- Seed: `kcajNGtos_LiFrk7Hj0vjG_MHCP3ETL-xVC_o`
- Page: https://grabient.com/kcajNGtos_LiFrk7Hj0vjG_MHCP3ETL-xVC_o?style=linearSwatches&steps=13&angle=135
- Drawn as: linear swatches, 13 steps, 135 degrees
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.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 | `#564d1a` | `oklch(41.73% 0.0703 99.14)` | Bronze Olive | white, 8.5 to 1 |
| 2 | `#515031` | `oklch(42.33% 0.0472 105.88)` | Warplock Bronze | white, 8.2 to 1 |
| 3 | `#594e41` | `oklch(43.15% 0.0254 74.77)` | Afternoon Tea | white, 8 to 1 |
| 4 | `#575055` | `oklch(44.06% 0.0126 335.55)` | Soft Panther | white, 7.7 to 1 |
| 5 | `#545367` | `oklch(45.10% 0.0321 286.11)` | Academy Purple | white, 7.4 to 1 |
| 6 | `#525383` | `oklch(46.28% 0.0773 281.49)` | Dusk | white, 7.1 to 1 |
| 7 | `#4d559a` | `oklch(47.59% 0.1109 276.19)` | Governor Bay | white, 6.8 to 1 |
| 8 | `#4956af` | `oklch(49.04% 0.1405 273.78)` | Chinese Bellflower | white, 6.4 to 1 |
| 9 | `#4458c4` | `oklch(50.70% 0.1683 271.16)` | Free Speech Blue | white, 6 to 1 |
| 10 | `#3f5ad5` | `oklch(52.15% 0.1907 269.31)` | Warm Blue | white, 5.7 to 1 |
| 11 | `#3c5ce2` | `oklch(53.29% 0.2072 268.20)` | Veteran’s Day Blue | white, 5.5 to 1 |
| 12 | `#365dea` | `oklch(53.99% 0.2172 266.88)` | Veteran’s Day Blue | white, 5.3 to 1 |
| 13 | `#315eee` | `oklch(54.33% 0.2219 265.76)` | Retro Blue | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #564d1a 0.000% 7.692%, #515031 7.692% 15.385%, #594e41 15.385% 23.077%, #575055 23.077% 30.769%, #545367 30.769% 38.462%, #525383 38.462% 46.154%, #4d559a 46.154% 53.846%, #4956af 53.846% 61.538%, #4458c4 61.538% 69.231%, #3f5ad5 69.231% 76.923%, #3c5ce2 76.923% 84.615%, #365dea 84.615% 92.308%, #315eee 92.308% 100.000%);
background: linear-gradient(135deg, oklch(41.73% 0.0703 99.14) 0.000% 7.692%, oklch(42.33% 0.0472 105.88) 7.692% 15.385%, oklch(43.15% 0.0254 74.77) 15.385% 23.077%, oklch(44.06% 0.0126 335.55) 23.077% 30.769%, oklch(45.10% 0.0321 286.11) 30.769% 38.462%, oklch(46.28% 0.0773 281.49) 38.462% 46.154%, oklch(47.59% 0.1109 276.19) 46.154% 53.846%, oklch(49.04% 0.1405 273.78) 53.846% 61.538%, oklch(50.70% 0.1683 271.16) 61.538% 69.231%, oklch(52.15% 0.1907 269.31) 69.231% 76.923%, oklch(53.29% 0.2072 268.20) 76.923% 84.615%, oklch(53.99% 0.2172 266.88) 84.615% 92.308%, oklch(54.33% 0.2219 265.76) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.417 | 0.07 | 99.1 |
| 2 | 0.429 | 0.03 | 92.8 |
| 3 | 0.445 | 0.015 | -56.2 |
| 4 | 0.465 | 0.083 | -79.5 |
| 5 | 0.488 | 0.136 | -85.8 |
| 6 | 0.516 | 0.182 | -90 |
| 7 | 0.535 | 0.211 | -92.1 |
| 8 | 0.543 | 0.222 | -94.2 |

## In these collections

- [Blue swatches](https://grabient.com/blue-swatches)
- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)

## Other forms

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