# Orange Brown Orange

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

- Also called: Monochrome brown and tan angular swatches
- Seed: `kWq04nSiG_NqsQ88I7sZaHDo`
- Page: https://grabient.com/kWq04nSiG_NqsQ88I7sZaHDo?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.7 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 | `#c98453` | `oklch(67.32% 0.1075 54.84)` | Maple Syrup Brown | black, 6.8 to 1 |
| 2 | `#a76a49` | `oklch(58.27% 0.0923 48.50)` | Maple Glaze | black, 4.7 to 1 |
| 3 | `#c99a3e` | `oklch(71.26% 0.1213 81.26)` | Goldie | black, 8.1 to 1 |
| 4 | `#89462e` | `oklch(47.24% 0.0978 40.05)` | Olive Niçoise | white, 7 to 1 |
| 5 | `#e3b47a` | `oklch(79.92% 0.0923 71.75)` | High Plateau | black, 11 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #c98453 0.000% 20.000%, #a76a49 20.000% 40.000%, #c99a3e 40.000% 60.000%, #89462e 60.000% 80.000%, #e3b47a 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(67.32% 0.1075 54.84) 0.000% 20.000%, oklch(58.27% 0.0923 48.50) 20.000% 40.000%, oklch(71.26% 0.1213 81.26) 40.000% 60.000%, oklch(47.24% 0.0978 40.05) 60.000% 80.000%, oklch(79.92% 0.0923 71.75) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.673 | 0.107 | 54.8 |
| 2 | 0.583 | 0.092 | 48.5 |
| 3 | 0.713 | 0.121 | 81.3 |
| 4 | 0.472 | 0.098 | 40 |
| 5 | 0.799 | 0.092 | 71.8 |

## In these collections

- [Harvest swatches](https://grabient.com/harvest-swatches)

## Other forms

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