# Cream Orange Brown

These angular swatch wedges move through cream, orange, brown, orange, and brown 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: Warm beige and brown angular swatches
- Seed: `kW8yI-Vac8EqmwRarEHsJk4w`
- Page: https://grabient.com/kW8yI-Vac8EqmwRarEHsJk4w?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 9 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 | `#feefce` | `oklch(95.67% 0.0469 87.19)` | Milk Froth | black, 18.5 to 1 |
| 2 | `#c98353` | `oklch(67.32% 0.1075 54.43)` | Maple Syrup Brown | black, 6.8 to 1 |
| 3 | `#a86d31` | `oklch(58.66% 0.1061 63.94)` | Inca Gold | black, 4.9 to 1 |
| 4 | `#c99a3e` | `oklch(71.26% 0.1213 80.85)` | Goldie | black, 8.1 to 1 |
| 5 | `#633333` | `oklch(38.19% 0.0689 20.61)` | City Roast | white, 10.2 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #feefce 0.000% 20.000%, #c98353 20.000% 40.000%, #a86d31 40.000% 60.000%, #c99a3e 60.000% 80.000%, #633333 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(95.67% 0.0469 87.19) 0.000% 20.000%, oklch(67.32% 0.1075 54.43) 20.000% 40.000%, oklch(58.66% 0.1061 63.94) 40.000% 60.000%, oklch(71.26% 0.1213 80.85) 60.000% 80.000%, oklch(38.19% 0.0689 20.61) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.047 | 87.2 |
| 2 | 0.673 | 0.107 | 54.4 |
| 3 | 0.587 | 0.106 | 63.9 |
| 4 | 0.713 | 0.121 | 80.8 |
| 5 | 0.382 | 0.069 | 20.6 |

## In these collections

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

## Other forms

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