# Brown Orange Olive

These angular swatch wedges move through brown, orange, olive, and charcoal 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 black angular swatches
- Seed: `kWhzIqTiS_bwPSErEbIo4XA4`
- Page: https://grabient.com/kWhzIqTiS_bwPSErEbIo4XA4?style=angularSwatches&steps=5&angle=120
- Drawn as: angular swatches, 5 steps, 120 degrees
- Kinds: warm
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#8a6243` | `oklch(53.15% 0.0689 59.06)` | Sedona Brown | white, 5.3 to 1 |
| 2 | `#b37346` | `oklch(61.42% 0.1006 54.84)` | Baked Bean | black, 5.4 to 1 |
| 3 | `#566046` | `oklch(47.24% 0.0413 125.64)` | Boughs of Pine | white, 6.6 to 1 |
| 4 | `#4d2d32` | `oklch(33.86% 0.0482 9.40)` | Cab Sav | white, 12.1 to 1 |
| 5 | `#302626` | `oklch(27.95% 0.0152 17.85)` | Wood Bark | white, 14.7 to 1 |

## CSS

```css
background: conic-gradient(from 120deg, #8a6243 0.000% 20.000%, #b37346 20.000% 40.000%, #566046 40.000% 60.000%, #4d2d32 60.000% 80.000%, #302626 80.000% 100.000%);
background: conic-gradient(from 120deg, oklch(53.15% 0.0689 59.06) 0.000% 20.000%, oklch(61.42% 0.1006 54.84) 20.000% 40.000%, oklch(47.24% 0.0413 125.64) 40.000% 60.000%, oklch(33.86% 0.0482 9.40) 60.000% 80.000%, oklch(27.95% 0.0152 17.85) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.069 | 59.1 |
| 2 | 0.614 | 0.101 | 54.8 |
| 3 | 0.472 | 0.041 | 125.6 |
| 4 | 0.339 | 0.048 | 9.4 |
| 5 | 0.28 | 0.015 | 17.8 |

## In these collections

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

## Other forms

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