# Seamless black, dark green and teal angular gradient

Seamless black, dark green and teal angular gradient with 48 colors: #21211a, #25251c, #2c2b1e, #343320, #3d3c22, #484624, #535026, #5d5a27, #686329, #706b29, #77722a, #7b762a, #7b782b, #77762d, #70722e, #676b2f, #5d6330, #52592f, #474f2e, #3d452c, #353d29, #2e3627, #2a3124, #272e23, #263022, #263523, #253d26, #23492b, #1a5633, #00653e, #00724d, #007e5c, #008a6a, #009375, #009a7c, #009c7e, #009b7a, #009670, #008e61, #00834e, #0b7736, #2a6728, #33561f, #34471a, #313a19, #2b2f19, #25261a, #21211a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWPglMxyO_yUJQ3OxMQnwS4Q`
- Page: https://grabient.com/kWPglMxyO_yUJQ3OxMQnwS4Q?style=angularGradient&steps=48&angle=109
- Drawn as: angular gradient, 48 steps, 109 degrees
- Kinds: vivid, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.7 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 | `#21211a` | `oklch(24.41% 0.0124 107.58)` | Petroleum | white, 16.2 to 1 |
| 2 | `#25251c` | `oklch(26.16% 0.0172 107.42)` | Black Chestnut Oak | white, 15.4 to 1 |
| 3 | `#2c2b1e` | `oklch(28.63% 0.0238 107.09)` | Green Waterloo | white, 14.2 to 1 |
| 4 | `#343320` | `oklch(31.64% 0.0320 106.64)` | Fuchsia Berries | white, 12.7 to 1 |
| 5 | `#3d3c22` | `oklch(35.03% 0.0412 106.13)` | Green 383 | white, 11.2 to 1 |
| 6 | `#484624` | `oklch(38.63% 0.0510 105.61)` | Nori Seaweed Green | white, 9.6 to 1 |
| 7 | `#535026` | `oklch(42.28% 0.0609 105.15)` | Warplock Bronze | white, 8.2 to 1 |
| 8 | `#5d5a27` | `oklch(45.82% 0.0705 104.80)` | Reptile Revenge | white, 7.1 to 1 |
| 9 | `#686329` | `oklch(49.07% 0.0793 104.63)` | Saguaro | white, 6.1 to 1 |
| 10 | `#706b29` | `oklch(51.87% 0.0869 104.69)` | Safari Green | white, 5.4 to 1 |
| 11 | `#77722a` | `oklch(54.06% 0.0929 105.04)` | Wood Garlic | white, 4.9 to 1 |
| 12 | `#7b762a` | `oklch(55.46% 0.0967 105.73)` | Faience Green | white, 4.7 to 1 |
| 13 | `#7b782b` | `oklch(55.92% 0.0978 106.84)` | Crocodile Eye | white, 4.6 to 1 |
| 14 | `#77762d` | `oklch(55.23% 0.0956 108.34)` | Jungle Look | white, 4.7 to 1 |
| 15 | `#70722e` | `oklch(53.54% 0.0903 110.18)` | Olivetone | white, 5 to 1 |
| 16 | `#676b2f` | `oklch(51.07% 0.0825 112.31)` | Safari Green | white, 5.6 to 1 |
| 17 | `#5d6330` | `oklch(48.03% 0.0732 114.70)` | Gardener Green | white, 6.4 to 1 |
| 18 | `#52592f` | `oklch(44.64% 0.0629 117.30)` | Soldier Green | white, 7.4 to 1 |
| 19 | `#474f2e` | `oklch(41.12% 0.0525 120.05)` | Matsuba Green | white, 8.6 to 1 |
| 20 | `#3d452c` | `oklch(37.69% 0.0427 122.93)` | Mallardish | white, 10 to 1 |
| 21 | `#353d29` | `oklch(34.56% 0.0341 125.88)` | Green Kelp | white, 11.3 to 1 |
| 22 | `#2e3627` | `oklch(31.95% 0.0275 128.85)` | Aimiru Brown | white, 12.6 to 1 |
| 23 | `#2a3124` | `oklch(30.08% 0.0237 131.81)` | Mountain Range Green | white, 13.4 to 1 |
| 24 | `#272e23` | `oklch(29.16% 0.0234 134.70)` | Pine Tree | white, 13.9 to 1 |
| 25 | `#263022` | `oklch(29.43% 0.0275 137.60)` | Mountain Range Green | white, 13.7 to 1 |
| 26 | `#263523` | `oklch(30.92% 0.0366 141.10)` | Black Leather Jacket | white, 13 to 1 |
| 27 | `#253d26` | `oklch(33.42% 0.0501 145.13)` | Mizukaze Green | white, 11.7 to 1 |
| 28 | `#23492b` | `oklch(36.69% 0.0668 149.47)` | Order Green | white, 10.2 to 1 |
| 29 | `#1a5633` | `oklch(40.49% 0.0857 153.95)` | Moor-Monster | white, 8.6 to 1 |
| 30 | `#00653e` | `oklch(44.58% 0.1037 158.33)` | Aotake Bamboo | white, 7.1 to 1 |
| 31 | `#00724d` | `oklch(48.72% 0.1061 162.48)` | Lush Meadow | white, 5.9 to 1 |
| 32 | `#007e5c` | `oklch(52.68% 0.1091 166.16)` | Spanish Viridian | white, 5 to 1 |
| 33 | `#008a6a` | `oklch(56.20% 0.1123 169.18)` | Carolina Green | black, 4.8 to 1 |
| 34 | `#009375` | `oklch(59.06% 0.1153 171.34)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 35 | `#009a7c` | `oklch(61.01% 0.1178 172.44)` | Paolo Veronese Green | black, 5.8 to 1 |
| 36 | `#009c7e` | `oklch(61.82% 0.1195 172.29)` | Paolo Veronese Green | black, 6 to 1 |
| 37 | `#009b7a` | `oklch(61.31% 0.1206 170.60)` | Paolo Veronese Green | black, 5.9 to 1 |
| 38 | `#009670` | `oklch(59.67% 0.1219 167.24)` | Cadaverous | black, 5.5 to 1 |
| 39 | `#008e61` | `oklch(57.09% 0.1243 162.48)` | Chagall Green | black, 5 to 1 |
| 40 | `#00834e` | `oklch(53.76% 0.1288 156.64)` | Dark Emerald | white, 4.7 to 1 |
| 41 | `#0b7736` | `oklch(49.90% 0.1333 150.04)` | Nature’s Strength | white, 5.6 to 1 |
| 42 | `#2a6728` | `oklch(45.69% 0.1134 142.96)` | Radical Green | white, 6.8 to 1 |
| 43 | `#33561f` | `oklch(41.34% 0.0928 135.70)` | Navy Green | white, 8.4 to 1 |
| 44 | `#34471a` | `oklch(37.05% 0.0724 128.59)` | Treetop Cathedral | white, 10.1 to 1 |
| 45 | `#313a19` | `oklch(33.01% 0.0532 121.91)` | Turtle Skin | white, 12 to 1 |
| 46 | `#2b2f19` | `oklch(29.43% 0.0362 115.98)` | Metal Construction Green | white, 13.8 to 1 |
| 47 | `#25261a` | `oklch(26.49% 0.0223 111.10)` | Underworld | white, 15.2 to 1 |
| 48 | `#21211a` | `oklch(24.41% 0.0124 107.58)` | Petroleum | white, 16.2 to 1 |

