# Cream Navy Orange

These angular swatch wedges move through cream, navy, orange, tan, and brown 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, navy, orange and brown angular swatches
- Seed: `kW9B89s5DUFcu0djqMHtp86w`
- Page: https://grabient.com/kW9B89s5DUFcu0djqMHtp86w?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- 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 | `#394a62` | `oklch(40.55% 0.0455 256.62)` | Evening Glory | white, 8.9 to 1 |
| 3 | `#d97f4f` | `oklch(68.50% 0.1281 47.74)` | Copper Harbor | black, 7.1 to 1 |
| 4 | `#eaa969` | `oklch(78.35% 0.1116 64.64)` | Spun Gold | black, 10.3 to 1 |
| 5 | `#783b3b` | `oklch(42.91% 0.0854 21.32)` | Marrakesh Red | white, 8.4 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #fff1d2 0.000% 20.000%, #394a62 20.000% 40.000%, #d97f4f 40.000% 60.000%, #eaa969 60.000% 80.000%, #783b3b 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(96.06% 0.0427 86.48) 0.000% 20.000%, oklch(40.55% 0.0455 256.62) 20.000% 40.000%, oklch(68.50% 0.1281 47.74) 40.000% 60.000%, oklch(78.35% 0.1116 64.64) 60.000% 80.000%, oklch(42.91% 0.0854 21.32) 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.406 | 0.045 | 256.6 |
| 3 | 0.685 | 0.128 | 407.7 |
| 4 | 0.783 | 0.112 | 424.6 |
| 5 | 0.429 | 0.085 | 381.3 |

## In these collections

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

## Other forms

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