# Blue, purple, brown and olive linear swatches

Blue, purple, brown and olive linear swatches with 7 colors: #266aae, #1d4890, #3c316c, #5f304f, #7f493c, #906d3e, #859257. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYg1yzMq5Ba0fRO2nMhRRxFdCeRm`
- Page: https://grabient.com/kYg1yzMq5Ba0fRO2nMhRRxFdCeRm?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 3.3 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 | `#266aae` | `oklch(51.57% 0.1268 251.72)` | Mid Blue | white, 5.6 to 1 |
| 2 | `#1d4890` | `oklch(41.44% 0.1292 260.43)` | Nuit Blanche | white, 8.8 to 1 |
| 3 | `#3c316c` | `oklch(35.72% 0.0982 289.37)` | Minsk | white, 11.3 to 1 |
| 4 | `#5f304f` | `oklch(38.19% 0.0795 341.81)` | Japanese Violet | white, 10.3 to 1 |
| 5 | `#7f493c` | `oklch(46.52% 0.0774 34.46)` | Nutmeg | white, 7.2 to 1 |
| 6 | `#906d3e` | `oklch(56.08% 0.0777 73.27)` | Olde World Gold | white, 4.6 to 1 |
| 7 | `#859257` | `oklch(63.39% 0.0827 118.92)` | Pretty Maiden | black, 6.2 to 1 |

## CSS

```css
background: linear-gradient(160deg, #266aae 0.000% 14.286%, #1d4890 14.286% 28.571%, #3c316c 28.571% 42.857%, #5f304f 42.857% 57.143%, #7f493c 57.143% 71.429%, #906d3e 71.429% 85.714%, #859257 85.714% 100.000%);
background: linear-gradient(160deg, oklch(51.57% 0.1268 251.72) 0.000% 14.286%, oklch(41.44% 0.1292 260.43) 14.286% 28.571%, oklch(35.72% 0.0982 289.37) 28.571% 42.857%, oklch(38.19% 0.0795 341.81) 42.857% 57.143%, oklch(46.52% 0.0774 34.46) 57.143% 71.429%, oklch(56.08% 0.0777 73.27) 71.429% 85.714%, oklch(63.39% 0.0827 118.92) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.516 | 0.127 | 251.7 |
| 2 | 0.398 | 0.127 | 264.4 |
| 3 | 0.354 | 0.085 | 306.7 |
| 4 | 0.429 | 0.079 | 377.5 |
| 5 | 0.543 | 0.077 | 424 |
| 6 | 0.634 | 0.083 | 478.9 |

## In these collections

- [Snow gum blue hour](https://grabient.com/snow-gum-blue-hour)

## Other forms

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