# Cream and orange color palette

The Cream and orange color palette brings together pale yellow, off-white, pale orange, orange, and light orange. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is pale yellow.

- Also called: Off-white, light pink, tan and peach linear gradient
- Seed: `kW9RJLeoS3fOYxFsKcD7KO-Q`
- Page: https://grabient.com/kW9RJLeoS3fOYxFsKcD7KO-Q?angle=225
- Drawn as: linear gradient, 7 steps, 225 degrees
- Kinds: pastel, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.4 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 | `#f5f5e2` | `oklch(96.46% 0.0248 105.47)` | Precious Dewdrop | black, 19 to 1 |
| 2 | `#fcf3ed` | `oklch(96.86% 0.0120 52.16)` | Silver Bird | black, 19.1 to 1 |
| 3 | `#ffe9e2` | `oklch(95.04% 0.0257 38.94)` | Translucent Silk | black, 18 to 1 |
| 4 | `#fedab1` | `oklch(90.94% 0.0675 70.60)` | Venus Deathtrap | black, 15.9 to 1 |
| 5 | `#f8cb82` | `oklch(86.56% 0.1038 78.93)` | Cheddar Chunk | black, 13.8 to 1 |
| 6 | `#f8c375` | `oklch(84.72% 0.1129 75.61)` | Just Peachy | black, 12.9 to 1 |
| 7 | `#fcc28a` | `oklch(85.43% 0.0978 65.31)` | Buttery | black, 13.2 to 1 |

## CSS

```css
background: linear-gradient(225deg, #f5f5e2 0.0%, #fcf3ed 16.7%, #ffe9e2 33.3%, #fedab1 50.0%, #f8cb82 66.7%, #f8c375 83.3%, #fcc28a 100.0%);
background: linear-gradient(225deg in oklch, oklch(96.46% 0.0248 105.47) 0.0%, oklch(96.86% 0.0120 52.16) 16.7%, oklch(95.04% 0.0257 38.94) 33.3%, oklch(90.94% 0.0675 70.60) 50.0%, oklch(86.56% 0.1038 78.93) 66.7%, oklch(84.72% 0.1129 75.61) 83.3%, oklch(85.43% 0.0978 65.31) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.025 | 105.5 |
| 2 | 0.965 | 0.012 | 33.6 |
| 3 | 0.909 | 0.068 | 70.6 |
| 4 | 0.85 | 0.114 | 79 |
| 5 | 0.854 | 0.098 | 65.3 |

## In these collections

- [Orange gradients](https://grabient.com/orange-gradients)
- [Golden hour gradients](https://grabient.com/golden-hour-gradients)
- [Earth tone swatches](https://grabient.com/earth-tone-swatches)

## Other forms

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