## CSS

```css
background: conic-gradient(from 109deg, #21211a 0.0%, #25251c 2.1%, #2c2b1e 4.3%, #343320 6.4%, #3d3c22 8.5%, #484624 10.6%, #535026 12.8%, #5d5a27 14.9%, #686329 17.0%, #706b29 19.1%, #77722a 21.3%, #7b762a 23.4%, #7b782b 25.5%, #77762d 27.7%, #70722e 29.8%, #676b2f 31.9%, #5d6330 34.0%, #52592f 36.2%, #474f2e 38.3%, #3d452c 40.4%, #353d29 42.6%, #2e3627 44.7%, #2a3124 46.8%, #272e23 48.9%, #263022 51.1%, #263523 53.2%, #253d26 55.3%, #23492b 57.4%, #1a5633 59.6%, #00653e 61.7%, #00724d 63.8%, #007e5c 66.0%, #008a6a 68.1%, #009375 70.2%, #009a7c 72.3%, #009c7e 74.5%, #009b7a 76.6%, #009670 78.7%, #008e61 80.9%, #00834e 83.0%, #0b7736 85.1%, #2a6728 87.2%, #33561f 89.4%, #34471a 91.5%, #313a19 93.6%, #2b2f19 95.7%, #25261a 97.9%, #21211a 100.0%);
background: conic-gradient(from 109deg in oklch, oklch(24.41% 0.0124 107.58) 0.0%, oklch(26.16% 0.0172 107.42) 2.1%, oklch(28.63% 0.0238 107.09) 4.3%, oklch(31.64% 0.0320 106.64) 6.4%, oklch(35.03% 0.0412 106.13) 8.5%, oklch(38.63% 0.0510 105.61) 10.6%, oklch(42.28% 0.0609 105.15) 12.8%, oklch(45.82% 0.0705 104.80) 14.9%, oklch(49.07% 0.0793 104.63) 17.0%, oklch(51.87% 0.0869 104.69) 19.1%, oklch(54.06% 0.0929 105.04) 21.3%, oklch(55.46% 0.0967 105.73) 23.4%, oklch(55.92% 0.0978 106.84) 25.5%, oklch(55.23% 0.0956 108.34) 27.7%, oklch(53.54% 0.0903 110.18) 29.8%, oklch(51.07% 0.0825 112.31) 31.9%, oklch(48.03% 0.0732 114.70) 34.0%, oklch(44.64% 0.0629 117.30) 36.2%, oklch(41.12% 0.0525 120.05) 38.3%, oklch(37.69% 0.0427 122.93) 40.4%, oklch(34.56% 0.0341 125.88) 42.6%, oklch(31.95% 0.0275 128.85) 44.7%, oklch(30.08% 0.0237 131.81) 46.8%, oklch(29.16% 0.0234 134.70) 48.9%, oklch(29.43% 0.0275 137.60) 51.1%, oklch(30.92% 0.0366 141.10) 53.2%, oklch(33.42% 0.0501 145.13) 55.3%, oklch(36.69% 0.0668 149.47) 57.4%, oklch(40.49% 0.0857 153.95) 59.6%, oklch(44.58% 0.1037 158.33) 61.7%, oklch(48.72% 0.1061 162.48) 63.8%, oklch(52.68% 0.1091 166.16) 66.0%, oklch(56.20% 0.1123 169.18) 68.1%, oklch(59.06% 0.1153 171.34) 70.2%, oklch(61.01% 0.1178 172.44) 72.3%, oklch(61.82% 0.1195 172.29) 74.5%, oklch(61.31% 0.1206 170.60) 76.6%, oklch(59.67% 0.1219 167.24) 78.7%, oklch(57.09% 0.1243 162.48) 80.9%, oklch(53.76% 0.1288 156.64) 83.0%, oklch(49.90% 0.1333 150.04) 85.1%, oklch(45.69% 0.1134 142.96) 87.2%, oklch(41.34% 0.0928 135.70) 89.4%, oklch(37.05% 0.0724 128.59) 91.5%, oklch(33.01% 0.0532 121.91) 93.6%, oklch(29.43% 0.0362 115.98) 95.7%, oklch(26.49% 0.0223 111.10) 97.9%, oklch(24.41% 0.0124 107.58) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.012 | 107.6 |
| 2 | 0.559 | 0.098 | 106.5 |
| 3 | 0.291 | 0.025 | 136.1 |
| 4 | 0.618 | 0.189 | 172 |
| 5 | 0.244 | 0.012 | 107.6 |

## Other forms

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