# Off-white, yellow and orange summer palette

The Off-white, yellow and orange summer palette brings together off-white, pale yellow, yellow, gold, and orange. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is orange, and its lightest tone is off-white.

- Also called: Analogous white, beige and orange linear gradient
- Seed: `kW_gBPfJ8_fs-wFpO7x20U8I`
- Page: https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: vivid, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.6 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 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 2 | `#fefed5` | `oklch(98.70% 0.0537 107.88)` | Poetic Yellow | black, 20.3 to 1 |
| 3 | `#feffaa` | `oklch(98.06% 0.1054 108.58)` | Ginger Lemon Tea | black, 20.1 to 1 |
| 4 | `#fcfe65` | `oklch(96.85% 0.1722 110.04)` | Unmellow Yellow | black, 19.5 to 1 |
| 5 | `#fed132` | `oklch(87.65% 0.1677 91.68)` | Lemon Punch | black, 14.4 to 1 |
| 6 | `#fea100` | `oklch(78.36% 0.1710 68.85)` | Vivid Orange Peel | black, 10.2 to 1 |
| 7 | `#fe760c` | `oklch(71.65% 0.1902 48.75)` | March Hare Orange | black, 7.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ffffff 0.0%, #fefed5 16.7%, #feffaa 33.3%, #fcfe65 50.0%, #fed132 66.7%, #fea100 83.3%, #fe760c 100.0%);
background: linear-gradient(90deg in oklch, oklch(100.00% 0.0000 89.88) 0.0%, oklch(98.70% 0.0537 107.88) 16.7%, oklch(98.06% 0.1054 108.58) 33.3%, oklch(96.85% 0.1722 110.04) 50.0%, oklch(87.65% 0.1677 91.68) 66.7%, oklch(78.36% 0.1710 68.85) 83.3%, oklch(71.65% 0.1902 48.75) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 1 | 0 | 111.1 |
| 2 | 0.98 | 0.085 | 106.9 |
| 3 | 0.969 | 0.172 | 110 |
| 4 | 0.827 | 0.164 | 80.4 |
| 5 | 0.717 | 0.19 | 48.7 |

## In these collections

- [Summer gradients](https://grabient.com/summer-gradients)

## Other forms

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