# Cream and orange modern palette

The Cream and orange modern palette brings together off-white, light orange, gray, dark gray, and orange. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: White, gray, black and orange angular swatches
- Seed: `kW7wkiX4k_70Hv-ehb_1UG_4`
- Page: https://grabient.com/kW7wkiX4k_70Hv-ehb_1UG_4?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: dark center, neutral, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 13.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 | `#f3e9e4` | `oklch(94.09% 0.0124 47.81)` | Sauvignon | black, 17.6 to 1 |
| 2 | `#bdaaa1` | `oklch(75.20% 0.0248 47.81)` | Classic | black, 9.4 to 1 |
| 3 | `#685a54` | `oklch(48.03% 0.0207 47.81)` | Museum | white, 6.5 to 1 |
| 4 | `#261d19` | `oklch(24.02% 0.0152 47.81)` | Dark Orchestra | white, 16.4 to 1 |
| 5 | `#ea6a08` | `oklch(66.93% 0.1805 47.81)` | Epicurean Orange | black, 6.5 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #f3e9e4 0.000% 20.000%, #bdaaa1 20.000% 40.000%, #685a54 40.000% 60.000%, #261d19 60.000% 80.000%, #ea6a08 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(94.09% 0.0124 47.81) 0.000% 20.000%, oklch(75.20% 0.0248 47.81) 20.000% 40.000%, oklch(48.03% 0.0207 47.81) 40.000% 60.000%, oklch(24.02% 0.0152 47.81) 60.000% 80.000%, oklch(66.93% 0.1805 47.81) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.941 | 0.012 | 47.8 |
| 2 | 0.752 | 0.025 | 47.8 |
| 3 | 0.48 | 0.021 | 47.8 |
| 4 | 0.24 | 0.015 | 47.8 |
| 5 | 0.669 | 0.181 | 47.8 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)

## Other forms

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