# Brown, salmon, green and blue linear swatches

Brown, salmon, green and blue linear swatches with 7 colors: #9a4433, #c87161, #637d45, #558c73, #419291, #575591, #7e82b4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYflcXUyhA0IbztUGj9PCLNs8bwG`
- Page: https://grabient.com/kYflcXUyhA0IbztUGj9PCLNs8bwG?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: multicolor
- Hues: triadic
- Contrast of its darkest and lightest colors: 1.9 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 | `#9a4433` | `oklch(49.61% 0.1199 32.34)` | Burnt Earth | white, 6.4 to 1 |
| 2 | `#c87161` | `oklch(64.23% 0.1134 31.57)` | Living Large | black, 5.9 to 1 |
| 3 | `#637d45` | `oklch(55.47% 0.0859 128.90)` | Dingley | white, 4.6 to 1 |
| 4 | `#558c73` | `oklch(59.40% 0.0701 163.45)` | Alexandrite Green | black, 5.3 to 1 |
| 5 | `#419291` | `oklch(61.04% 0.0790 194.10)` | Catalan | black, 5.7 to 1 |
| 6 | `#575591` | `oklch(47.95% 0.0941 283.69)` | Fine Purple | white, 6.7 to 1 |
| 7 | `#7e82b4` | `oklch(62.20% 0.0758 280.68)` | Deep Periwinkle | black, 5.7 to 1 |

## CSS

```css
background: linear-gradient(160deg, #9a4433 0.000% 14.286%, #c87161 14.286% 28.571%, #637d45 28.571% 42.857%, #558c73 42.857% 57.143%, #419291 57.143% 71.429%, #575591 71.429% 85.714%, #7e82b4 85.714% 100.000%);
background: linear-gradient(160deg, oklch(49.61% 0.1199 32.34) 0.000% 14.286%, oklch(64.23% 0.1134 31.57) 14.286% 28.571%, oklch(55.47% 0.0859 128.90) 28.571% 42.857%, oklch(59.40% 0.0701 163.45) 42.857% 57.143%, oklch(61.04% 0.0790 194.10) 57.143% 71.429%, oklch(47.95% 0.0941 283.69) 71.429% 85.714%, oklch(62.20% 0.0758 280.68) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.496 | 0.12 | 32.3 |
| 2 | 0.654 | 0.11 | 39.7 |
| 3 | 0.52 | 0.076 | 165.5 |
| 4 | 0.661 | 0.072 | 160.2 |
| 5 | 0.472 | 0.095 | 276.5 |
| 6 | 0.622 | 0.076 | 280.7 |

## In these collections

- [Triadic swatches](https://grabient.com/triadic-swatches)

## Other forms

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