# Near-black, olive and lime cyberpunk palette

The Near-black, olive and lime cyberpunk palette brings together dark gray, dark green, and green. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark gray, and its lightest tone is green.

- Also called: Analogous black, green and yellow linear swatches
- Seed: `kUHwS6HY-wPBjQR3y73g`
- Page: https://grabient.com/kUHwS6HY-wPBjQR3y73g?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: analogous
- Contrast of its darkest and lightest colors: 17.6 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 | `#050608` | `oklch(12.20% 0.0055 261.56)` | Black Metal | white, 20.2 to 1 |
| 2 | `#17210a` | `oklch(23.23% 0.0427 128.41)` | Midnight Pines | white, 16.6 to 1 |
| 3 | `#6cfe00` | `oklch(88.19% 0.2721 137.93)` | Poisoning Green | black, 15.8 to 1 |
| 4 | `#d8ff46` | `oklch(94.09% 0.2036 121.01)` | Tennis Ball | black, 18.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #050608 0.000% 25.000%, #17210a 25.000% 50.000%, #6cfe00 50.000% 75.000%, #d8ff46 75.000% 100.000%);
background: linear-gradient(90deg, oklch(12.20% 0.0055 261.56) 0.000% 25.000%, oklch(23.23% 0.0427 128.41) 25.000% 50.000%, oklch(88.19% 0.2721 137.93) 50.000% 75.000%, oklch(94.09% 0.2036 121.01) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.122 | 0.006 | 261.6 |
| 2 | 0.232 | 0.043 | 128.4 |
| 3 | 0.882 | 0.273 | 137.9 |
| 4 | 0.941 | 0.208 | 121 |

## In these collections

- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)

## Other forms

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