# Rust teal roadside

Brown to navy linear gradient with 32 colors: #7d454a, #81464a, #864749, #8c4949, #924a47, #984c44, #9c4e41, #9f4f3c, #9f5036, #9c5130, #98522a, #925325, #8b5421, #83531e, #7a531b, #715219, #685016, #5e4c12, #53480e, #48430b, #3d3f09, #323b0a, #26370d, #1b3513, #0e341a, #003424, #00332d, #003336, #05323d, #123242, #1c3144, #213045. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Brown to navy linear gradient
- Seed: `kWdTgKwqjCrmdxQll8cJw_Ng`
- Page: https://grabient.com/kWdTgKwqjCrmdxQll8cJw_Ng?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 2.4 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 | `#7d454a` | `oklch(46.06% 0.0772 14.77)` | Casandra | white, 7.4 to 1 |
| 2 | `#81464a` | `oklch(46.66% 0.0804 16.48)` | Desert Canyon | white, 7.2 to 1 |
| 3 | `#864749` | `oklch(47.57% 0.0852 18.62)` | Bolero | white, 6.9 to 1 |
| 4 | `#8c4949` | `oklch(48.66% 0.0910 21.15)` | Rhubarb Smoothie | white, 6.6 to 1 |
| 5 | `#924a47` | `oklch(49.80% 0.0970 24.07)` | Cowhide | white, 6.3 to 1 |
| 6 | `#984c44` | `oklch(50.86% 0.1028 27.34)` | Rembrandt Ruby | white, 6 to 1 |
| 7 | `#9c4e41` | `oklch(51.72% 0.1075 30.95)` | Boynton Canyon | white, 5.8 to 1 |
| 8 | `#9f4f3c` | `oklch(52.25% 0.1107 34.87)` | Boynton Canyon | white, 5.7 to 1 |
| 9 | `#9f5036` | `oklch(52.34% 0.1116 39.10)` | Redridge Brown | white, 5.7 to 1 |
| 10 | `#9c5130` | `oklch(52.07% 0.1102 43.68)` | Taisha Red | white, 5.7 to 1 |
| 11 | `#98522a` | `oklch(51.54% 0.1071 48.62)` | Ancient Chest | white, 5.8 to 1 |
| 12 | `#925325` | `oklch(50.78% 0.1028 53.90)` | Sugar Almond | white, 6 to 1 |
| 13 | `#8b5421` | `oklch(49.81% 0.0977 59.50)` | Precious Copper | white, 6.2 to 1 |
| 14 | `#83531e` | `oklch(48.67% 0.0923 65.41)` | Precious Copper | white, 6.5 to 1 |
| 15 | `#7a531b` | `oklch(47.39% 0.0873 71.59)` | Lizard Brown | white, 6.8 to 1 |
| 16 | `#715219` | `oklch(46.00% 0.0830 78.03)` | Field Drab | white, 7.2 to 1 |
| 17 | `#685016` | `oklch(44.47% 0.0799 84.64)` | Field Drab | white, 7.6 to 1 |
| 18 | `#5e4c12` | `oklch(42.52% 0.0773 91.11)` | Mud Brown | white, 8.2 to 1 |
| 19 | `#53480e` | `oklch(40.24% 0.0751 97.58)` | Sugarloaf Brown | white, 9 to 1 |
| 20 | `#48430b` | `oklch(37.81% 0.0732 104.32)` | Alligator Gladiator | white, 10 to 1 |
| 21 | `#3d3f09` | `oklch(35.38% 0.0714 111.57)` | Dark Olive | white, 11 to 1 |
| 22 | `#323b0a` | `oklch(33.12% 0.0696 119.57)` | Dark Olive | white, 11.9 to 1 |
| 23 | `#26370d` | `oklch(31.20% 0.0676 128.56)` | Darkest Forest | white, 12.8 to 1 |
| 24 | `#1b3513` | `oklch(29.78% 0.0654 138.79)` | Darkest Forest | white, 13.4 to 1 |
| 25 | `#0e341a` | `oklch(28.98% 0.0628 151.04)` | Dark Serpent | white, 13.7 to 1 |
| 26 | `#003424` | `oklch(28.68% 0.0595 166.06)` | Pitch-Black Forests | white, 13.9 to 1 |
| 27 | `#00332d` | `oklch(28.76% 0.0512 183.03)` | Fence Green | white, 13.9 to 1 |
| 28 | `#003336` | `oklch(29.09% 0.0495 200.76)` | Nora’s Forest | white, 13.8 to 1 |
| 29 | `#05323d` | `oklch(29.56% 0.0499 218.03)` | Artist Blue | white, 13.6 to 1 |
| 30 | `#123242` | `oklch(30.07% 0.0470 233.86)` | NATO Blue | white, 13.4 to 1 |
| 31 | `#1c3144` | `oklch(30.49% 0.0445 247.14)` | NATO Blue | white, 13.3 to 1 |
| 32 | `#213045` | `oklch(30.71% 0.0427 256.76)` | Crow Black | white, 13.2 to 1 |

