# Burgundy, terracotta and sage red sumac roadside

The Burgundy, terracotta and sage red sumac roadside brings together red, orange, yellow, and green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is red, and its lightest tone is orange.

- Also called: Tritone maroon, brown and dark green linear swatches
- Seed: `kWVDkFu6xB0miw3ImUWuA_G4`
- Page: https://grabient.com/kWVDkFu6xB0miw3ImUWuA_G4?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: warm
- Hues: wide
- Contrast of its darkest and lightest colors: 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 | `#56222e` | `oklch(33.07% 0.0785 7.73)` | Largest Black Slug | white, 12.6 to 1 |
| 2 | `#873238` | `oklch(44.05% 0.1164 19.28)` | Blood Oath | white, 8.2 to 1 |
| 3 | `#a5573d` | `oklch(54.45% 0.1089 39.31)` | Pennywise | white, 5.2 to 1 |
| 4 | `#9d7442` | `oklch(59.00% 0.0846 70.74)` | Bone Brown | black, 5 to 1 |
| 5 | `#71764a` | `oklch(55.06% 0.0632 113.89)` | Ancient Bonsai | white, 4.7 to 1 |
| 6 | `#3d5a4b` | `oklch(44.09% 0.0427 160.96)` | Plantation | white, 7.5 to 1 |

## CSS

```css
background: linear-gradient(180deg, #56222e 0.000% 16.667%, #873238 16.667% 33.333%, #a5573d 33.333% 50.000%, #9d7442 50.000% 66.667%, #71764a 66.667% 83.333%, #3d5a4b 83.333% 100.000%);
background: linear-gradient(180deg, oklch(33.07% 0.0785 7.73) 0.000% 16.667%, oklch(44.05% 0.1164 19.28) 16.667% 33.333%, oklch(54.45% 0.1089 39.31) 33.333% 50.000%, oklch(59.00% 0.0846 70.74) 50.000% 66.667%, oklch(55.06% 0.0632 113.89) 66.667% 83.333%, oklch(44.09% 0.0427 160.96) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.331 | 0.079 | 7.7 |
| 2 | 0.469 | 0.121 | 23.6 |
| 3 | 0.579 | 0.095 | 53.2 |
| 4 | 0.571 | 0.069 | 101.8 |
| 5 | 0.441 | 0.043 | 161 |

## In these collections

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

## Other forms

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