# Off-white to brown linear gradient

Off-white to brown linear gradient with 32 colors: #faf1e0, #f7eedb, #f5ead6, #f2e6d0, #eee1ca, #ebdbc3, #e7d5bb, #e3cfb3, #dfc9ab, #dbc2a3, #d7bb9a, #d3b492, #cfac89, #caa480, #c69c77, #c2956f, #bd8d66, #b9855e, #b57d56, #b0754e, #ac6d47, #a86640, #a35e3a, #9f5734, #9b502e, #984a28, #944424, #903e1f, #8d381b, #8a3318, #882e15, #852a12. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kQ9BI8ta86A`
- Page: https://grabient.com/kQ9BI8ta86A?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.9 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 | `#faf1e0` | `oklch(96.06% 0.0248 85.08)` | Cotton Whisper | black, 18.7 to 1 |
| 2 | `#f7eedb` | `oklch(95.11% 0.0267 84.20)` | Home Plate | black, 18.2 to 1 |
| 3 | `#f5ead6` | `oklch(94.00% 0.0288 83.18)` | Marquee White | black, 17.6 to 1 |
| 4 | `#f2e6d0` | `oklch(92.74% 0.0312 82.02)` | French Creme | black, 16.9 to 1 |
| 5 | `#eee1ca` | `oklch(91.35% 0.0340 80.74)` | Ivory Stone | black, 16.2 to 1 |
| 6 | `#ebdbc3` | `oklch(89.83% 0.0369 79.34)` | Wild Oats | black, 15.4 to 1 |
| 7 | `#e7d5bb` | `oklch(88.20% 0.0401 77.84)` | Warm Buttercream | black, 14.6 to 1 |
| 8 | `#e3cfb3` | `oklch(86.47% 0.0434 76.24)` | Lovely Bluff | black, 13.8 to 1 |
| 9 | `#dfc9ab` | `oklch(84.64% 0.0470 74.56)` | Czech Bakery | black, 13 to 1 |
| 10 | `#dbc2a3` | `oklch(82.73% 0.0507 72.80)` | Louvre | black, 12.2 to 1 |
| 11 | `#d7bb9a` | `oklch(80.76% 0.0545 70.98)` | Terracotta Sand | black, 11.4 to 1 |
| 12 | `#d3b492` | `oklch(78.72% 0.0585 69.10)` | Crème de Caramel | black, 10.6 to 1 |
| 13 | `#cfac89` | `oklch(76.63% 0.0625 67.18)` | Cliff Brown | black, 9.8 to 1 |
| 14 | `#caa480` | `oklch(74.50% 0.0667 65.23)` | Siesta Dreams | black, 9.1 to 1 |
| 15 | `#c69c77` | `oklch(72.35% 0.0708 63.24)` | Chimaera Brown | black, 8.4 to 1 |
| 16 | `#c2956f` | `oklch(70.18% 0.0751 61.25)` | Lanyard | black, 7.7 to 1 |
| 17 | `#bd8d66` | `oklch(68.01% 0.0793 59.24)` | Tatami Tan | black, 7.1 to 1 |
| 18 | `#b9855e` | `oklch(65.84% 0.0835 57.25)` | Cognac Brown | black, 6.5 to 1 |
| 19 | `#b57d56` | `oklch(63.69% 0.0877 55.26)` | Pastry Shell | black, 6 to 1 |
| 20 | `#b0754e` | `oklch(61.56% 0.0918 53.31)` | Baked Bean | black, 5.5 to 1 |
| 21 | `#ac6d47` | `oklch(59.47% 0.0958 51.38)` | Flickering Flame | black, 5 to 1 |
| 22 | `#a86640` | `oklch(57.43% 0.0998 49.51)` | Amazonian | black, 4.6 to 1 |
| 23 | `#a35e3a` | `oklch(55.45% 0.1036 47.68)` | Desert Soil | white, 4.9 to 1 |
| 24 | `#9f5734` | `oklch(53.55% 0.1074 45.93)` | Cinnamon Sparkle | white, 5.3 to 1 |
| 25 | `#9b502e` | `oklch(51.72% 0.1109 44.25)` | Hawaiian Coconut | white, 5.8 to 1 |
| 26 | `#984a28` | `oklch(49.99% 0.1143 42.65)` | Coco Muck | white, 6.3 to 1 |
| 27 | `#944424` | `oklch(48.35% 0.1174 41.15)` | Fluorescent Fire | white, 6.7 to 1 |
| 28 | `#903e1f` | `oklch(46.84% 0.1204 39.75)` | Fire | white, 7.2 to 1 |
| 29 | `#8d381b` | `oklch(45.44% 0.1231 38.47)` | Red Prairie | white, 7.7 to 1 |
| 30 | `#8a3318` | `oklch(44.19% 0.1255 37.31)` | Rogan Josh | white, 8.1 to 1 |
| 31 | `#882e15` | `oklch(43.08% 0.1277 36.29)` | Kobe | white, 8.5 to 1 |
| 32 | `#852a12` | `oklch(42.13% 0.1295 35.41)` | Red Shade Wash | white, 8.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #faf1e0 0.0%, #f7eedb 3.2%, #f5ead6 6.5%, #f2e6d0 9.7%, #eee1ca 12.9%, #ebdbc3 16.1%, #e7d5bb 19.4%, #e3cfb3 22.6%, #dfc9ab 25.8%, #dbc2a3 29.0%, #d7bb9a 32.3%, #d3b492 35.5%, #cfac89 38.7%, #caa480 41.9%, #c69c77 45.2%, #c2956f 48.4%, #bd8d66 51.6%, #b9855e 54.8%, #b57d56 58.1%, #b0754e 61.3%, #ac6d47 64.5%, #a86640 67.7%, #a35e3a 71.0%, #9f5734 74.2%, #9b502e 77.4%, #984a28 80.6%, #944424 83.9%, #903e1f 87.1%, #8d381b 90.3%, #8a3318 93.5%, #882e15 96.8%, #852a12 100.0%);
background: linear-gradient(45deg in oklch, oklch(96.06% 0.0248 85.08) 0.0%, oklch(95.11% 0.0267 84.20) 3.2%, oklch(94.00% 0.0288 83.18) 6.5%, oklch(92.74% 0.0312 82.02) 9.7%, oklch(91.35% 0.0340 80.74) 12.9%, oklch(89.83% 0.0369 79.34) 16.1%, oklch(88.20% 0.0401 77.84) 19.4%, oklch(86.47% 0.0434 76.24) 22.6%, oklch(84.64% 0.0470 74.56) 25.8%, oklch(82.73% 0.0507 72.80) 29.0%, oklch(80.76% 0.0545 70.98) 32.3%, oklch(78.72% 0.0585 69.10) 35.5%, oklch(76.63% 0.0625 67.18) 38.7%, oklch(74.50% 0.0667 65.23) 41.9%, oklch(72.35% 0.0708 63.24) 45.2%, oklch(70.18% 0.0751 61.25) 48.4%, oklch(68.01% 0.0793 59.24) 51.6%, oklch(65.84% 0.0835 57.25) 54.8%, oklch(63.69% 0.0877 55.26) 58.1%, oklch(61.56% 0.0918 53.31) 61.3%, oklch(59.47% 0.0958 51.38) 64.5%, oklch(57.43% 0.0998 49.51) 67.7%, oklch(55.45% 0.1036 47.68) 71.0%, oklch(53.55% 0.1074 45.93) 74.2%, oklch(51.72% 0.1109 44.25) 77.4%, oklch(49.99% 0.1143 42.65) 80.6%, oklch(48.35% 0.1174 41.15) 83.9%, oklch(46.84% 0.1204 39.75) 87.1%, oklch(45.44% 0.1231 38.47) 90.3%, oklch(44.19% 0.1255 37.31) 93.5%, oklch(43.08% 0.1277 36.29) 96.8%, oklch(42.13% 0.1295 35.41) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.025 | 85.1 |
| 2 | 0.421 | 0.13 | 35.4 |

## In these collections

- [Linear gradients](https://grabient.com/linear-gradients)
- [Two color gradients](https://grabient.com/two-color-gradients)

## Other forms

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