# Orange, brown, light blue and teal linear swatches

Orange, brown, light blue and teal linear swatches with 7 colors: #e0ad41, #c47333, #6a5000, #193b31, #8dabb3, #9dc8d7, #267b78. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWxWI6xiq86kQTZuDkZQ5y74`
- Page: https://grabient.com/kWxWI6xiq86kQTZuDkZQ5y74?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: dark center, vivid, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 6.8 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 | `#e0ad41` | `oklch(77.56% 0.1350 82.27)` | Tiger Cub | black, 10.2 to 1 |
| 2 | `#c47333` | `oklch(63.46% 0.1278 55.89)` | October | black, 5.8 to 1 |
| 3 | `#6a5000` | `oklch(44.68% 0.0914 87.12)` | Olive Brown | white, 7.5 to 1 |
| 4 | `#193b31` | `oklch(32.28% 0.0441 172.09)` | Palm Green | white, 12.2 to 1 |
| 5 | `#8dabb3` | `oklch(72.15% 0.0346 216.79)` | Aquitaine | black, 8.6 to 1 |
| 6 | `#9dc8d7` | `oklch(80.72% 0.0500 219.96)` | Soothing Blue | black, 11.6 to 1 |
| 7 | `#267b78` | `oklch(53.15% 0.0785 192.17)` | Elm | white, 5 to 1 |

## CSS

```css
background: linear-gradient(160deg, #e0ad41 0.000% 14.286%, #c47333 14.286% 28.571%, #6a5000 28.571% 42.857%, #193b31 42.857% 57.143%, #8dabb3 57.143% 71.429%, #9dc8d7 71.429% 85.714%, #267b78 85.714% 100.000%);
background: linear-gradient(160deg, oklch(77.56% 0.1350 82.27) 0.000% 14.286%, oklch(63.46% 0.1278 55.89) 14.286% 28.571%, oklch(44.68% 0.0914 87.12) 28.571% 42.857%, oklch(32.28% 0.0441 172.09) 42.857% 57.143%, oklch(72.15% 0.0346 216.79) 57.143% 71.429%, oklch(80.72% 0.0500 219.96) 71.429% 85.714%, oklch(53.15% 0.0785 192.17) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.776 | 0.135 | 82.3 |
| 2 | 0.551 | 0.117 | 56.9 |
| 3 | 0.323 | 0.044 | 172.1 |
| 4 | 0.866 | 0.039 | 226 |
| 5 | 0.531 | 0.079 | 192.2 |

## In these collections

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

## Other forms

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