# Cream Orange Brown

These linear swatch bands move through cream, orange, brown, gray, and navy in its saved order. The complete composition preserves clear value changes and balanced color weight across every visible area. It suits sunset posters, travel graphics, warm packaging, and editorial accents, with lighter fields for breathing room and darker fields for type, borders, or focused accents.

- Also called: Beige, orange, brown and navy linear swatches
- Seed: `kW9B891y67bafPLOG8SM5Cso`
- Page: https://grabient.com/kW9B891y67bafPLOG8SM5Cso?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: dark center, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#fff1d2` | `oklch(96.06% 0.0427 86.48)` | Amarillo Bebito | black, 18.7 to 1 |
| 2 | `#d97f4e` | `oklch(68.50% 0.1281 48.44)` | Copper Harbor | black, 7.1 to 1 |
| 3 | `#783b3b` | `oklch(42.91% 0.0854 20.97)` | Marrakesh Red | white, 8.5 to 1 |
| 4 | `#a67a55` | `oklch(61.42% 0.0758 60.07)` | Apple Cinnamon | black, 5.5 to 1 |
| 5 | `#394a62` | `oklch(40.55% 0.0455 257.33)` | Evening Glory | white, 8.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #fff1d2 0.000% 20.000%, #d97f4e 20.000% 40.000%, #783b3b 40.000% 60.000%, #a67a55 60.000% 80.000%, #394a62 80.000% 100.000%);
background: linear-gradient(45deg, oklch(96.06% 0.0427 86.48) 0.000% 20.000%, oklch(68.50% 0.1281 48.44) 20.000% 40.000%, oklch(42.91% 0.0854 20.97) 40.000% 60.000%, oklch(61.42% 0.0758 60.07) 60.000% 80.000%, oklch(40.55% 0.0455 257.33) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.043 | 86.5 |
| 2 | 0.685 | 0.128 | 48.4 |
| 3 | 0.429 | 0.085 | 21 |
| 4 | 0.614 | 0.076 | 60.1 |
| 5 | 0.406 | 0.045 | -102.7 |

## In these collections

- [Golden hour swatches](https://grabient.com/golden-hour-swatches)

## Other forms

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