# Teal, brown, black and olive linear swatches

Teal, brown, black and olive linear swatches with 7 colors: #174c55, #614f12, #47380f, #101a19, #899248, #b7b855, #2e7871. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWYimWNx4thqFz7lr7PwprLo`
- Page: https://grabient.com/kWYimWNx4thqFz7lr7PwprLo?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: dark center, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 8.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 | `#174c55` | `oklch(38.58% 0.0565 210.94)` | Iron Teal | white, 9.5 to 1 |
| 2 | `#614f12` | `oklch(43.57% 0.0799 91.76)` | Olive Brown | white, 7.9 to 1 |
| 3 | `#47380f` | `oklch(34.82% 0.0603 87.30)` | Night in the Woods | white, 11.4 to 1 |
| 4 | `#101a19` | `oklch(20.87% 0.0152 188.75)` | Black Stallion | white, 17.6 to 1 |
| 5 | `#899248` | `oklch(63.63% 0.0984 114.93)` | Scotland Isle | black, 6.2 to 1 |
| 6 | `#b7b855` | `oklch(76.13% 0.1223 109.22)` | Parachute | black, 9.9 to 1 |
| 7 | `#2e7871` | `oklch(52.36% 0.0730 186.63)` | Myrtle Green | white, 5.2 to 1 |

## CSS

```css
background: linear-gradient(160deg, #174c55 0.000% 14.286%, #614f12 14.286% 28.571%, #47380f 28.571% 42.857%, #101a19 42.857% 57.143%, #899248 57.143% 71.429%, #b7b855 71.429% 85.714%, #2e7871 85.714% 100.000%);
background: linear-gradient(160deg, oklch(38.58% 0.0565 210.94) 0.000% 14.286%, oklch(43.57% 0.0799 91.76) 14.286% 28.571%, oklch(34.82% 0.0603 87.30) 28.571% 42.857%, oklch(20.87% 0.0152 188.75) 42.857% 57.143%, oklch(63.63% 0.0984 114.93) 57.143% 71.429%, oklch(76.13% 0.1223 109.22) 71.429% 85.714%, oklch(52.36% 0.0730 186.63) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.386 | 0.056 | 210.9 |
| 2 | 0.433 | 0.083 | 55.6 |
| 3 | 0.209 | 0.015 | 188.7 |
| 4 | 0.799 | 0.131 | 87.3 |
| 5 | 0.524 | 0.073 | 186.6 |

## In these collections

- [Oktoberfest swatches](https://grabient.com/oktoberfest-swatches)

## Other forms

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