# Analogous white, beige and orange linear gradient

Analogous white, beige and orange linear gradient with 32 colors: #ffffff, #fffffa, #fefff3, #feffea, #feffe1, #fefed6, #fefecc, #fefec1, #fffdb7, #fffeaf, #ffffa6, #fdffb5, #fcffbf, #fbffc0, #faffb4, #faff8c, #fcfc5e, #fdf552, #feec47, #ffe33d, #ffd836, #fece30, #fdc42b, #fdbb25, #fdb21b, #fda90d, #fe9f00, #fe9600, #fe8c00, #fe8400, #ff7c02, #fe760c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW_gBPfJ8_fs-wFpO7x20U8I`
- Page: https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I?steps=32
- Drawn as: linear gradient, 32 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 | `#fffffa` | `oklch(99.83% 0.0064 110.60)` | Whitewash | black, 20.9 to 1 |
| 3 | `#fefff3` | `oklch(99.61% 0.0157 110.08)` | Milk | black, 20.8 to 1 |
| 4 | `#feffea` | `oklch(99.34% 0.0268 109.43)` | Gaslight | black, 20.6 to 1 |
| 5 | `#feffe1` | `oklch(99.05% 0.0388 108.69)` | Winter Duvet | black, 20.5 to 1 |
| 6 | `#fefed6` | `oklch(98.75% 0.0515 107.99)` | Poetic Yellow | black, 20.3 to 1 |
| 7 | `#fefecc` | `oklch(98.46% 0.0644 107.40)` | Ice Yellow | black, 20.2 to 1 |
| 8 | `#fefec1` | `oklch(98.20% 0.0767 107.00)` | Cream | black, 20.1 to 1 |
| 9 | `#fffdb7` | `oklch(97.99% 0.0883 106.87)` | Lamenters Yellow | black, 20 to 1 |
| 10 | `#fffeaf` | `oklch(97.94% 0.0988 107.32)` | VIC 20 Creme | black, 20 to 1 |
| 11 | `#ffffa6` | `oklch(98.02% 0.1104 108.23)` | Ginger Lemon Tea | black, 20 to 1 |
| 12 | `#fdffb5` | `oklch(98.14% 0.0931 109.34)` | Crème | black, 20.1 to 1 |
| 13 | `#fcffbf` | `oklch(98.22% 0.0814 110.41)` | Sour Veil | black, 20.1 to 1 |
| 14 | `#fbffc0` | `oklch(98.16% 0.0803 111.17)` | Sour Veil | black, 20.1 to 1 |
| 15 | `#faffb4` | `oklch(97.88% 0.0944 111.37)` | VIC 20 Creme | black, 20 to 1 |
| 16 | `#faff8c` | `oklch(97.29% 0.1385 110.74)` | Cinque Foil | black, 19.7 to 1 |
| 17 | `#fcfc5e` | `oklch(96.30% 0.1743 109.06)` | Candy Corn | black, 19.2 to 1 |
| 18 | `#fdf552` | `oklch(94.88% 0.1761 106.40)` | Yellow Cattleya | black, 18.3 to 1 |
| 19 | `#feec47` | `oklch(93.13% 0.1754 102.99)` | Rapeseed Blossom | black, 17.3 to 1 |
| 20 | `#ffe33d` | `oklch(91.16% 0.1730 99.02)` | Gorse | black, 16.2 to 1 |
| 21 | `#ffd836` | `oklch(89.06% 0.1699 94.68)` | Exploding Star | black, 15.1 to 1 |
| 22 | `#fece30` | `oklch(86.95% 0.1667 90.17)` | Peeps | black, 14 to 1 |
| 23 | `#fdc42b` | `oklch(84.93% 0.1644 85.70)` | Bright Bubble | black, 13.1 to 1 |
| 24 | `#fdbb25` | `oklch(83.09% 0.1638 81.45)` | Incandescence | black, 12.2 to 1 |
| 25 | `#fdb21b` | `oklch(81.44% 0.1653 77.33)` | Golden Treasure | black, 11.5 to 1 |
| 26 | `#fda90d` | `oklch(79.76% 0.1681 72.81)` | Beer | black, 10.8 to 1 |
| 27 | `#fe9f00` | `oklch(78.09% 0.1713 68.06)` | Scotch Bonnet | black, 10.1 to 1 |
| 28 | `#fe9600` | `oklch(76.47% 0.1740 63.32)` | Sunset Boulevard | black, 9.5 to 1 |
| 29 | `#fe8c00` | `oklch(74.98% 0.1780 58.80)` | Sun Crete | black, 8.9 to 1 |
| 30 | `#fe8400` | `oklch(73.64% 0.1830 54.71)` | The New Black | black, 8.5 to 1 |
| 31 | `#ff7c02` | `oklch(72.51% 0.1878 51.30)` | Heat Wave | black, 8.1 to 1 |
| 32 | `#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%, #fffffa 3.2%, #fefff3 6.5%, #feffea 9.7%, #feffe1 12.9%, #fefed6 16.1%, #fefecc 19.4%, #fefec1 22.6%, #fffdb7 25.8%, #fffeaf 29.0%, #ffffa6 32.3%, #fdffb5 35.5%, #fcffbf 38.7%, #fbffc0 41.9%, #faffb4 45.2%, #faff8c 48.4%, #fcfc5e 51.6%, #fdf552 54.8%, #feec47 58.1%, #ffe33d 61.3%, #ffd836 64.5%, #fece30 67.7%, #fdc42b 71.0%, #fdbb25 74.2%, #fdb21b 77.4%, #fda90d 80.6%, #fe9f00 83.9%, #fe9600 87.1%, #fe8c00 90.3%, #fe8400 93.5%, #ff7c02 96.8%, #fe760c 100.0%);
background: linear-gradient(90deg in oklch, oklch(100.00% 0.0000 89.88) 0.0%, oklch(99.83% 0.0064 110.60) 3.2%, oklch(99.61% 0.0157 110.08) 6.5%, oklch(99.34% 0.0268 109.43) 9.7%, oklch(99.05% 0.0388 108.69) 12.9%, oklch(98.75% 0.0515 107.99) 16.1%, oklch(98.46% 0.0644 107.40) 19.4%, oklch(98.20% 0.0767 107.00) 22.6%, oklch(97.99% 0.0883 106.87) 25.8%, oklch(97.94% 0.0988 107.32) 29.0%, oklch(98.02% 0.1104 108.23) 32.3%, oklch(98.14% 0.0931 109.34) 35.5%, oklch(98.22% 0.0814 110.41) 38.7%, oklch(98.16% 0.0803 111.17) 41.9%, oklch(97.88% 0.0944 111.37) 45.2%, oklch(97.29% 0.1385 110.74) 48.4%, oklch(96.30% 0.1743 109.06) 51.6%, oklch(94.88% 0.1761 106.40) 54.8%, oklch(93.13% 0.1754 102.99) 58.1%, oklch(91.16% 0.1730 99.02) 61.3%, oklch(89.06% 0.1699 94.68) 64.5%, oklch(86.95% 0.1667 90.17) 67.7%, oklch(84.93% 0.1644 85.70) 71.0%, oklch(83.09% 0.1638 81.45) 74.2%, oklch(81.44% 0.1653 77.33) 77.4%, oklch(79.76% 0.1681 72.81) 80.6%, oklch(78.09% 0.1713 68.06) 83.9%, oklch(76.47% 0.1740 63.32) 87.1%, oklch(74.98% 0.1780 58.80) 90.3%, oklch(73.64% 0.1830 54.71) 93.5%, oklch(72.51% 0.1878 51.30) 96.8%, 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?steps=32)
- [PNG](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.png?steps=32)
- [SVG](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.svg?steps=32)
- [CSS](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.css?steps=32)
- [ASE](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.ase?steps=32)
- [GPL](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.gpl?steps=32)
- [GRD](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.grd?steps=32)
- [Design tokens](https://grabient.com/kW_gBPfJ8_fs-wFpO7x20U8I.tokens.json?steps=32)
- [Social card](https://grabient.com/api/og?seed=kW_gBPfJ8_fs-wFpO7x20U8I&steps=32)
- [Palettes like this one](https://grabient.com/palettes?q=kW_gBPfJ8_fs-wFpO7x20U8I)
- [Guide for agents](https://grabient.com/llms.txt)