# Charcoal amber glass bands

Black, teal, red and beige linear gradient with 32 colors: #181b1d, #1a2024, #1d282d, #1f3238, #213d43, #20494d, #1f5554, #1e5f56, #246751, #366b41, #516a25, #6e6300, #845900, #9a4c00, #a93d25, #b03942, #b73b51, #bf4156, #c84951, #d05546, #d56336, #d87327, #d88321, #d8912a, #d99c3b, #dba64f, #ddb163, #e0ba77, #e3c389, #e5cb99, #e7d1a7, #e9d6b0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Black, teal, red and beige linear gradient
- Seed: `kWOASoups4MM5LZbMkacBPBQ`
- Page: https://grabient.com/kWOASoups4MM5LZbMkacBPBQ?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 12 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 | `#181b1d` | `oklch(22.05% 0.0055 236.95)` | Gluon Grey | white, 17.2 to 1 |
| 2 | `#1a2024` | `oklch(24.10% 0.0109 232.36)` | Satin Deep Black | white, 16.3 to 1 |
| 3 | `#1d282d` | `oklch(26.97% 0.0181 226.92)` | Black Pearl | white, 15 to 1 |
| 4 | `#1f3238` | `oklch(30.39% 0.0265 220.48)` | Ore Bluish Black | white, 13.3 to 1 |
| 5 | `#213d43` | `oklch(34.11% 0.0360 212.88)` | Sunken Harbour | white, 11.5 to 1 |
| 6 | `#20494d` | `oklch(37.85% 0.0461 203.98)` | Ponderosa Pine | white, 9.8 to 1 |
| 7 | `#1f5554` | `oklch(41.34% 0.0566 193.60)` | Forbidden Forest | white, 8.4 to 1 |
| 8 | `#1e5f56` | `oklch(44.32% 0.0669 181.60)` | Empress Teal | white, 7.3 to 1 |
| 9 | `#246751` | `oklch(46.53% 0.0769 167.67)` | Celtic Green | white, 6.6 to 1 |
| 10 | `#366b41` | `oklch(47.99% 0.0881 149.17)` | Arcala Green | white, 6.2 to 1 |
| 11 | `#516a25` | `oklch(48.91% 0.1005 126.58)` | Bowser Shell | white, 6 to 1 |
| 12 | `#6e6300` | `oklch(49.47% 0.1035 101.84)` | Spicy Mustard | white, 6 to 1 |
| 13 | `#845900` | `oklch(49.87% 0.1044 76.88)` | Soil of Avagddu | white, 6.1 to 1 |
| 14 | `#9a4c00` | `oklch(50.31% 0.1266 53.68)` | Burnt Bagel | white, 6.2 to 1 |
| 15 | `#a93d25` | `oklch(50.95% 0.1473 34.21)` | Chinese Brown | white, 6.1 to 1 |
| 16 | `#b03942` | `oklch(52.01% 0.1546 20.32)` | Lusty Red | white, 5.9 to 1 |
| 17 | `#b73b51` | `oklch(53.64% 0.1588 13.83)` | Merlot Magic | white, 5.5 to 1 |
| 18 | `#bf4156` | `oklch(55.68% 0.1607 14.30)` | Saffron Desires | white, 5.1 to 1 |
| 19 | `#c84951` | `oklch(58.03% 0.1607 20.08)` | English Coral | white, 4.6 to 1 |
| 20 | `#d05546` | `oklch(60.59% 0.1589 29.52)` | Chilli Cashew | black, 5 to 1 |
| 21 | `#d56336` | `oklch(63.27% 0.1557 40.96)` | Tangerine Bliss | black, 5.6 to 1 |
| 22 | `#d87327` | `oklch(65.97% 0.1512 52.76)` | Bitter Orange | black, 6.4 to 1 |
| 23 | `#d88321` | `oklch(68.61% 0.1457 63.28)` | Dulce de Leche | black, 7.1 to 1 |
| 24 | `#d8912a` | `oklch(71.07% 0.1394 70.86)` | Autumn Blaze | black, 7.9 to 1 |
| 25 | `#d99c3b` | `oklch(73.42% 0.1319 75.03)` | Golden Hamster | black, 8.7 to 1 |
| 26 | `#dba64f` | `oklch(75.87% 0.1215 77.96)` | Golden Apricot | black, 9.6 to 1 |
| 27 | `#ddb163` | `oklch(78.37% 0.1093 79.97)` | Stranglethorn Ochre | black, 10.5 to 1 |
| 28 | `#e0ba77` | `oklch(80.81% 0.0962 81.29)` | Tahini | black, 11.4 to 1 |
| 29 | `#e3c389` | `oklch(83.10% 0.0831 82.11)` | Moonlight Yellow | black, 12.4 to 1 |
| 30 | `#e5cb99` | `oklch(85.15% 0.0711 82.65)` | Abstract | black, 13.3 to 1 |
| 31 | `#e7d1a7` | `oklch(86.88% 0.0609 83.11)` | Sand Sculpture | black, 14 to 1 |
| 32 | `#e9d6b0` | `oklch(88.19% 0.0537 83.72)` | Convivial Yellow | black, 14.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #181b1d 0.0%, #1a2024 3.2%, #1d282d 6.5%, #1f3238 9.7%, #213d43 12.9%, #20494d 16.1%, #1f5554 19.4%, #1e5f56 22.6%, #246751 25.8%, #366b41 29.0%, #516a25 32.3%, #6e6300 35.5%, #845900 38.7%, #9a4c00 41.9%, #a93d25 45.2%, #b03942 48.4%, #b73b51 51.6%, #bf4156 54.8%, #c84951 58.1%, #d05546 61.3%, #d56336 64.5%, #d87327 67.7%, #d88321 71.0%, #d8912a 74.2%, #d99c3b 77.4%, #dba64f 80.6%, #ddb163 83.9%, #e0ba77 87.1%, #e3c389 90.3%, #e5cb99 93.5%, #e7d1a7 96.8%, #e9d6b0 100.0%);
background: linear-gradient(180deg in oklch, oklch(22.05% 0.0055 236.95) 0.0%, oklch(24.10% 0.0109 232.36) 3.2%, oklch(26.97% 0.0181 226.92) 6.5%, oklch(30.39% 0.0265 220.48) 9.7%, oklch(34.11% 0.0360 212.88) 12.9%, oklch(37.85% 0.0461 203.98) 16.1%, oklch(41.34% 0.0566 193.60) 19.4%, oklch(44.32% 0.0669 181.60) 22.6%, oklch(46.53% 0.0769 167.67) 25.8%, oklch(47.99% 0.0881 149.17) 29.0%, oklch(48.91% 0.1005 126.58) 32.3%, oklch(49.47% 0.1035 101.84) 35.5%, oklch(49.87% 0.1044 76.88) 38.7%, oklch(50.31% 0.1266 53.68) 41.9%, oklch(50.95% 0.1473 34.21) 45.2%, oklch(52.01% 0.1546 20.32) 48.4%, oklch(53.64% 0.1588 13.83) 51.6%, oklch(55.68% 0.1607 14.30) 54.8%, oklch(58.03% 0.1607 20.08) 58.1%, oklch(60.59% 0.1589 29.52) 61.3%, oklch(63.27% 0.1557 40.96) 64.5%, oklch(65.97% 0.1512 52.76) 67.7%, oklch(68.61% 0.1457 63.28) 71.0%, oklch(71.07% 0.1394 70.86) 74.2%, oklch(73.42% 0.1319 75.03) 77.4%, oklch(75.87% 0.1215 77.96) 80.6%, oklch(78.37% 0.1093 79.97) 83.9%, oklch(80.81% 0.0962 81.29) 87.1%, oklch(83.10% 0.0831 82.11) 90.3%, oklch(85.15% 0.0711 82.65) 93.5%, oklch(86.88% 0.0609 83.11) 96.8%, oklch(88.19% 0.0537 83.72) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.006 | 237 |
| 2 | 0.461 | 0.074 | 171.4 |
| 3 | 0.528 | 0.157 | 16.1 |
| 4 | 0.717 | 0.138 | 72.1 |
| 5 | 0.882 | 0.054 | 83.7 |

## In these collections

- [Stained glass colors](https://grabient.com/stained-glass-colors)

## Other forms

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