# Black, red, yellow and green linear gradient

Black, red, yellow and green linear gradient with 32 colors: #000000, #010000, #090002, #1d0007, #360012, #54001d, #750026, #98002d, #ba002f, #dc0027, #f71410, #ff4819, #ff6d32, #ff8846, #ff9e57, #ffb167, #ffc175, #ffcf80, #ffdb87, #ffe586, #ffef6f, #fbf91b, #ecff5c, #e0ff97, #d2ffa2, #c0ffa3, #a9ffa2, #89ffa1, #64fea4, #4afbac, #2ff7b3, #04f5b9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUAAAAUNtDnjKSPtwEcA`
- Page: https://grabient.com/kUAAAAUNtDnjKSPtwEcA?steps=32&angle=20
- Drawn as: linear gradient, 32 steps, 20 degrees
- Kinds: light center, vivid, light, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 19 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 | `#000000` | `oklch(0.00% 0.0000 0.00)` | Black | white, 21 to 1 |
| 2 | `#010000` | `oklch(3.79% 0.0153 2.06)` | Binary Black | white, 20.9 to 1 |
| 3 | `#090002` | `oklch(8.88% 0.0357 4.40)` | Pupil | white, 20.7 to 1 |
| 4 | `#1d0007` | `oklch(14.82% 0.0595 5.89)` | Belladonna | white, 19.8 to 1 |
| 5 | `#360012` | `oklch(21.44% 0.0859 7.75)` | Ilvaite Black | white, 17.9 to 1 |
| 6 | `#54001d` | `oklch(28.54% 0.1141 10.20)` | Fig Balsamic | white, 15 to 1 |
| 7 | `#750026` | `oklch(35.84% 0.1432 13.07)` | Evil Forces | white, 11.7 to 1 |
| 8 | `#98002d` | `oklch(43.08% 0.1723 16.35)` | Lifeline | white, 8.8 to 1 |
| 9 | `#ba002f` | `oklch(49.99% 0.2008 20.07)` | Red Dead Redemption | white, 6.6 to 1 |
| 10 | `#dc0027` | `oklch(56.32% 0.2279 24.26)` | Untamed Red | white, 5.1 to 1 |
| 11 | `#f71410` | `oklch(61.79% 0.2471 28.96)` | Apple Cherry | black, 5 to 1 |
| 12 | `#ff4819` | `oklch(66.39% 0.2252 34.30)` | Flare Gun | black, 6.2 to 1 |
| 13 | `#ff6d32` | `oklch(70.71% 0.1915 40.51)` | Orange Burst | black, 7.4 to 1 |
| 14 | `#ff8846` | `oklch(74.77% 0.1648 47.45)` | Orange Bell Pepper | black, 8.8 to 1 |
| 15 | `#ff9e57` | `oklch(78.55% 0.1441 54.94)` | Clarified Orange | black, 10.2 to 1 |
| 16 | `#ffb167` | `oklch(82.02% 0.1286 62.81)` | Mango Salsa | black, 11.7 to 1 |
| 17 | `#ffc175` | `oklch(85.17% 0.1178 70.91)` | Bronze Blush | black, 13.1 to 1 |
| 18 | `#ffcf80` | `oklch(87.97% 0.1116 79.06)` | Egg Yolk | black, 14.4 to 1 |
| 19 | `#ffdb87` | `oklch(90.39% 0.1110 87.11)` | Broiled Flounder | black, 15.7 to 1 |
| 20 | `#ffe586` | `oklch(92.43% 0.1195 94.87)` | Lemon Drizzle | black, 16.8 to 1 |
| 21 | `#ffef6f` | `oklch(94.04% 0.1486 102.19)` | Yellow Sand | black, 17.8 to 1 |
| 22 | `#fbf91b` | `oklch(95.20% 0.2027 108.94)` | Delayed Yellow | black, 18.6 to 1 |
| 23 | `#ecff5c` | `oklch(95.66% 0.1828 115.71)` | Unripe Banana | black, 19 to 1 |
| 24 | `#e0ff97` | `oklch(95.47% 0.1343 122.59)` | Metal Spark | black, 18.9 to 1 |
| 25 | `#d2ffa2` | `oklch(94.75% 0.1273 129.46)` | Lime Mist | black, 18.5 to 1 |
| 26 | `#c0ffa3` | `oklch(93.64% 0.1348 136.19)` | Apatite Crystal Green | black, 18 to 1 |
| 27 | `#a9ffa2` | `oklch(92.28% 0.1493 142.66)` | Lens Flare Green | black, 17.5 to 1 |
| 28 | `#89ffa1` | `oklch(90.78% 0.1675 148.76)` | Baby Green | black, 16.8 to 1 |
| 29 | `#64fea4` | `oklch(89.30% 0.1818 154.36)` | Hanuman Green | black, 16.2 to 1 |
| 30 | `#4afbac` | `oklch(87.96% 0.1797 159.34)` | Hanuman Green | black, 15.6 to 1 |
| 31 | `#2ff7b3` | `oklch(86.89% 0.1779 163.58)` | Greenish Turquoise | black, 15.1 to 1 |
| 32 | `#04f5b9` | `oklch(86.22% 0.1764 166.97)` | Bright Teal | black, 14.8 to 1 |

