# Near-Black Gray Magenta Passage

These 4 diagonal bands move through near-black gray, pale yellow-green, bright cyan blue, and magenta. The separated colors give backgrounds, type, borders, and accents distinct assignments. Use it for digital fashion graphics, music artwork, event posters, or bold interface backgrounds with a glossy electronic mood.

- Also called: Black, lime green, light blue and pink linear swatches
- Seed: `kUHwBAdVZEWY1SvU4c9A`
- Page: https://grabient.com/kUHwBAdVZEWY1SvU4c9A?style=linearSwatches&steps=4&angle=200
- Drawn as: linear swatches, 4 steps, 200 degrees
- Kinds: light center, vivid
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 16.8 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 | `#060606` | `oklch(12.20% 0.0000 89.88)` | Black Metal | white, 20.2 to 1 |
| 2 | `#bcff28` | `oklch(92.12% 0.2289 126.98)` | Lemon Lime | black, 17.4 to 1 |
| 3 | `#07d3ff` | `oklch(80.31% 0.1455 219.97)` | Neon Blue | black, 11.8 to 1 |
| 4 | `#ff1baa` | `oklch(66.53% 0.2682 349.96)` | Spicy Pink | black, 5.9 to 1 |

## CSS

```css
background: linear-gradient(200deg, #060606 0.000% 25.000%, #bcff28 25.000% 50.000%, #07d3ff 50.000% 75.000%, #ff1baa 75.000% 100.000%);
background: linear-gradient(200deg, oklch(12.20% 0.0000 89.88) 0.000% 25.000%, oklch(92.12% 0.2289 126.98) 25.000% 50.000%, oklch(80.31% 0.1455 219.97) 50.000% 75.000%, oklch(66.53% 0.2682 349.96) 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 | 90 |
| 2 | 0.921 | 0.237 | 127 |
| 3 | 0.803 | 0.146 | 220 |
| 4 | 0.665 | 0.269 | 350 |

## In these collections

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

## Other forms

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