# Sumac red and storm slate

Maroon, orange, beige and gray linear swatches with 12 colors: #681f2a, #882630, #b13535, #cc513d, #dd744f, #e8a07a, #edd0ba, #dedbd1, #b5c3bc, #889ea4, #58707a, #334e58. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Maroon, orange, beige and gray linear swatches
- Seed: `kYW0wLQ7tBNmuwhyh8OWglP7ONwa`
- Page: https://grabient.com/kYW0wLQ7tBNmuwhyh8OWglP7ONwa?style=linearSwatches&steps=12
- Drawn as: linear swatches, 12 steps, 90 degrees
- Kinds: light center
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#681f2a` | `oklch(35.83% 0.1047 15.47)` | Velvet Outbreak | white, 11.5 to 1 |
| 2 | `#882630` | `oklch(42.53% 0.1323 19.14)` | Flame Red | white, 8.8 to 1 |
| 3 | `#b13535` | `oklch(51.51% 0.1606 24.76)` | Red Contrast | white, 6.1 to 1 |
| 4 | `#cc513d` | `oklch(59.35% 0.1599 31.49)` | Painted Poppy | black, 4.8 to 1 |
| 5 | `#dd744f` | `oklch(67.18% 0.1401 39.86)` | Peachy Scene | black, 6.6 to 1 |
| 6 | `#e8a07a` | `oklch(76.72% 0.1011 48.61)` | Mexican Standoff | black, 9.7 to 1 |
| 7 | `#edd0ba` | `oklch(87.54% 0.0439 58.40)` | Desert Mesa | black, 14.2 to 1 |
| 8 | `#dedbd1` | `oklch(89.17% 0.0145 94.50)` | Silver Ash | black, 15.1 to 1 |
| 9 | `#b5c3bc` | `oklch(80.33% 0.0180 165.19)` | Mediterranean Dusk | black, 11.4 to 1 |
| 10 | `#889ea4` | `oklch(68.41% 0.0257 215.84)` | Aqua Grey | black, 7.4 to 1 |
| 11 | `#58707a` | `oklch(52.90% 0.0319 225.77)` | Bowman Blue | white, 5.2 to 1 |
| 12 | `#334e58` | `oklch(40.55% 0.0372 224.71)` | Nocturne | white, 8.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #681f2a 0.000% 8.333%, #882630 8.333% 16.667%, #b13535 16.667% 25.000%, #cc513d 25.000% 33.333%, #dd744f 33.333% 41.667%, #e8a07a 41.667% 50.000%, #edd0ba 50.000% 58.333%, #dedbd1 58.333% 66.667%, #b5c3bc 66.667% 75.000%, #889ea4 75.000% 83.333%, #58707a 83.333% 91.667%, #334e58 91.667% 100.000%);
background: linear-gradient(90deg, oklch(35.83% 0.1047 15.47) 0.000% 8.333%, oklch(42.53% 0.1323 19.14) 8.333% 16.667%, oklch(51.51% 0.1606 24.76) 16.667% 25.000%, oklch(59.35% 0.1599 31.49) 25.000% 33.333%, oklch(67.18% 0.1401 39.86) 33.333% 41.667%, oklch(76.72% 0.1011 48.61) 41.667% 50.000%, oklch(87.54% 0.0439 58.40) 50.000% 58.333%, oklch(89.17% 0.0145 94.50) 58.333% 66.667%, oklch(80.33% 0.0180 165.19) 66.667% 75.000%, oklch(68.41% 0.0257 215.84) 75.000% 83.333%, oklch(52.90% 0.0319 225.77) 83.333% 91.667%, oklch(40.55% 0.0372 224.71) 91.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.358 | 0.105 | 15.5 |
| 2 | 0.531 | 0.163 | 26 |
| 3 | 0.705 | 0.128 | 44 |
| 4 | 0.902 | 0.021 | 74.6 |
| 5 | 0.709 | 0.025 | 209.9 |
| 6 | 0.406 | 0.037 | 224.7 |

## In these collections

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

## Other forms

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