# Vivid brown, olive and blue linear gradient

Vivid brown, olive and blue linear gradient with 32 colors: #430001, #4c0300, #580f00, #651d00, #702a00, #793700, #814400, #885200, #8e5f04, #916b09, #937506, #937e00, #918700, #8d8d02, #889212, #869419, #829420, #7a942b, #6b933d, #569154, #478a68, #418273, #3b7977, #27727d, #006886, #005b8c, #004d9a, #143ea1, #1531a5, #0b24aa, #00269d, #002a8e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI`
- Page: https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 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 | `#430001` | `oklch(24.05% 0.0984 28.30)` | Eyelids | white, 16.9 to 1 |
| 2 | `#4c0300` | `oklch(26.53% 0.1046 30.57)` | Walnut Brown | white, 15.8 to 1 |
| 3 | `#580f00` | `oklch(30.11% 0.1073 34.35)` | Mathematical Rage | white, 14.1 to 1 |
| 4 | `#651d00` | `oklch(34.19% 0.1095 39.03)` | Raw Chocolate | white, 12.2 to 1 |
| 5 | `#702a00` | `oklch(38.21% 0.1102 44.50)` | Chestnut | white, 10.3 to 1 |
| 6 | `#793700` | `oklch(41.79% 0.1092 50.83)` | Red Beech | white, 8.9 to 1 |
| 7 | `#814400` | `oklch(45.42% 0.1081 58.50)` | Chocolate Pancakes | white, 7.5 to 1 |
| 8 | `#885200` | `oklch(48.99% 0.1083 66.91)` | Spear Shaft | white, 6.4 to 1 |
| 9 | `#8e5f04` | `oklch(52.29% 0.1089 75.36)` | Rat Brown | white, 5.5 to 1 |
| 10 | `#916b09` | `oklch(55.09% 0.1107 83.06)` | Sassy Olive | white, 4.8 to 1 |
| 11 | `#937506` | `oklch(57.47% 0.1159 90.37)` | Bhūrā Brown | black, 4.7 to 1 |
| 12 | `#937e00` | `oklch(59.52% 0.1228 97.50)` | Moscow Papyrus | black, 5.2 to 1 |
| 13 | `#918700` | `oklch(61.16% 0.1293 104.18)` | Thicket Green | black, 5.6 to 1 |
| 14 | `#8d8d02` | `oklch(62.35% 0.1357 110.10)` | Old Asparagus | black, 5.9 to 1 |
| 15 | `#889212` | `oklch(63.05% 0.1375 114.38)` | Snakes in the Grass | black, 6.1 to 1 |
| 16 | `#869419` | `oklch(63.28% 0.1377 116.37)` | Snakes in the Grass | black, 6.2 to 1 |
| 17 | `#829420` | `oklch(63.09% 0.1360 118.19)` | Siskin Sprout | black, 6.1 to 1 |
| 18 | `#7a942b` | `oklch(62.48% 0.1317 122.12)` | Siskin Sprout | black, 6 to 1 |
| 19 | `#6b933d` | `oklch(61.48% 0.1239 130.37)` | Mary’s Garden | black, 5.8 to 1 |
| 20 | `#569154` | `oklch(59.97% 0.1079 143.37)` | Ineffable Forest | black, 5.5 to 1 |
| 21 | `#478a68` | `oklch(58.02% 0.0879 159.37)` | Mallard Green | black, 5.1 to 1 |
| 22 | `#418273` | `oklch(55.80% 0.0710 176.51)` | Aussie Surf | black, 4.6 to 1 |
| 23 | `#3b7977` | `oklch(53.48% 0.0644 192.92)` | Faded Jade | white, 5 to 1 |
| 24 | `#27727d` | `oklch(50.99% 0.0733 208.86)` | King Tide | white, 5.5 to 1 |
| 25 | `#006886` | `oklch(48.18% 0.0921 225.98)` | Ansel | white, 6.3 to 1 |
| 26 | `#005b8c` | `oklch(45.31% 0.1079 242.16)` | Buccaneer Blue | white, 7.2 to 1 |
| 27 | `#004d9a` | `oklch(42.66% 0.1420 255.31)` | Freshwater Lake | white, 8.3 to 1 |
| 28 | `#143ea1` | `oklch(40.44% 0.1670 263.33)` | Amalfitan Azure | white, 9.4 to 1 |
| 29 | `#1531a5` | `oklch(38.45% 0.1877 266.06)` | Egyptian Blue | white, 10.4 to 1 |
| 30 | `#0b24aa` | `oklch(36.71% 0.2077 265.46)` | City Hunter Blue | white, 11.3 to 1 |
| 31 | `#00269d` | `oklch(35.29% 0.1933 263.69)` | Deepsea Kraken | white, 11.8 to 1 |
| 32 | `#002a8e` | `oklch(34.26% 0.1690 262.78)` | Blue Torus | white, 12.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #430001 0.0%, #4c0300 3.2%, #580f00 6.5%, #651d00 9.7%, #702a00 12.9%, #793700 16.1%, #814400 19.4%, #885200 22.6%, #8e5f04 25.8%, #916b09 29.0%, #937506 32.3%, #937e00 35.5%, #918700 38.7%, #8d8d02 41.9%, #889212 45.2%, #869419 48.4%, #829420 51.6%, #7a942b 54.8%, #6b933d 58.1%, #569154 61.3%, #478a68 64.5%, #418273 67.7%, #3b7977 71.0%, #27727d 74.2%, #006886 77.4%, #005b8c 80.6%, #004d9a 83.9%, #143ea1 87.1%, #1531a5 90.3%, #0b24aa 93.5%, #00269d 96.8%, #002a8e 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.05% 0.0984 28.30) 0.0%, oklch(26.53% 0.1046 30.57) 3.2%, oklch(30.11% 0.1073 34.35) 6.5%, oklch(34.19% 0.1095 39.03) 9.7%, oklch(38.21% 0.1102 44.50) 12.9%, oklch(41.79% 0.1092 50.83) 16.1%, oklch(45.42% 0.1081 58.50) 19.4%, oklch(48.99% 0.1083 66.91) 22.6%, oklch(52.29% 0.1089 75.36) 25.8%, oklch(55.09% 0.1107 83.06) 29.0%, oklch(57.47% 0.1159 90.37) 32.3%, oklch(59.52% 0.1228 97.50) 35.5%, oklch(61.16% 0.1293 104.18) 38.7%, oklch(62.35% 0.1357 110.10) 41.9%, oklch(63.05% 0.1375 114.38) 45.2%, oklch(63.28% 0.1377 116.37) 48.4%, oklch(63.09% 0.1360 118.19) 51.6%, oklch(62.48% 0.1317 122.12) 54.8%, oklch(61.48% 0.1239 130.37) 58.1%, oklch(59.97% 0.1079 143.37) 61.3%, oklch(58.02% 0.0879 159.37) 64.5%, oklch(55.80% 0.0710 176.51) 67.7%, oklch(53.48% 0.0644 192.92) 71.0%, oklch(50.99% 0.0733 208.86) 74.2%, oklch(48.18% 0.0921 225.98) 77.4%, oklch(45.31% 0.1079 242.16) 80.6%, oklch(42.66% 0.1420 255.31) 83.9%, oklch(40.44% 0.1670 263.33) 87.1%, oklch(38.45% 0.1877 266.06) 90.3%, oklch(36.71% 0.2077 265.46) 93.5%, oklch(35.29% 0.1933 263.69) 96.8%, 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=32)
- [PNG](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.png?steps=32)
- [SVG](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.svg?steps=32)
- [CSS](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.css?steps=32)
- [ASE](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.ase?steps=32)
- [GPL](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.gpl?steps=32)
- [GRD](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.grd?steps=32)
- [Design tokens](https://grabient.com/kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI.tokens.json?steps=32)
- [Social card](https://grabient.com/api/og?seed=kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI&steps=32)
- [Palettes like this one](https://grabient.com/palettes?q=kcPUwUMqjCMWoRBPscNzq5B0OXx-0uceq9ZAI)
- [Guide for agents](https://grabient.com/llms.txt)