# Complementary blue, gray and brown linear gradient

Complementary blue, gray and brown linear gradient with 7 colors: #357ba3, #6e9aa8, #9dab99, #b5a284, #ab8263, #7c5a46, #493834. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYjUSpVhC8t0Ks5Wl7rwxW-y2JPe`
- Page: https://grabient.com/kYjUSpVhC8t0Ks5Wl7rwxW-y2JPe
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.5 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 | `#357ba3` | `oklch(55.51% 0.0937 237.66)` | Prominent Blue | white, 4.6 to 1 |
| 2 | `#6e9aa8` | `oklch(65.93% 0.0522 219.54)` | Left Bank Blue | black, 6.8 to 1 |
| 3 | `#9dab99` | `oklch(72.43% 0.0294 138.67)` | Garden | black, 8.6 to 1 |
| 4 | `#b5a284` | `oklch(71.97% 0.0462 78.48)` | Chamois Tan | black, 8.4 to 1 |
| 5 | `#ab8263` | `oklch(63.81% 0.0671 57.97)` | Sylvaneth Bark | black, 6 to 1 |
| 6 | `#7c5a46` | `oklch(49.83% 0.0548 51.20)` | Stagecoach | white, 6.1 to 1 |
| 7 | `#493834` | `oklch(35.83% 0.0248 36.87)` | Brown Beauty | white, 11 to 1 |

## CSS

```css
background: linear-gradient(90deg, #357ba3 0.0%, #6e9aa8 16.7%, #9dab99 33.3%, #b5a284 50.0%, #ab8263 66.7%, #7c5a46 83.3%, #493834 100.0%);
background: linear-gradient(90deg in oklch, oklch(55.51% 0.0937 237.66) 0.0%, oklch(65.93% 0.0522 219.54) 16.7%, oklch(72.43% 0.0294 138.67) 33.3%, oklch(71.97% 0.0462 78.48) 50.0%, oklch(63.81% 0.0671 57.97) 66.7%, oklch(49.83% 0.0548 51.20) 83.3%, oklch(35.83% 0.0248 36.87) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.555 | 0.094 | 237.7 |
| 2 | 0.677 | 0.045 | 210.2 |
| 3 | 0.732 | 0.029 | 105.6 |
| 4 | 0.681 | 0.065 | 63.3 |
| 5 | 0.528 | 0.059 | 53.8 |
| 6 | 0.358 | 0.025 | 36.9 |

## In these collections

- [Color trends 2027 swatches](https://grabient.com/color-trends-2027-swatches)
- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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