# Seamless black, green and yellow angular swatches

Seamless black, green and yellow angular swatches with 34 colors: #020202, #050b0a, #0d201a, #173a2e, #225740, #2c724d, #2f8853, #219c4f, #00ad45, #00bb38, #00c810, #48d300, #76dd00, #a0e800, #c5f134, #e0f864, #eefc7d, #edfb7f, #dff66a, #c4ee45, #9ce500, #70d900, #39ce00, #00c121, #00b130, #00a237, #009142, #007e4c, #006850, #004d4b, #00323c, #041a29, #05080f, #020202. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaFgCAw6Y8-DjPh5tbz3t1DD6ywoKgE2A`
- Page: https://grabient.com/kaFgCAw6Y8-DjPh5tbz3t1DD6ywoKgE2A?style=angularSwatches&steps=34
- Drawn as: angular swatches, 34 steps, 90 degrees
- Kinds: light center, vivid, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 18.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 | `#020202` | `oklch(8.66% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 2 | `#050b0a` | `oklch(14.34% 0.0118 177.51)` | Dark Side of the Moon | white, 19.7 to 1 |
| 3 | `#0d201a` | `oklch(22.47% 0.0277 172.95)` | Black Emerald | white, 16.9 to 1 |
| 4 | `#173a2e` | `oklch(31.89% 0.0469 167.66)` | Palm Green | white, 12.4 to 1 |
| 5 | `#225740` | `oklch(41.37% 0.0688 162.26)` | Rousseau Green | white, 8.3 to 1 |
| 6 | `#2c724d` | `oklch(49.75% 0.0924 157.38)` | Green Velvet | white, 5.7 to 1 |
| 7 | `#2f8853` | `oklch(56.05% 0.1187 153.58)` | Lake Green | black, 4.7 to 1 |
| 8 | `#219c4f` | `oklch(61.02% 0.1539 150.59)` | Get up and Go | black, 5.9 to 1 |
| 9 | `#00ad45` | `oklch(65.17% 0.1885 148.02)` | Poison Ivy | black, 7 to 1 |
| 10 | `#00bb38` | `oklch(68.83% 0.2130 145.55)` | Toxic Sludge | black, 8.1 to 1 |
| 11 | `#00c810` | `oklch(72.32% 0.2435 142.82)` | Pressing My Luck | black, 9.3 to 1 |
| 12 | `#48d300` | `oklch(75.98% 0.2420 139.50)` | First of the Month Green | black, 10.5 to 1 |
| 13 | `#76dd00` | `oklch(80.31% 0.2336 134.76)` | King Lizard | black, 12.1 to 1 |
| 14 | `#a0e800` | `oklch(85.10% 0.2250 128.79)` | Scorpion Venom | black, 14 to 1 |
| 15 | `#c5f134` | `oklch(89.67% 0.2051 122.69)` | Pick Your Poison | black, 16 to 1 |
| 16 | `#e0f864` | `oklch(93.34% 0.1727 117.57)` | Mystic Green | black, 17.7 to 1 |
| 17 | `#eefc7d` | `oklch(95.43% 0.1511 114.52)` | Hyper Beam | black, 18.7 to 1 |
| 18 | `#edfb7f` | `oklch(95.29% 0.1494 114.60)` | Hyper Beam | black, 18.7 to 1 |
| 19 | `#dff66a` | `oklch(92.93% 0.1663 117.71)` | Mystic Green | black, 17.5 to 1 |
| 20 | `#c4ee45` | `oklch(89.00% 0.1938 122.87)` | Lime Fizz | black, 15.6 to 1 |
| 21 | `#9ce500` | `oklch(84.15% 0.2234 129.08)` | Quithayran Green | black, 13.6 to 1 |
| 22 | `#70d900` | `oklch(79.07% 0.2322 135.30)` | Radioactive Lilypad | black, 11.6 to 1 |
| 23 | `#39ce00` | `oklch(74.41% 0.2424 140.55)` | Candy Green | black, 10 to 1 |
| 24 | `#00c121` | `oklch(70.28% 0.2309 143.58)` | Waystone Green | black, 8.6 to 1 |
| 25 | `#00b130` | `oklch(66.20% 0.2082 145.01)` | Pikkoro Green | black, 7.3 to 1 |
| 26 | `#00a237` | `oklch(61.95% 0.1862 146.59)` | Poetic Green | black, 6.2 to 1 |
| 27 | `#009142` | `oklch(57.33% 0.1576 150.08)` | Viper Green | black, 5.1 to 1 |
| 28 | `#007e4c` | `oklch(52.11% 0.1236 157.23)` | Picture Book Green | white, 5.1 to 1 |
| 29 | `#006850` | `oklch(45.93% 0.0908 170.13)` | Peacock Green | white, 6.8 to 1 |
| 30 | `#004d4b` | `oklch(38.08% 0.0656 190.56)` | Swamp Mausoleum | white, 9.6 to 1 |
| 31 | `#00323c` | `oklch(29.37% 0.0520 215.38)` | Artist Blue | white, 13.7 to 1 |
| 32 | `#041a29` | `oklch(20.80% 0.0413 240.61)` | Oxford by Night | white, 17.7 to 1 |
| 33 | `#05080f` | `oklch(13.43% 0.0171 262.73)` | Narwhal Grey | white, 20 to 1 |
| 34 | `#020202` | `oklch(8.27% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #020202 0.000% 2.941%, #050b0a 2.941% 5.882%, #0d201a 5.882% 8.824%, #173a2e 8.824% 11.765%, #225740 11.765% 14.706%, #2c724d 14.706% 17.647%, #2f8853 17.647% 20.588%, #219c4f 20.588% 23.529%, #00ad45 23.529% 26.471%, #00bb38 26.471% 29.412%, #00c810 29.412% 32.353%, #48d300 32.353% 35.294%, #76dd00 35.294% 38.235%, #a0e800 38.235% 41.176%, #c5f134 41.176% 44.118%, #e0f864 44.118% 47.059%, #eefc7d 47.059% 50.000%, #edfb7f 50.000% 52.941%, #dff66a 52.941% 55.882%, #c4ee45 55.882% 58.824%, #9ce500 58.824% 61.765%, #70d900 61.765% 64.706%, #39ce00 64.706% 67.647%, #00c121 67.647% 70.588%, #00b130 70.588% 73.529%, #00a237 73.529% 76.471%, #009142 76.471% 79.412%, #007e4c 79.412% 82.353%, #006850 82.353% 85.294%, #004d4b 85.294% 88.235%, #00323c 88.235% 91.176%, #041a29 91.176% 94.118%, #05080f 94.118% 97.059%, #020202 97.059% 100.000%);
background: conic-gradient(from 90deg, oklch(8.66% 0.0000 89.88) 0.000% 2.941%, oklch(14.34% 0.0118 177.51) 2.941% 5.882%, oklch(22.47% 0.0277 172.95) 5.882% 8.824%, oklch(31.89% 0.0469 167.66) 8.824% 11.765%, oklch(41.37% 0.0688 162.26) 11.765% 14.706%, oklch(49.75% 0.0924 157.38) 14.706% 17.647%, oklch(56.05% 0.1187 153.58) 17.647% 20.588%, oklch(61.02% 0.1539 150.59) 20.588% 23.529%, oklch(65.17% 0.1885 148.02) 23.529% 26.471%, oklch(68.83% 0.2130 145.55) 26.471% 29.412%, oklch(72.32% 0.2435 142.82) 29.412% 32.353%, oklch(75.98% 0.2420 139.50) 32.353% 35.294%, oklch(80.31% 0.2336 134.76) 35.294% 38.235%, oklch(85.10% 0.2250 128.79) 38.235% 41.176%, oklch(89.67% 0.2051 122.69) 41.176% 44.118%, oklch(93.34% 0.1727 117.57) 44.118% 47.059%, oklch(95.43% 0.1511 114.52) 47.059% 50.000%, oklch(95.29% 0.1494 114.60) 50.000% 52.941%, oklch(92.93% 0.1663 117.71) 52.941% 55.882%, oklch(89.00% 0.1938 122.87) 55.882% 58.824%, oklch(84.15% 0.2234 129.08) 58.824% 61.765%, oklch(79.07% 0.2322 135.30) 61.765% 64.706%, oklch(74.41% 0.2424 140.55) 64.706% 67.647%, oklch(70.28% 0.2309 143.58) 67.647% 70.588%, oklch(66.20% 0.2082 145.01) 70.588% 73.529%, oklch(61.95% 0.1862 146.59) 73.529% 76.471%, oklch(57.33% 0.1576 150.08) 76.471% 79.412%, oklch(52.11% 0.1236 157.23) 79.412% 82.353%, oklch(45.93% 0.0908 170.13) 82.353% 85.294%, oklch(38.08% 0.0656 190.56) 85.294% 88.235%, oklch(29.37% 0.0520 215.38) 88.235% 91.176%, oklch(20.80% 0.0413 240.61) 91.176% 94.118%, oklch(13.43% 0.0171 262.73) 94.118% 97.059%, oklch(8.27% 0.0000 89.88) 97.059% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.087 | 0 | 180.7 |
| 2 | 0.531 | 0.105 | 155.3 |
| 3 | 0.76 | 0.273 | 139.5 |
| 4 | 0.957 | 0.147 | 114.1 |
| 5 | 0.744 | 0.256 | 140.5 |
| 6 | 0.492 | 0.139 | 162.7 |
| 7 | 0.083 | 0 | 277.9 |

## In these collections

- [Green gradients](https://grabient.com/green-gradients)
- [Black Friday gradients](https://grabient.com/black-friday-gradients)

## Other forms

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