# Charcoal orange gradient

Black, gray, beige and dark purple linear gradient with 32 colors: #21161a, #281c20, #322427, #3d2f31, #4b3b3c, #5b4a48, #6b5956, #7d6a64, #8e7b72, #9f8c81, #af9d8f, #bead9c, #cbbba7, #d6c7b1, #ded0b8, #e4d5bc, #e6d6bc, #e5d3b8, #e1cdb1, #dbc3a7, #d3b69c, #c9a890, #be9884, #b28878, #a4776d, #966763, #885859, #7a4a52, #6d3e4b, #623345, #582b41, #51253d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Black, gray, beige and dark purple linear gradient
- Seed: `kSNw788A5KKqatM`
- Page: https://grabient.com/kSNw788A5KKqatM?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: light center, muted, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 12.3 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 | `#21161a` | `oklch(21.65% 0.0193 355.08)` | Bats Cloak | white, 17.5 to 1 |
| 2 | `#281c20` | `oklch(24.30% 0.0200 358.57)` | Velvet Black | white, 16.4 to 1 |
| 3 | `#322427` | `oklch(27.86% 0.0207 3.33)` | Hornblende | white, 14.7 to 1 |
| 4 | `#3d2f31` | `oklch(32.18% 0.0216 9.13)` | Chocolate Plum | white, 12.7 to 1 |
| 5 | `#4b3b3c` | `oklch(37.09% 0.0225 15.75)` | Burnt Bamboo | white, 10.5 to 1 |
| 6 | `#5b4a48` | `oklch(42.47% 0.0236 22.99)` | Chocolate Soul | white, 8.3 to 1 |
| 7 | `#6b5956` | `oklch(48.14% 0.0247 30.62)` | Hunting Boots | white, 6.5 to 1 |
| 8 | `#7d6a64` | `oklch(53.96% 0.0258 38.43)` | Muscatel | white, 5.1 to 1 |
| 9 | `#8e7b72` | `oklch(59.79% 0.0271 46.21)` | Miami Spice | black, 5.2 to 1 |
| 10 | `#9f8c81` | `oklch(65.46% 0.0284 53.74)` | Oak Brown | black, 6.5 to 1 |
| 11 | `#af9d8f` | `oklch(70.83% 0.0298 60.81)` | Bidwell Brown | black, 8 to 1 |
| 12 | `#bead9c` | `oklch(75.75% 0.0313 67.19)` | Gentry Grey | black, 9.6 to 1 |
| 13 | `#cbbba7` | `oklch(80.06% 0.0328 72.68)` | Attic Linen | black, 11.2 to 1 |
| 14 | `#d6c7b1` | `oklch(83.61% 0.0344 77.06)` | Desert Suede | black, 12.6 to 1 |
| 15 | `#ded0b8` | `oklch(86.26% 0.0360 80.11)` | Dirty Martini | black, 13.8 to 1 |
| 16 | `#e4d5bc` | `oklch(87.84% 0.0377 81.62)` | Cria Wool | black, 14.5 to 1 |
| 17 | `#e6d6bc` | `oklch(88.23% 0.0395 81.38)` | Palomino Mane | black, 14.7 to 1 |
| 18 | `#e5d3b8` | `oklch(87.45% 0.0415 79.37)` | Almond Brittle | black, 14.3 to 1 |
| 19 | `#e1cdb1` | `oklch(85.64% 0.0437 75.79)` | Muslin Tint | black, 13.5 to 1 |
| 20 | `#dbc3a7` | `oklch(82.96% 0.0460 70.87)` | Elafonisi Beach | black, 12.3 to 1 |
| 21 | `#d3b69c` | `oklch(79.53% 0.0485 64.82)` | Tower Tan | black, 10.9 to 1 |
| 22 | `#c9a890` | `oklch(75.50% 0.0511 57.88)` | Friendly Homestead | black, 9.4 to 1 |
| 23 | `#be9884` | `oklch(71.02% 0.0537 50.26)` | Cinnamon Roast | black, 8 to 1 |
| 24 | `#b28878` | `oklch(66.22% 0.0564 42.19)` | Caramel Brown | black, 6.6 to 1 |
| 25 | `#a4776d` | `oklch(61.24% 0.0590 33.87)` | Autumn Russet | black, 5.4 to 1 |
| 26 | `#966763` | `oklch(56.24% 0.0615 25.55)` | Café | white, 4.7 to 1 |
| 27 | `#885859` | `oklch(51.34% 0.0639 17.43)` | Flowering Chestnut | white, 5.8 to 1 |
| 28 | `#7a4a52` | `oklch(46.70% 0.0662 9.74)` | Nocturne Red | white, 7.1 to 1 |
| 29 | `#6d3e4b` | `oklch(42.44% 0.0683 2.69)` | Chilled Wine | white, 8.6 to 1 |
| 30 | `#623345` | `oklch(38.73% 0.0702 356.52)` | Clinker Red | white, 10 to 1 |
| 31 | `#582b41` | `oklch(35.69% 0.0718 351.45)` | Vistoris Lake | white, 11.4 to 1 |
| 32 | `#51253d` | `oklch(33.46% 0.0730 347.68)` | Prestige Mauve | white, 12.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #21161a 0.0%, #281c20 3.2%, #322427 6.5%, #3d2f31 9.7%, #4b3b3c 12.9%, #5b4a48 16.1%, #6b5956 19.4%, #7d6a64 22.6%, #8e7b72 25.8%, #9f8c81 29.0%, #af9d8f 32.3%, #bead9c 35.5%, #cbbba7 38.7%, #d6c7b1 41.9%, #ded0b8 45.2%, #e4d5bc 48.4%, #e6d6bc 51.6%, #e5d3b8 54.8%, #e1cdb1 58.1%, #dbc3a7 61.3%, #d3b69c 64.5%, #c9a890 67.7%, #be9884 71.0%, #b28878 74.2%, #a4776d 77.4%, #966763 80.6%, #885859 83.9%, #7a4a52 87.1%, #6d3e4b 90.3%, #623345 93.5%, #582b41 96.8%, #51253d 100.0%);
background: linear-gradient(45deg in oklch, oklch(21.65% 0.0193 355.08) 0.0%, oklch(24.30% 0.0200 358.57) 3.2%, oklch(27.86% 0.0207 3.33) 6.5%, oklch(32.18% 0.0216 9.13) 9.7%, oklch(37.09% 0.0225 15.75) 12.9%, oklch(42.47% 0.0236 22.99) 16.1%, oklch(48.14% 0.0247 30.62) 19.4%, oklch(53.96% 0.0258 38.43) 22.6%, oklch(59.79% 0.0271 46.21) 25.8%, oklch(65.46% 0.0284 53.74) 29.0%, oklch(70.83% 0.0298 60.81) 32.3%, oklch(75.75% 0.0313 67.19) 35.5%, oklch(80.06% 0.0328 72.68) 38.7%, oklch(83.61% 0.0344 77.06) 41.9%, oklch(86.26% 0.0360 80.11) 45.2%, oklch(87.84% 0.0377 81.62) 48.4%, oklch(88.23% 0.0395 81.38) 51.6%, oklch(87.45% 0.0415 79.37) 54.8%, oklch(85.64% 0.0437 75.79) 58.1%, oklch(82.96% 0.0460 70.87) 61.3%, oklch(79.53% 0.0485 64.82) 64.5%, oklch(75.50% 0.0511 57.88) 67.7%, oklch(71.02% 0.0537 50.26) 71.0%, oklch(66.22% 0.0564 42.19) 74.2%, oklch(61.24% 0.0590 33.87) 77.4%, oklch(56.24% 0.0615 25.55) 80.6%, oklch(51.34% 0.0639 17.43) 83.9%, oklch(46.70% 0.0662 9.74) 87.1%, oklch(42.44% 0.0683 2.69) 90.3%, oklch(38.73% 0.0702 356.52) 93.5%, oklch(35.69% 0.0718 351.45) 96.8%, oklch(33.46% 0.0730 347.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.019 | 355.1 |
| 2 | 0.882 | 0.039 | 441.7 |
| 3 | 0.335 | 0.073 | 347.7 |

## In these collections

- [Poetcore](https://grabient.com/poetcore)

## Other forms

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