# Umber to cream diagonal

Brown, black, tan and gray linear gradient with 64 colors: #342500, #332300, #302000, #2c1c00, #281700, #231300, #1e0e00, #190a00, #140600, #100400, #0c0200, #090100, #080100, #070000, #080000, #090000, #0d0100, #130301, #1b0803, #251008, #311a11, #3f261b, #4e3426, #5f4231, #70523e, #81614a, #927157, #a28163, #b1906f, #bf9d79, #caa882, #d3b18a, #d9b78f, #ddbb93, #e0bc95, #e0bc95, #e0ba95, #deb794, #dab392, #d7af8f, #d2aa8c, #cda48a, #c8a087, #c49b84, #bf9782, #bc9480, #b99280, #b79280, #b79281, #b79482, #b89684, #b99987, #ba9c8a, #bca08d, #bda491, #bfa895, #c1ac99, #c3b09e, #c5b4a2, #c7b8a6, #c9bbaa, #cbbead, #ccc0b0, #cdc2b2. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Brown, black, tan and gray linear gradient
- Seed: `kWRik9DQy6WSYQ9Xkz0aAlDg`
- Page: https://grabient.com/kWRik9DQy6WSYQ9Xkz0aAlDg?steps=64&angle=135
- Drawn as: linear gradient, 64 steps, 135 degrees
- Kinds: light center, muted, warm, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.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 | `#342500` | `oklch(27.56% 0.0564 85.75)` | Black Swan | white, 14.8 to 1 |
| 2 | `#332300` | `oklch(26.78% 0.0550 83.72)` | Black Swan | white, 15.2 to 1 |
| 3 | `#302000` | `oklch(25.60% 0.0528 81.22)` | Black Swan | white, 15.7 to 1 |
| 4 | `#2c1c00` | `oklch(24.08% 0.0502 78.17)` | Powdered Cocoa | white, 16.4 to 1 |
| 5 | `#281700` | `oklch(22.32% 0.0471 74.68)` | Cannon Black | white, 17.2 to 1 |
| 6 | `#231300` | `oklch(20.38% 0.0439 70.80)` | Super Black | white, 18 to 1 |
| 7 | `#1e0e00` | `oklch(18.36% 0.0407 66.61)` | Super Black | white, 18.7 to 1 |
| 8 | `#190a00` | `oklch(16.33% 0.0375 62.14)` | Soy Sauce | white, 19.3 to 1 |
| 9 | `#140600` | `oklch(14.37% 0.0346 57.41)` | Blackout | white, 19.8 to 1 |
| 10 | `#100400` | `oklch(12.56% 0.0321 52.41)` | Blackout | white, 20.2 to 1 |
| 11 | `#0c0200` | `oklch(10.98% 0.0303 47.14)` | Dark Matter | white, 20.4 to 1 |
| 12 | `#090100` | `oklch(9.70% 0.0294 41.76)` | Pupil | white, 20.6 to 1 |
| 13 | `#080100` | `oklch(8.82% 0.0296 36.81)` | Pupil | white, 20.7 to 1 |
| 14 | `#070000` | `oklch(8.40% 0.0308 33.21)` | Pupil | white, 20.7 to 1 |
| 15 | `#080000` | `oklch(8.52% 0.0325 31.74)` | Pupil | white, 20.7 to 1 |
| 16 | `#090000` | `oklch(9.25% 0.0336 33.65)` | Dark Matter | white, 20.7 to 1 |
| 17 | `#0d0100` | `oklch(10.68% 0.0345 38.14)` | Dark Matter | white, 20.5 to 1 |
| 18 | `#130301` | `oklch(13.03% 0.0353 38.29)` | Dark Matter | white, 20.1 to 1 |
| 19 | `#1b0803` | `oklch(16.25% 0.0366 39.19)` | Soy Sauce | white, 19.4 to 1 |
| 20 | `#251008` | `oklch(20.19% 0.0383 40.73)` | Severely Burnt Toast | white, 18.1 to 1 |
| 21 | `#311a11` | `oklch(24.73% 0.0403 42.81)` | Darkroom | white, 16.2 to 1 |
| 22 | `#3f261b` | `oklch(29.75% 0.0427 45.31)` | Woodsy Brown | white, 13.9 to 1 |
| 23 | `#4e3426` | `oklch(35.11% 0.0453 48.14)` | Sepia Brown | white, 11.4 to 1 |
| 24 | `#5f4231` | `oklch(40.70% 0.0480 51.19)` | Daniel Boone | white, 9 to 1 |
| 25 | `#70523e` | `oklch(46.37% 0.0508 54.35)` | Rookwood Medium Brown | white, 7.1 to 1 |
| 26 | `#81614a` | `oklch(52.02% 0.0536 57.51)` | Rookwood Brown | white, 5.5 to 1 |
| 27 | `#927157` | `oklch(57.51% 0.0563 60.58)` | Arrow Creek | black, 4.7 to 1 |
| 28 | `#a28163` | `oklch(62.70% 0.0588 63.44)` | Mulled Cider | black, 5.8 to 1 |
| 29 | `#b1906f` | `oklch(67.49% 0.0611 66.00)` | Pale Brown | black, 7 to 1 |
| 30 | `#bf9d79` | `oklch(71.73% 0.0631 68.14)` | Almond Toast | black, 8.2 to 1 |
| 31 | `#caa882` | `oklch(75.30% 0.0647 69.76)` | Toffee Tan | black, 9.4 to 1 |
| 32 | `#d3b18a` | `oklch(78.08% 0.0658 70.76)` | Summerwood | black, 10.4 to 1 |
| 33 | `#d9b78f` | `oklch(79.98% 0.0664 71.04)` | Nutmeg Glow | black, 11.1 to 1 |
| 34 | `#ddbb93` | `oklch(81.15% 0.0667 70.67)` | Painted Ash | black, 11.5 to 1 |
| 35 | `#e0bc95` | `oklch(81.71% 0.0667 69.75)` | Lama | black, 11.8 to 1 |
| 36 | `#e0bc95` | `oklch(81.73% 0.0664 68.37)` | Lama | black, 11.8 to 1 |
| 37 | `#e0ba95` | `oklch(81.30% 0.0659 66.60)` | Honey Nougat | black, 11.6 to 1 |
| 38 | `#deb794` | `oklch(80.49% 0.0652 64.54)` | Oakley Apricot | black, 11.3 to 1 |
| 39 | `#dab392` | `oklch(79.38% 0.0644 62.27)` | Sunset Cove | black, 10.8 to 1 |
| 40 | `#d7af8f` | `oklch(78.05% 0.0634 59.88)` | Key Wester | black, 10.3 to 1 |
| 41 | `#d2aa8c` | `oklch(76.58% 0.0622 57.45)` | Cliff Brown | black, 9.8 to 1 |
| 42 | `#cda48a` | `oklch(75.04% 0.0610 55.07)` | Sienna Buff | black, 9.3 to 1 |
| 43 | `#c8a087` | `oklch(73.52% 0.0597 52.83)` | Peanut Butter Crust | black, 8.8 to 1 |
| 44 | `#c49b84` | `oklch(72.09% 0.0583 50.80)` | Chestnut Bisque | black, 8.3 to 1 |
| 45 | `#bf9782` | `oklch(70.84% 0.0569 49.09)` | Spiced Brandy | black, 7.9 to 1 |
| 46 | `#bc9480` | `oklch(69.83% 0.0555 47.77)` | Faded Redwood | black, 7.6 to 1 |
| 47 | `#b99280` | `oklch(69.16% 0.0541 46.93)` | Belfry Brick | black, 7.4 to 1 |
| 48 | `#b79280` | `oklch(68.89% 0.0527 46.65)` | Changing Seasons | black, 7.4 to 1 |
| 49 | `#b79281` | `oklch(69.03% 0.0513 46.99)` | Changing Seasons | black, 7.4 to 1 |
| 50 | `#b79482` | `oklch(69.39% 0.0498 47.84)` | Caramelised | black, 7.5 to 1 |
| 51 | `#b89684` | `oklch(69.95% 0.0480 49.15)` | Brush | black, 7.7 to 1 |
| 52 | `#b99987` | `oklch(70.67% 0.0462 50.84)` | Cinnamon Roast | black, 7.9 to 1 |
| 53 | `#ba9c8a` | `oklch(71.52% 0.0442 52.86)` | Coquina Shell | black, 8.2 to 1 |
| 54 | `#bca08d` | `oklch(72.48% 0.0421 55.12)` | Mocha Foam | black, 8.5 to 1 |
| 55 | `#bda491` | `oklch(73.52% 0.0401 57.58)` | Faint Maple | black, 8.8 to 1 |
| 56 | `#bfa895` | `oklch(74.62% 0.0380 60.16)` | Snug as a Bug | black, 9.2 to 1 |
| 57 | `#c1ac99` | `oklch(75.73% 0.0359 62.79)` | Transcend | black, 9.6 to 1 |
| 58 | `#c3b09e` | `oklch(76.85% 0.0339 65.42)` | Renwick Beige | black, 10 to 1 |
| 59 | `#c5b4a2` | `oklch(77.93% 0.0320 67.97)` | Steveareno Beige | black, 10.4 to 1 |
| 60 | `#c7b8a6` | `oklch(78.95% 0.0302 70.39)` | Soft Stones | black, 10.8 to 1 |
| 61 | `#c9bbaa` | `oklch(79.88% 0.0285 72.60)` | Dinosaur Egg | black, 11.1 to 1 |
| 62 | `#cbbead` | `oklch(80.71% 0.0271 74.53)` | Minimalist | black, 11.4 to 1 |
| 63 | `#ccc0b0` | `oklch(81.38% 0.0258 76.13)` | Beach Woods | black, 11.7 to 1 |
| 64 | `#cdc2b2` | `oklch(81.89% 0.0248 77.33)` | Soft Pelican | black, 11.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #342500 0.0%, #332300 1.6%, #302000 3.2%, #2c1c00 4.8%, #281700 6.3%, #231300 7.9%, #1e0e00 9.5%, #190a00 11.1%, #140600 12.7%, #100400 14.3%, #0c0200 15.9%, #090100 17.5%, #080100 19.0%, #070000 20.6%, #080000 22.2%, #090000 23.8%, #0d0100 25.4%, #130301 27.0%, #1b0803 28.6%, #251008 30.2%, #311a11 31.7%, #3f261b 33.3%, #4e3426 34.9%, #5f4231 36.5%, #70523e 38.1%, #81614a 39.7%, #927157 41.3%, #a28163 42.9%, #b1906f 44.4%, #bf9d79 46.0%, #caa882 47.6%, #d3b18a 49.2%, #d9b78f 50.8%, #ddbb93 52.4%, #e0bc95 54.0%, #e0bc95 55.6%, #e0ba95 57.1%, #deb794 58.7%, #dab392 60.3%, #d7af8f 61.9%, #d2aa8c 63.5%, #cda48a 65.1%, #c8a087 66.7%, #c49b84 68.3%, #bf9782 69.8%, #bc9480 71.4%, #b99280 73.0%, #b79280 74.6%, #b79281 76.2%, #b79482 77.8%, #b89684 79.4%, #b99987 81.0%, #ba9c8a 82.5%, #bca08d 84.1%, #bda491 85.7%, #bfa895 87.3%, #c1ac99 88.9%, #c3b09e 90.5%, #c5b4a2 92.1%, #c7b8a6 93.7%, #c9bbaa 95.2%, #cbbead 96.8%, #ccc0b0 98.4%, #cdc2b2 100.0%);
background: linear-gradient(135deg in oklch, oklch(27.56% 0.0564 85.75) 0.0%, oklch(26.78% 0.0550 83.72) 1.6%, oklch(25.60% 0.0528 81.22) 3.2%, oklch(24.08% 0.0502 78.17) 4.8%, oklch(22.32% 0.0471 74.68) 6.3%, oklch(20.38% 0.0439 70.80) 7.9%, oklch(18.36% 0.0407 66.61) 9.5%, oklch(16.33% 0.0375 62.14) 11.1%, oklch(14.37% 0.0346 57.41) 12.7%, oklch(12.56% 0.0321 52.41) 14.3%, oklch(10.98% 0.0303 47.14) 15.9%, oklch(9.70% 0.0294 41.76) 17.5%, oklch(8.82% 0.0296 36.81) 19.0%, oklch(8.40% 0.0308 33.21) 20.6%, oklch(8.52% 0.0325 31.74) 22.2%, oklch(9.25% 0.0336 33.65) 23.8%, oklch(10.68% 0.0345 38.14) 25.4%, oklch(13.03% 0.0353 38.29) 27.0%, oklch(16.25% 0.0366 39.19) 28.6%, oklch(20.19% 0.0383 40.73) 30.2%, oklch(24.73% 0.0403 42.81) 31.7%, oklch(29.75% 0.0427 45.31) 33.3%, oklch(35.11% 0.0453 48.14) 34.9%, oklch(40.70% 0.0480 51.19) 36.5%, oklch(46.37% 0.0508 54.35) 38.1%, oklch(52.02% 0.0536 57.51) 39.7%, oklch(57.51% 0.0563 60.58) 41.3%, oklch(62.70% 0.0588 63.44) 42.9%, oklch(67.49% 0.0611 66.00) 44.4%, oklch(71.73% 0.0631 68.14) 46.0%, oklch(75.30% 0.0647 69.76) 47.6%, oklch(78.08% 0.0658 70.76) 49.2%, oklch(79.98% 0.0664 71.04) 50.8%, oklch(81.15% 0.0667 70.67) 52.4%, oklch(81.71% 0.0667 69.75) 54.0%, oklch(81.73% 0.0664 68.37) 55.6%, oklch(81.30% 0.0659 66.60) 57.1%, oklch(80.49% 0.0652 64.54) 58.7%, oklch(79.38% 0.0644 62.27) 60.3%, oklch(78.05% 0.0634 59.88) 61.9%, oklch(76.58% 0.0622 57.45) 63.5%, oklch(75.04% 0.0610 55.07) 65.1%, oklch(73.52% 0.0597 52.83) 66.7%, oklch(72.09% 0.0583 50.80) 68.3%, oklch(70.84% 0.0569 49.09) 69.8%, oklch(69.83% 0.0555 47.77) 71.4%, oklch(69.16% 0.0541 46.93) 73.0%, oklch(68.89% 0.0527 46.65) 74.6%, oklch(69.03% 0.0513 46.99) 76.2%, oklch(69.39% 0.0498 47.84) 77.8%, oklch(69.95% 0.0480 49.15) 79.4%, oklch(70.67% 0.0462 50.84) 81.0%, oklch(71.52% 0.0442 52.86) 82.5%, oklch(72.48% 0.0421 55.12) 84.1%, oklch(73.52% 0.0401 57.58) 85.7%, oklch(74.62% 0.0380 60.16) 87.3%, oklch(75.73% 0.0359 62.79) 88.9%, oklch(76.85% 0.0339 65.42) 90.5%, oklch(77.93% 0.0320 67.97) 92.1%, oklch(78.95% 0.0302 70.39) 93.7%, oklch(79.88% 0.0285 72.60) 95.2%, oklch(80.71% 0.0271 74.53) 96.8%, oklch(81.38% 0.0258 76.13) 98.4%, oklch(81.89% 0.0248 77.33) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.056 | 85.8 |
| 2 | 0.102 | 0.034 | 38.2 |
| 3 | 0.791 | 0.066 | 71 |
| 4 | 0.689 | 0.052 | 46.7 |
| 5 | 0.819 | 0.025 | 77.3 |

## In these collections

- [Brown gradients](https://grabient.com/brown-gradients)

## Other forms

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