# Pumpkin spice latte gradient

Analogous brown, orange and beige linear gradient with 32 colors: #321c11, #371e12, #3d2114, #452515, #4e2a17, #582f18, #623419, #6c391a, #763e1a, #804319, #8c4817, #984c12, #a4510b, #b05704, #ba5d00, #c46401, #cb6d0f, #d1761f, #d5802f, #d98b3f, #db954f, #dd9f5e, #e0a96d, #e2b27a, #e5ba86, #e8c293, #ebcba1, #edd3ae, #f0daba, #f3e0c5, #f5e6ce, #f6ead5. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous brown, orange and beige linear gradient
- Seed: `kWQB0gNaDAk62wJloMG94tBA`
- Page: https://grabient.com/kWQB0gNaDAk62wJloMG94tBA?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, vivid, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 13.5 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 | `#321c11` | `oklch(25.20% 0.0400 45.00)` | Close but No Cigar | white, 16 to 1 |
| 2 | `#371e12` | `oklch(26.53% 0.0439 45.42)` | Close but No Cigar | white, 15.4 to 1 |
| 3 | `#3d2114` | `oklch(28.30% 0.0490 45.99)` | Délicieux au Chocolat | white, 14.6 to 1 |
| 4 | `#452515` | `oklch(30.39% 0.0551 46.66)` | Duqqa Brown | white, 13.6 to 1 |
| 5 | `#4e2a17` | `oklch(32.73% 0.0619 47.41)` | Bittersweet Chocolate | white, 12.6 to 1 |
| 6 | `#582f18` | `oklch(35.23% 0.0691 48.19)` | Fudge Brownie | white, 11.4 to 1 |
| 7 | `#623419` | `oklch(37.78% 0.0766 48.99)` | Chubby Chocolate | white, 10.3 to 1 |
| 8 | `#6c391a` | `oklch(40.31% 0.0841 49.75)` | Searing Gorge Brown | white, 9.3 to 1 |
| 9 | `#763e1a` | `oklch(42.72% 0.0914 50.45)` | Walnut | white, 8.4 to 1 |
| 10 | `#804319` | `oklch(45.16% 0.1000 51.03)` | Russet | white, 7.6 to 1 |
| 11 | `#8c4817` | `oklch(47.69% 0.1100 51.53)` | Brown Eyed Girl | white, 6.9 to 1 |
| 12 | `#984c12` | `oklch(50.27% 0.1204 52.01)` | Burnt Bagel | white, 6.2 to 1 |
| 13 | `#a4510b` | `oklch(52.87% 0.1304 52.54)` | Windsor Brown | white, 5.5 to 1 |
| 14 | `#b05704` | `oklch(55.48% 0.1392 53.16)` | Elm Brown Red | white, 4.9 to 1 |
| 15 | `#ba5d00` | `oklch(58.06% 0.1457 53.92)` | Super Leaf Brown | black, 4.6 to 1 |
| 16 | `#c46401` | `oklch(60.58% 0.1497 54.96)` | Alloy Orange | black, 5.1 to 1 |
| 17 | `#cb6d0f` | `oklch(63.03% 0.1497 56.26)` | Sludge | black, 5.7 to 1 |
| 18 | `#d1761f` | `oklch(65.47% 0.1461 57.91)` | Ochre | black, 6.3 to 1 |
| 19 | `#d5802f` | `oklch(67.91% 0.1396 59.82)` | Yellow Mandarin | black, 6.9 to 1 |
| 20 | `#d98b3f` | `oklch(70.32% 0.1310 61.90)` | Coppersmith | black, 7.7 to 1 |
| 21 | `#db954f` | `oklch(72.69% 0.1211 64.05)` | Orange Caramel | black, 8.4 to 1 |
| 22 | `#dd9f5e` | `oklch(75.00% 0.1107 66.17)` | Coffee Whip | black, 9.2 to 1 |
| 23 | `#e0a96d` | `oklch(77.24% 0.1006 68.17)` | Corn Maze | black, 10 to 1 |
| 24 | `#e2b27a` | `oklch(79.40% 0.0916 69.96)` | High Plateau | black, 10.8 to 1 |
| 25 | `#e5ba86` | `oklch(81.51% 0.0835 71.53)` | Dune View | black, 11.7 to 1 |
| 26 | `#e8c293` | `oklch(83.67% 0.0749 73.05)` | Apple Turnover | black, 12.6 to 1 |
| 27 | `#ebcba1` | `oklch(85.82% 0.0660 74.51)` | Cream Snap | black, 13.5 to 1 |
| 28 | `#edd3ae` | `oklch(87.89% 0.0572 75.88)` | Calm Air | black, 14.5 to 1 |
| 29 | `#f0daba` | `oklch(89.82% 0.0489 77.13)` | Cono de Vainilla | black, 15.4 to 1 |
| 30 | `#f3e0c5` | `oklch(91.54% 0.0414 78.22)` | Estate Vanilla | black, 16.3 to 1 |
| 31 | `#f5e6ce` | `oklch(92.99% 0.0351 79.15)` | Animal Cracker | black, 17 to 1 |
| 32 | `#f6ead5` | `oklch(94.09% 0.0303 79.87)` | Marquee White | black, 17.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #321c11 0.0%, #371e12 3.2%, #3d2114 6.5%, #452515 9.7%, #4e2a17 12.9%, #582f18 16.1%, #623419 19.4%, #6c391a 22.6%, #763e1a 25.8%, #804319 29.0%, #8c4817 32.3%, #984c12 35.5%, #a4510b 38.7%, #b05704 41.9%, #ba5d00 45.2%, #c46401 48.4%, #cb6d0f 51.6%, #d1761f 54.8%, #d5802f 58.1%, #d98b3f 61.3%, #db954f 64.5%, #dd9f5e 67.7%, #e0a96d 71.0%, #e2b27a 74.2%, #e5ba86 77.4%, #e8c293 80.6%, #ebcba1 83.9%, #edd3ae 87.1%, #f0daba 90.3%, #f3e0c5 93.5%, #f5e6ce 96.8%, #f6ead5 100.0%);
background: linear-gradient(180deg in oklch, oklch(25.20% 0.0400 45.00) 0.0%, oklch(26.53% 0.0439 45.42) 3.2%, oklch(28.30% 0.0490 45.99) 6.5%, oklch(30.39% 0.0551 46.66) 9.7%, oklch(32.73% 0.0619 47.41) 12.9%, oklch(35.23% 0.0691 48.19) 16.1%, oklch(37.78% 0.0766 48.99) 19.4%, oklch(40.31% 0.0841 49.75) 22.6%, oklch(42.72% 0.0914 50.45) 25.8%, oklch(45.16% 0.1000 51.03) 29.0%, oklch(47.69% 0.1100 51.53) 32.3%, oklch(50.27% 0.1204 52.01) 35.5%, oklch(52.87% 0.1304 52.54) 38.7%, oklch(55.48% 0.1392 53.16) 41.9%, oklch(58.06% 0.1457 53.92) 45.2%, oklch(60.58% 0.1497 54.96) 48.4%, oklch(63.03% 0.1497 56.26) 51.6%, oklch(65.47% 0.1461 57.91) 54.8%, oklch(67.91% 0.1396 59.82) 58.1%, oklch(70.32% 0.1310 61.90) 61.3%, oklch(72.69% 0.1211 64.05) 64.5%, oklch(75.00% 0.1107 66.17) 67.7%, oklch(77.24% 0.1006 68.17) 71.0%, oklch(79.40% 0.0916 69.96) 74.2%, oklch(81.51% 0.0835 71.53) 77.4%, oklch(83.67% 0.0749 73.05) 80.6%, oklch(85.82% 0.0660 74.51) 83.9%, oklch(87.89% 0.0572 75.88) 87.1%, oklch(89.82% 0.0489 77.13) 90.3%, oklch(91.54% 0.0414 78.22) 93.5%, oklch(92.99% 0.0351 79.15) 96.8%, oklch(94.09% 0.0303 79.87) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.04 | 45 |
| 2 | 0.421 | 0.09 | 50.3 |
| 3 | 0.618 | 0.15 | 55.6 |
| 4 | 0.799 | 0.09 | 70.4 |
| 5 | 0.941 | 0.03 | 79.9 |

## In these collections

- [Pumpkin spice color palette](https://grabient.com/pumpkin-spice-color-palette)

## Other forms

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