# Vivid brown, olive and blue linear gradient

Vivid brown, olive and blue linear gradient with 8 colors: #430001, #742f00, #906909, #8b8f07, #709337, #397878, #0d449f, #002a8e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI`
- Page: https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI?steps=8
- Drawn as: linear gradient, 8 steps, 90 degrees
- Kinds: light center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.8 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 | `#430001` | `oklch(24.05% 0.0984 28.30)` | Eyelids | white, 16.9 to 1 |
| 2 | `#742f00` | `oklch(39.77% 0.1099 47.05)` | Bay Brown | white, 9.7 to 1 |
| 3 | `#906909` | `oklch(54.72% 0.1102 82.02)` | Sassy Olive | white, 4.9 to 1 |
| 4 | `#8b8f07` | `oklch(62.60% 0.1364 111.61)` | Old Asparagus | black, 6 to 1 |
| 5 | `#709337` | `oklch(61.81% 0.1268 127.46)` | Fresh Herb | black, 5.9 to 1 |
| 6 | `#397878` | `oklch(53.15% 0.0648 195.09)` | Grand Canal | white, 5 to 1 |
| 7 | `#0d449f` | `oklch(41.34% 0.1585 260.61)` | Space Explorer | white, 8.9 to 1 |
| 8 | `#002a8e` | `oklch(34.26% 0.1690 262.78)` | Blue Torus | white, 12.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #430001 0.0%, #742f00 14.3%, #906909 28.6%, #8b8f07 42.9%, #709337 57.1%, #397878 71.4%, #0d449f 85.7%, #002a8e 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.05% 0.0984 28.30) 0.0%, oklch(39.77% 0.1099 47.05) 14.3%, oklch(54.72% 0.1102 82.02) 28.6%, oklch(62.60% 0.1364 111.61) 42.9%, oklch(61.81% 0.1268 127.46) 57.1%, oklch(53.15% 0.0648 195.09) 71.4%, oklch(41.34% 0.1585 260.61) 85.7%, oklch(34.26% 0.1690 262.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.105 | 28.1 |
| 2 | 0.398 | 0.112 | 47.1 |
| 3 | 0.547 | 0.11 | 82 |
| 4 | 0.626 | 0.136 | 111.6 |
| 5 | 0.618 | 0.127 | 127.5 |
| 6 | 0.531 | 0.065 | 195.1 |
| 7 | 0.413 | 0.158 | 260.6 |
| 8 | 0.343 | 0.237 | 262.7 |

## In these collections

- [Red sumac roadside](https://grabient.com/red-sumac-roadside)
- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)

## Other forms

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