## CSS

```css
background: linear-gradient(45deg, #7d454a 0.0%, #81464a 3.2%, #864749 6.5%, #8c4949 9.7%, #924a47 12.9%, #984c44 16.1%, #9c4e41 19.4%, #9f4f3c 22.6%, #9f5036 25.8%, #9c5130 29.0%, #98522a 32.3%, #925325 35.5%, #8b5421 38.7%, #83531e 41.9%, #7a531b 45.2%, #715219 48.4%, #685016 51.6%, #5e4c12 54.8%, #53480e 58.1%, #48430b 61.3%, #3d3f09 64.5%, #323b0a 67.7%, #26370d 71.0%, #1b3513 74.2%, #0e341a 77.4%, #003424 80.6%, #00332d 83.9%, #003336 87.1%, #05323d 90.3%, #123242 93.5%, #1c3144 96.8%, #213045 100.0%);
background: linear-gradient(45deg in oklch, oklch(46.06% 0.0772 14.77) 0.0%, oklch(46.66% 0.0804 16.48) 3.2%, oklch(47.57% 0.0852 18.62) 6.5%, oklch(48.66% 0.0910 21.15) 9.7%, oklch(49.80% 0.0970 24.07) 12.9%, oklch(50.86% 0.1028 27.34) 16.1%, oklch(51.72% 0.1075 30.95) 19.4%, oklch(52.25% 0.1107 34.87) 22.6%, oklch(52.34% 0.1116 39.10) 25.8%, oklch(52.07% 0.1102 43.68) 29.0%, oklch(51.54% 0.1071 48.62) 32.3%, oklch(50.78% 0.1028 53.90) 35.5%, oklch(49.81% 0.0977 59.50) 38.7%, oklch(48.67% 0.0923 65.41) 41.9%, oklch(47.39% 0.0873 71.59) 45.2%, oklch(46.00% 0.0830 78.03) 48.4%, oklch(44.47% 0.0799 84.64) 51.6%, oklch(42.52% 0.0773 91.11) 54.8%, oklch(40.24% 0.0751 97.58) 58.1%, oklch(37.81% 0.0732 104.32) 61.3%, oklch(35.38% 0.0714 111.57) 64.5%, oklch(33.12% 0.0696 119.57) 67.7%, oklch(31.20% 0.0676 128.56) 71.0%, oklch(29.78% 0.0654 138.79) 74.2%, oklch(28.98% 0.0628 151.04) 77.4%, oklch(28.68% 0.0595 166.06) 80.6%, oklch(28.76% 0.0512 183.03) 83.9%, oklch(29.09% 0.0495 200.76) 87.1%, oklch(29.56% 0.0499 218.03) 90.3%, oklch(30.07% 0.0470 233.86) 93.5%, oklch(30.49% 0.0445 247.14) 96.8%, oklch(30.71% 0.0427 256.76) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.461 | 0.077 | 14.8 |
| 2 | 0.524 | 0.112 | 38 |
| 3 | 0.453 | 0.081 | 81.3 |
| 4 | 0.295 | 0.065 | 141.6 |
| 5 | 0.307 | 0.043 | 256.8 |

## In these collections

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

## Other forms

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