# Forest rust horizontal bands

Navy, green, orange and red linear swatches with 7 colors: #2b3f4a, #1c5b52, #3c7459, #8a7d4d, #cd753e, #e15e30, #bf4132. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy, green, orange and red linear swatches
- Seed: `kaWhemtpe50EbPXLGTg0q-6lG_vpGO77g`
- Page: https://grabient.com/kaWhemtpe50EbPXLGTg0q-6lG_vpGO77g?style=linearSwatches&angle=180
- Drawn as: linear swatches, 7 steps, 180 degrees
- Kinds: vivid, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 3.2 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 | `#2b3f4a` | `oklch(35.43% 0.0317 234.14)` | Bakos Blue | white, 11 to 1 |
| 2 | `#1c5b52` | `oklch(42.91% 0.0648 182.36)` | Forest Biome | white, 7.8 to 1 |
| 3 | `#3c7459` | `oklch(51.18% 0.0744 161.22)` | Foliage Green | white, 5.4 to 1 |
| 4 | `#8a7d4d` | `oklch(59.06% 0.0689 95.71)` | Ovoid Fruit | black, 5.1 to 1 |
| 5 | `#cd753e` | `oklch(64.96% 0.1309 50.27)` | Cork Wood | black, 6.2 to 1 |
| 6 | `#e15e30` | `oklch(64.17% 0.1750 38.64)` | Salametti | black, 5.8 to 1 |
| 7 | `#bf4132` | `oklch(55.12% 0.1640 30.19)` | Caught Red-Handed | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #2b3f4a 0.000% 14.286%, #1c5b52 14.286% 28.571%, #3c7459 28.571% 42.857%, #8a7d4d 42.857% 57.143%, #cd753e 57.143% 71.429%, #e15e30 71.429% 85.714%, #bf4132 85.714% 100.000%);
background: linear-gradient(180deg, oklch(35.43% 0.0317 234.14) 0.000% 14.286%, oklch(42.91% 0.0648 182.36) 14.286% 28.571%, oklch(51.18% 0.0744 161.22) 28.571% 42.857%, oklch(59.06% 0.0689 95.71) 42.857% 57.143%, oklch(64.96% 0.1309 50.27) 57.143% 71.429%, oklch(64.17% 0.1750 38.64) 71.429% 85.714%, oklch(55.12% 0.1640 30.19) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.354 | 0.032 | 234.1 |
| 2 | 0.429 | 0.065 | 182.4 |
| 3 | 0.512 | 0.074 | 161.2 |
| 4 | 0.591 | 0.069 | 95.7 |
| 5 | 0.65 | 0.131 | 50.3 |
| 6 | 0.642 | 0.175 | 38.6 |
| 7 | 0.551 | 0.164 | 30.2 |

## In these collections

- [Teal and orange swatches](https://grabient.com/teal-and-orange-swatches)

## Other forms

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