# Blue, purple, red and tan linear gradient

Blue, purple, red and tan linear gradient with 8 colors: #2b7faa, #1d5290, #352b62, #671f36, #9e301f, #c35b24, #c78a43, #adad6d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kckEqnN6rCSoiQ-tpkjPDZDMs2QZWqcK3R9Eo`
- Page: https://grabient.com/kckEqnN6rCSoiQ-tpkjPDZDMs2QZWqcK3R9Eo?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: dark center, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#2b7faa` | `oklch(56.69% 0.1020 234.84)` | Blue Bird Day | black, 4.7 to 1 |
| 2 | `#1d5290` | `oklch(43.70% 0.1171 254.92)` | Nautical Blue | white, 7.9 to 1 |
| 3 | `#352b62` | `oklch(33.07% 0.0937 288.74)` | Paris M | white, 12.5 to 1 |
| 4 | `#671f36` | `oklch(35.83% 0.1047 3.77)` | Wine Country | white, 11.5 to 1 |
| 5 | `#9e301f` | `oklch(47.24% 0.1488 31.24)` | Sugo Della Nonna | white, 7.2 to 1 |
| 6 | `#c35b24` | `oklch(59.06% 0.1488 44.98)` | Grieving Daylily | black, 4.8 to 1 |
| 7 | `#c78a43` | `oklch(68.11% 0.1144 68.23)` | Golden Leaf | black, 7.1 to 1 |
| 8 | `#adad6d` | `oklch(73.23% 0.0854 108.39)` | Wasabi Green | black, 8.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2b7faa 0.0%, #1d5290 14.3%, #352b62 28.6%, #671f36 42.9%, #9e301f 57.1%, #c35b24 71.4%, #c78a43 85.7%, #adad6d 100.0%);
background: linear-gradient(90deg in oklch, oklch(56.69% 0.1020 234.84) 0.0%, oklch(43.70% 0.1171 254.92) 14.3%, oklch(33.07% 0.0937 288.74) 28.6%, oklch(35.83% 0.1047 3.77) 42.9%, oklch(47.24% 0.1488 31.24) 57.1%, oklch(59.06% 0.1488 44.98) 71.4%, oklch(68.11% 0.1144 68.23) 85.7%, oklch(73.23% 0.0854 108.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.567 | 0.102 | 234.8 |
| 2 | 0.437 | 0.117 | 254.9 |
| 3 | 0.331 | 0.094 | 288.7 |
| 4 | 0.358 | 0.105 | 363.8 |
| 5 | 0.472 | 0.149 | 391.2 |
| 6 | 0.591 | 0.149 | 405 |
| 7 | 0.681 | 0.114 | 428.2 |
| 8 | 0.732 | 0.085 | 468.4 |

## In these collections

- [Red sumac roadside](https://grabient.com/red-sumac-roadside)

## Other forms

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