## CSS

```css
background: linear-gradient(20deg, #000000 0.0%, #010000 3.2%, #090002 6.5%, #1d0007 9.7%, #360012 12.9%, #54001d 16.1%, #750026 19.4%, #98002d 22.6%, #ba002f 25.8%, #dc0027 29.0%, #f71410 32.3%, #ff4819 35.5%, #ff6d32 38.7%, #ff8846 41.9%, #ff9e57 45.2%, #ffb167 48.4%, #ffc175 51.6%, #ffcf80 54.8%, #ffdb87 58.1%, #ffe586 61.3%, #ffef6f 64.5%, #fbf91b 67.7%, #ecff5c 71.0%, #e0ff97 74.2%, #d2ffa2 77.4%, #c0ffa3 80.6%, #a9ffa2 83.9%, #89ffa1 87.1%, #64fea4 90.3%, #4afbac 93.5%, #2ff7b3 96.8%, #04f5b9 100.0%);
background: linear-gradient(20deg in oklch, oklch(0.00% 0.0000 0.00) 0.0%, oklch(3.79% 0.0153 2.06) 3.2%, oklch(8.88% 0.0357 4.40) 6.5%, oklch(14.82% 0.0595 5.89) 9.7%, oklch(21.44% 0.0859 7.75) 12.9%, oklch(28.54% 0.1141 10.20) 16.1%, oklch(35.84% 0.1432 13.07) 19.4%, oklch(43.08% 0.1723 16.35) 22.6%, oklch(49.99% 0.2008 20.07) 25.8%, oklch(56.32% 0.2279 24.26) 29.0%, oklch(61.79% 0.2471 28.96) 32.3%, oklch(66.39% 0.2252 34.30) 35.5%, oklch(70.71% 0.1915 40.51) 38.7%, oklch(74.77% 0.1648 47.45) 41.9%, oklch(78.55% 0.1441 54.94) 45.2%, oklch(82.02% 0.1286 62.81) 48.4%, oklch(85.17% 0.1178 70.91) 51.6%, oklch(87.97% 0.1116 79.06) 54.8%, oklch(90.39% 0.1110 87.11) 58.1%, oklch(92.43% 0.1195 94.87) 61.3%, oklch(94.04% 0.1486 102.19) 64.5%, oklch(95.20% 0.2027 108.94) 67.7%, oklch(95.66% 0.1828 115.71) 71.0%, oklch(95.47% 0.1343 122.59) 74.2%, oklch(94.75% 0.1273 129.46) 77.4%, oklch(93.64% 0.1348 136.19) 80.6%, oklch(92.28% 0.1493 142.66) 83.9%, oklch(90.78% 0.1675 148.76) 87.1%, oklch(89.30% 0.1818 154.36) 90.3%, oklch(87.96% 0.1797 159.34) 93.5%, oklch(86.89% 0.1779 163.58) 96.8%, oklch(86.22% 0.1764 166.97) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0 | 0 | 0 |
| 2 | 0.634 | 0.251 | 30.6 |
| 3 | 0.949 | 0.204 | 106.7 |
| 4 | 0.862 | 0.176 | 167 |

## In these collections

- [Glitchy glam](https://grabient.com/glitchy-glam)

## Other forms

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