# Analogous black, brown and orange linear gradient

Analogous black, brown and orange linear gradient with 32 colors: #171717, #1c1918, #211b19, #281d1a, #2f1f1b, #37211c, #40241e, #4a261f, #532920, #5d2c22, #682e23, #723124, #7c3426, #853727, #8f3a29, #973d2a, #9f402c, #a6442d, #ae492f, #b54e32, #bd5334, #c45937, #cb5f39, #d1653c, #d86a3f, #de7042, #e37644, #e87b47, #ed8049, #f1844c, #f5884d, #f98b4f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSNAAYPi6_963wY`
- Page: https://grabient.com/kSNAAYPi6_963wY?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#171717` | `oklch(20.47% 0.0000 89.88)` | Cynical Black | white, 17.9 to 1 |
| 2 | `#1c1918` | `oklch(21.51% 0.0049 33.72)` | Black Umber | white, 17.5 to 1 |
| 3 | `#211b19` | `oklch(22.76% 0.0110 33.65)` | Dynamic Black | white, 17 to 1 |
| 4 | `#281d1a` | `oklch(24.22% 0.0183 33.54)` | Dark Orchestra | white, 16.4 to 1 |
| 5 | `#2f1f1b` | `oklch(25.84% 0.0265 33.41)` | Kenpōzome Black | white, 15.7 to 1 |
| 6 | `#37211c` | `oklch(27.62% 0.0355 33.27)` | Scorched | white, 14.9 to 1 |
| 7 | `#40241e` | `oklch(29.51% 0.0450 33.12)` | Brown Pod | white, 14 to 1 |
| 8 | `#4a261f` | `oklch(31.50% 0.0550 32.98)` | Torrefacto Roast | white, 13.2 to 1 |
| 9 | `#532920` | `oklch(33.57% 0.0651 32.86)` | Bitter Chocolate | white, 12.2 to 1 |
| 10 | `#5d2c22` | `oklch(35.68% 0.0752 32.78)` | Kōrozen | white, 11.3 to 1 |
| 11 | `#682e23` | `oklch(37.81% 0.0851 32.74)` | Hereford Cow Brown | white, 10.4 to 1 |
| 12 | `#723124` | `oklch(39.94% 0.0947 32.75)` | Hihada Brown | white, 9.6 to 1 |
| 13 | `#7c3426` | `oklch(42.05% 0.1037 32.82)` | Roycroft Copper Red | white, 8.8 to 1 |
| 14 | `#853727` | `oklch(44.09% 0.1119 32.97)` | Kofta Brown | white, 8.1 to 1 |
| 15 | `#8f3a29` | `oklch(46.06% 0.1193 33.21)` | Red Prairie | white, 7.5 to 1 |
| 16 | `#973d2a` | `oklch(47.93% 0.1255 33.54)` | Brick Paver | white, 6.9 to 1 |
| 17 | `#9f402c` | `oklch(49.70% 0.1305 33.99)` | Edocha | white, 6.4 to 1 |
| 18 | `#a6442d` | `oklch(51.51% 0.1347 34.60)` | Toasted Paprika | white, 5.9 to 1 |
| 19 | `#ae492f` | `oklch(53.38% 0.1383 35.34)` | Red Terra | white, 5.5 to 1 |
| 20 | `#b54e32` | `oklch(55.29% 0.1412 36.19)` | Cinnamon Sunset | white, 5.1 to 1 |
| 21 | `#bd5334` | `oklch(57.22% 0.1436 37.14)` | Orange Vermillion | white, 4.7 to 1 |
| 22 | `#c45937` | `oklch(59.14% 0.1456 38.17)` | Raucous Orange | black, 4.8 to 1 |
| 23 | `#cb5f39` | `oklch(61.05% 0.1471 39.24)` | Reed Mace | black, 5.2 to 1 |
| 24 | `#d1653c` | `oklch(62.93% 0.1483 40.34)` | Koi | black, 5.6 to 1 |
| 25 | `#d86a3f` | `oklch(64.74% 0.1492 41.45)` | Bonfire Night | black, 6 to 1 |
| 26 | `#de7042` | `oklch(66.49% 0.1499 42.54)` | Knockout Orange | black, 6.4 to 1 |
| 27 | `#e37644` | `oklch(68.15% 0.1504 43.59)` | Jaffa | black, 6.9 to 1 |
| 28 | `#e87b47` | `oklch(69.69% 0.1509 44.58)` | Solar Flare | black, 7.3 to 1 |
| 29 | `#ed8049` | `oklch(71.11% 0.1513 45.49)` | Mustard Crusted Salmon | black, 7.7 to 1 |
| 30 | `#f1844c` | `oklch(72.38% 0.1517 46.29)` | Crusta | black, 8.1 to 1 |
| 31 | `#f5884d` | `oklch(73.49% 0.1523 46.96)` | Crusta | black, 8.4 to 1 |
| 32 | `#f98b4f` | `oklch(74.41% 0.1530 47.49)` | Blaze | black, 8.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #171717 0.0%, #1c1918 3.2%, #211b19 6.5%, #281d1a 9.7%, #2f1f1b 12.9%, #37211c 16.1%, #40241e 19.4%, #4a261f 22.6%, #532920 25.8%, #5d2c22 29.0%, #682e23 32.3%, #723124 35.5%, #7c3426 38.7%, #853727 41.9%, #8f3a29 45.2%, #973d2a 48.4%, #9f402c 51.6%, #a6442d 54.8%, #ae492f 58.1%, #b54e32 61.3%, #bd5334 64.5%, #c45937 67.7%, #cb5f39 71.0%, #d1653c 74.2%, #d86a3f 77.4%, #de7042 80.6%, #e37644 83.9%, #e87b47 87.1%, #ed8049 90.3%, #f1844c 93.5%, #f5884d 96.8%, #f98b4f 100.0%);
background: linear-gradient(180deg in oklch, oklch(20.47% 0.0000 89.88) 0.0%, oklch(21.51% 0.0049 33.72) 3.2%, oklch(22.76% 0.0110 33.65) 6.5%, oklch(24.22% 0.0183 33.54) 9.7%, oklch(25.84% 0.0265 33.41) 12.9%, oklch(27.62% 0.0355 33.27) 16.1%, oklch(29.51% 0.0450 33.12) 19.4%, oklch(31.50% 0.0550 32.98) 22.6%, oklch(33.57% 0.0651 32.86) 25.8%, oklch(35.68% 0.0752 32.78) 29.0%, oklch(37.81% 0.0851 32.74) 32.3%, oklch(39.94% 0.0947 32.75) 35.5%, oklch(42.05% 0.1037 32.82) 38.7%, oklch(44.09% 0.1119 32.97) 41.9%, oklch(46.06% 0.1193 33.21) 45.2%, oklch(47.93% 0.1255 33.54) 48.4%, oklch(49.70% 0.1305 33.99) 51.6%, oklch(51.51% 0.1347 34.60) 54.8%, oklch(53.38% 0.1383 35.34) 58.1%, oklch(55.29% 0.1412 36.19) 61.3%, oklch(57.22% 0.1436 37.14) 64.5%, oklch(59.14% 0.1456 38.17) 67.7%, oklch(61.05% 0.1471 39.24) 71.0%, oklch(62.93% 0.1483 40.34) 74.2%, oklch(64.74% 0.1492 41.45) 77.4%, oklch(66.49% 0.1499 42.54) 80.6%, oklch(68.15% 0.1504 43.59) 83.9%, oklch(69.69% 0.1509 44.58) 87.1%, oklch(71.11% 0.1513 45.49) 90.3%, oklch(72.38% 0.1517 46.29) 93.5%, oklch(73.49% 0.1523 46.96) 96.8%, oklch(74.41% 0.1530 47.49) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0 | 33.8 |
| 2 | 0.488 | 0.128 | 33.8 |
| 3 | 0.744 | 0.153 | 47.5 |

## In these collections

- [Discord server banner gradients](https://grabient.com/discord-server-banner-gradients)

## Other forms

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