# Olive Brown Orange

These angular swatch wedges move through olive, brown, orange, and tan in its saved order. The complete composition preserves clear value changes and balanced color weight across every visible area. It suits seasonal invitations, food packaging, table cards, and autumn editorial graphics, with lighter fields for breathing room and darker fields for type, borders, or focused accents.

- Also called: Brown, gray and tan angular swatches
- Seed: `kWiC5MvA9CEOZOBOJL93qTBg`
- Page: https://grabient.com/kWiC5MvA9CEOZOBOJL93qTBg?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: warm
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.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 | `#717044` | `oklch(53.54% 0.0634 107.58)` | Wild Jungle | white, 5.1 to 1 |
| 2 | `#566046` | `oklch(47.24% 0.0413 125.54)` | Boughs of Pine | white, 6.6 to 1 |
| 3 | `#8a6243` | `oklch(53.15% 0.0689 58.97)` | Sedona Brown | white, 5.3 to 1 |
| 4 | `#b37346` | `oklch(61.42% 0.1006 54.74)` | Baked Bean | black, 5.4 to 1 |
| 5 | `#d6a064` | `oklch(74.41% 0.1006 68.48)` | Cronut | black, 9 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #717044 0.000% 20.000%, #566046 20.000% 40.000%, #8a6243 40.000% 60.000%, #b37346 60.000% 80.000%, #d6a064 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(53.54% 0.0634 107.58) 0.000% 20.000%, oklch(47.24% 0.0413 125.54) 20.000% 40.000%, oklch(53.15% 0.0689 58.97) 40.000% 60.000%, oklch(61.42% 0.1006 54.74) 60.000% 80.000%, oklch(74.41% 0.1006 68.48) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.535 | 0.063 | 107.6 |
| 2 | 0.472 | 0.041 | 125.5 |
| 3 | 0.531 | 0.069 | 59 |
| 4 | 0.614 | 0.101 | 54.7 |
| 5 | 0.744 | 0.101 | 68.5 |

## In these collections

- [Thanksgiving swatches](https://grabient.com/thanksgiving-swatches)

## Other forms

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