# Spiced latte foam gradient

Monochrome white to brown linear gradient with 32 colors: #f9f4e9, #f9f3e7, #f8f1e5, #f7efe2, #f6edde, #f5eada, #f3e8d6, #f2e5d2, #f1e2ce, #efdfca, #eedcc6, #edd9c1, #ebd5bd, #e9d2b8, #e8ceb4, #e6caaf, #e4c6aa, #e2c2a5, #e0bea0, #deba9a, #dcb595, #d9b190, #d7ac8b, #d4a886, #d1a381, #ce9e7c, #ca9977, #c69473, #c28f6e, #bf8b6a, #bc8867, #ba8564. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome white to brown linear gradient
- Seed: `kW9gs89Qs-2wSPtgmb8VB0_I`
- Page: https://grabient.com/kW9gs89Qs-2wSPtgmb8VB0_I?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light to dark, pastel, light, warm, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.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 | `#f9f4e9` | `oklch(96.85% 0.0152 85.08)` | Risotto | black, 19.1 to 1 |
| 2 | `#f9f3e7` | `oklch(96.49% 0.0163 84.32)` | Milk Moustache | black, 18.9 to 1 |
| 3 | `#f8f1e5` | `oklch(96.03% 0.0179 83.30)` | China Cup | black, 18.7 to 1 |
| 4 | `#f7efe2` | `oklch(95.47% 0.0197 82.09)` | Rustic Cream | black, 18.3 to 1 |
| 5 | `#f6edde` | `oklch(94.85% 0.0218 80.74)` | Citrus Mist | black, 18 to 1 |
| 6 | `#f5eada` | `oklch(94.17% 0.0240 79.33)` | Saltbox | black, 17.6 to 1 |
| 7 | `#f3e8d6` | `oklch(93.45% 0.0263 77.90)` | Grey Linnet Egg | black, 17.2 to 1 |
| 8 | `#f2e5d2` | `oklch(92.70% 0.0286 76.53)` | White Hyacinth | black, 16.8 to 1 |
| 9 | `#f1e2ce` | `oklch(91.93% 0.0309 75.26)` | Coconut Cream Pie | black, 16.5 to 1 |
| 10 | `#efdfca` | `oklch(91.14% 0.0332 74.01)` | Silk Teddy | black, 16 to 1 |
| 11 | `#eedcc6` | `oklch(90.30% 0.0356 72.74)` | Almond | black, 15.6 to 1 |
| 12 | `#edd9c1` | `oklch(89.42% 0.0380 71.47)` | Figure Stone | black, 15.2 to 1 |
| 13 | `#ebd5bd` | `oklch(88.51% 0.0406 70.21)` | Speckled Eggs | black, 14.7 to 1 |
| 14 | `#e9d2b8` | `oklch(87.55% 0.0431 68.97)` | Verona Beach | black, 14.3 to 1 |
| 15 | `#e8ceb4` | `oklch(86.57% 0.0457 67.76)` | Malibu Dune | black, 13.8 to 1 |
| 16 | `#e6caaf` | `oklch(85.56% 0.0483 66.61)` | Grey Sand | black, 13.4 to 1 |
| 17 | `#e4c6aa` | `oklch(84.51% 0.0509 65.52)` | Craft Juggler | black, 12.9 to 1 |
| 18 | `#e2c2a5` | `oklch(83.42% 0.0537 64.48)` | Apricot Illusion | black, 12.5 to 1 |
| 19 | `#e0bea0` | `oklch(82.29% 0.0566 63.48)` | Eggshell Paper | black, 12 to 1 |
| 20 | `#deba9a` | `oklch(81.13% 0.0595 62.51)` | Cane Sugar Glaze | black, 11.5 to 1 |
| 21 | `#dcb595` | `oklch(79.94% 0.0623 61.58)` | Crossed Fingers | black, 11 to 1 |
| 22 | `#d9b190` | `oklch(78.73% 0.0650 60.67)` | Blonde Lace | black, 10.6 to 1 |
| 23 | `#d7ac8b` | `oklch(77.51% 0.0676 59.77)` | Sweet Sue | black, 10.1 to 1 |
| 24 | `#d4a886` | `oklch(76.29% 0.0698 58.88)` | Desert Riverbed | black, 9.7 to 1 |
| 25 | `#d1a381` | `oklch(75.02% 0.0717 57.98)` | Sunset Beige | black, 9.2 to 1 |
| 26 | `#ce9e7c` | `oklch(73.62% 0.0734 57.03)` | Darling Clementine | black, 8.8 to 1 |
| 27 | `#ca9977` | `oklch(72.15% 0.0749 56.07)` | Sweet Almond | black, 8.3 to 1 |
| 28 | `#c69473` | `oklch(70.68% 0.0762 55.14)` | Surprise | black, 7.8 to 1 |
| 29 | `#c28f6e` | `oklch(69.27% 0.0774 54.26)` | Shiracha Brown | black, 7.4 to 1 |
| 30 | `#bf8b6a` | `oklch(68.00% 0.0784 53.48)` | Tiny Fawn | black, 7.1 to 1 |
| 31 | `#bc8867` | `oklch(66.94% 0.0792 52.82)` | Carnal Brown | black, 6.8 to 1 |
| 32 | `#ba8564` | `oklch(66.14% 0.0799 52.32)` | Cognac Brown | black, 6.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f9f4e9 0.0%, #f9f3e7 3.2%, #f8f1e5 6.5%, #f7efe2 9.7%, #f6edde 12.9%, #f5eada 16.1%, #f3e8d6 19.4%, #f2e5d2 22.6%, #f1e2ce 25.8%, #efdfca 29.0%, #eedcc6 32.3%, #edd9c1 35.5%, #ebd5bd 38.7%, #e9d2b8 41.9%, #e8ceb4 45.2%, #e6caaf 48.4%, #e4c6aa 51.6%, #e2c2a5 54.8%, #e0bea0 58.1%, #deba9a 61.3%, #dcb595 64.5%, #d9b190 67.7%, #d7ac8b 71.0%, #d4a886 74.2%, #d1a381 77.4%, #ce9e7c 80.6%, #ca9977 83.9%, #c69473 87.1%, #c28f6e 90.3%, #bf8b6a 93.5%, #bc8867 96.8%, #ba8564 100.0%);
background: linear-gradient(135deg in oklch, oklch(96.85% 0.0152 85.08) 0.0%, oklch(96.49% 0.0163 84.32) 3.2%, oklch(96.03% 0.0179 83.30) 6.5%, oklch(95.47% 0.0197 82.09) 9.7%, oklch(94.85% 0.0218 80.74) 12.9%, oklch(94.17% 0.0240 79.33) 16.1%, oklch(93.45% 0.0263 77.90) 19.4%, oklch(92.70% 0.0286 76.53) 22.6%, oklch(91.93% 0.0309 75.26) 25.8%, oklch(91.14% 0.0332 74.01) 29.0%, oklch(90.30% 0.0356 72.74) 32.3%, oklch(89.42% 0.0380 71.47) 35.5%, oklch(88.51% 0.0406 70.21) 38.7%, oklch(87.55% 0.0431 68.97) 41.9%, oklch(86.57% 0.0457 67.76) 45.2%, oklch(85.56% 0.0483 66.61) 48.4%, oklch(84.51% 0.0509 65.52) 51.6%, oklch(83.42% 0.0537 64.48) 54.8%, oklch(82.29% 0.0566 63.48) 58.1%, oklch(81.13% 0.0595 62.51) 61.3%, oklch(79.94% 0.0623 61.58) 64.5%, oklch(78.73% 0.0650 60.67) 67.7%, oklch(77.51% 0.0676 59.77) 71.0%, oklch(76.29% 0.0698 58.88) 74.2%, oklch(75.02% 0.0717 57.98) 77.4%, oklch(73.62% 0.0734 57.03) 80.6%, oklch(72.15% 0.0749 56.07) 83.9%, oklch(70.68% 0.0762 55.14) 87.1%, oklch(69.27% 0.0774 54.26) 90.3%, oklch(68.00% 0.0784 53.48) 93.5%, oklch(66.94% 0.0792 52.82) 96.8%, oklch(66.14% 0.0799 52.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.015 | 85.1 |
| 2 | 0.921 | 0.03 | 75.6 |
| 3 | 0.85 | 0.05 | 66.1 |
| 4 | 0.76 | 0.07 | 58.7 |
| 5 | 0.661 | 0.08 | 52.3 |

## In these collections

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

## Other forms

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