# Neon stage sweep

The Neon stage sweep brings together dark gray, gray, purple, and orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark gray, and its lightest tone is orange.

- Also called: Black, blue, purple and salmon linear gradient
- Seed: `kUNA-xL4jAtRMxRfu80g`
- Page: https://grabient.com/kUNA-xL4jAtRMxRfu80g?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light
- Hues: wide
- Contrast of its darkest and lightest colors: 7.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 | `#101820` | `oklch(20.47% 0.0207 248.91)` | River Styx | white, 17.9 to 1 |
| 2 | `#121a22` | `oklch(21.39% 0.0200 249.11)` | River Styx | white, 17.5 to 1 |
| 3 | `#151d24` | `oklch(22.51% 0.0182 249.18)` | Coarse Wool | white, 17 to 1 |
| 4 | `#191f26` | `oklch(23.80% 0.0157 249.18)` | Satin Deep Black | white, 16.5 to 1 |
| 5 | `#1d2328` | `oklch(25.25% 0.0131 249.20)` | Noble Black | white, 15.8 to 1 |
| 6 | `#22272b` | `oklch(26.86% 0.0107 249.33)` | Black Beauty | white, 15.1 to 1 |
| 7 | `#272b2f` | `oklch(28.60% 0.0091 249.65)` | Blue Charcoal | white, 14.2 to 1 |
| 8 | `#2c2f33` | `oklch(30.47% 0.0088 250.24)` | Stretch Limo | white, 13.4 to 1 |
| 9 | `#303439` | `oklch(32.45% 0.0103 251.19)` | Ebony Clay | white, 12.4 to 1 |
| 10 | `#343a41` | `oklch(34.52% 0.0140 252.57)` | Do Not Disturb | white, 11.5 to 1 |
| 11 | `#38404a` | `oklch(36.67% 0.0205 254.48)` | Inkblot | white, 10.5 to 1 |
| 12 | `#3a4656` | `oklch(38.96% 0.0308 256.86)` | Surf’n’dive | white, 9.6 to 1 |
| 13 | `#3d4d65` | `oklch(41.58% 0.0457 259.39)` | Calico Dress | white, 8.6 to 1 |
| 14 | `#405478` | `oklch(44.47% 0.0645 262.10)` | Star Spangled | white, 7.6 to 1 |
| 15 | `#445b8d` | `oklch(47.53% 0.0858 265.10)` | Anchor Point | white, 6.7 to 1 |
| 16 | `#4b61a3` | `oklch(50.68% 0.1086 268.46)` | Starstruck | white, 5.9 to 1 |
| 17 | `#5566ba` | `oklch(53.84% 0.1318 272.27)` | Amparo Blue | white, 5.2 to 1 |
| 18 | `#626ad0` | `oklch(56.92% 0.1541 276.62)` | Borage Blue | white, 4.6 to 1 |
| 19 | `#726de3` | `oklch(59.83% 0.1745 281.60)` | If I Could Fly | black, 5 to 1 |
| 20 | `#846ef3` | `oklch(62.49% 0.1919 287.29)` | Bainganī | black, 5.4 to 1 |
| 21 | `#986dfd` | `oklch(64.82% 0.2050 293.77)` | Forgotten Purple | black, 5.9 to 1 |
| 22 | `#ad6cff` | `oklch(66.74% 0.2119 301.21)` | Purple Hedonist | black, 6.3 to 1 |
| 23 | `#c269fa` | `oklch(68.34% 0.2159 310.48)` | Easter Purple | black, 6.6 to 1 |
| 24 | `#d866ec` | `oklch(69.70% 0.2152 321.43)` | Clematis Magenta | black, 7 to 1 |
| 25 | `#eb64d7` | `oklch(70.84% 0.2114 333.57)` | Death of a Star | black, 7.3 to 1 |
| 26 | `#fa64be` | `oklch(71.79% 0.2053 346.41)` | Kisses | black, 7.5 to 1 |
| 27 | `#ff6ca3` | `oklch(72.59% 0.1864 359.45)` | French Pink | black, 7.9 to 1 |
| 28 | `#ff768c` | `oklch(73.25% 0.1679 12.22)` | Carnation | black, 8.2 to 1 |
| 29 | `#ff7d77` | `oklch(73.82% 0.1597 24.20)` | Salmon Sashimi | black, 8.4 to 1 |
| 30 | `#ff8364` | `oklch(74.31% 0.1583 34.92)` | Pink Fire | black, 8.6 to 1 |
| 31 | `#ff8751` | `oklch(74.76% 0.1611 43.88)` | Tiger of Mysore | black, 8.8 to 1 |
| 32 | `#fe8c41` | `oklch(75.20% 0.1640 50.59)` | Orangish | black, 9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #101820 0.0%, #121a22 3.2%, #151d24 6.5%, #191f26 9.7%, #1d2328 12.9%, #22272b 16.1%, #272b2f 19.4%, #2c2f33 22.6%, #303439 25.8%, #343a41 29.0%, #38404a 32.3%, #3a4656 35.5%, #3d4d65 38.7%, #405478 41.9%, #445b8d 45.2%, #4b61a3 48.4%, #5566ba 51.6%, #626ad0 54.8%, #726de3 58.1%, #846ef3 61.3%, #986dfd 64.5%, #ad6cff 67.7%, #c269fa 71.0%, #d866ec 74.2%, #eb64d7 77.4%, #fa64be 80.6%, #ff6ca3 83.9%, #ff768c 87.1%, #ff7d77 90.3%, #ff8364 93.5%, #ff8751 96.8%, #fe8c41 100.0%);
background: linear-gradient(90deg in oklch, oklch(20.47% 0.0207 248.91) 0.0%, oklch(21.39% 0.0200 249.11) 3.2%, oklch(22.51% 0.0182 249.18) 6.5%, oklch(23.80% 0.0157 249.18) 9.7%, oklch(25.25% 0.0131 249.20) 12.9%, oklch(26.86% 0.0107 249.33) 16.1%, oklch(28.60% 0.0091 249.65) 19.4%, oklch(30.47% 0.0088 250.24) 22.6%, oklch(32.45% 0.0103 251.19) 25.8%, oklch(34.52% 0.0140 252.57) 29.0%, oklch(36.67% 0.0205 254.48) 32.3%, oklch(38.96% 0.0308 256.86) 35.5%, oklch(41.58% 0.0457 259.39) 38.7%, oklch(44.47% 0.0645 262.10) 41.9%, oklch(47.53% 0.0858 265.10) 45.2%, oklch(50.68% 0.1086 268.46) 48.4%, oklch(53.84% 0.1318 272.27) 51.6%, oklch(56.92% 0.1541 276.62) 54.8%, oklch(59.83% 0.1745 281.60) 58.1%, oklch(62.49% 0.1919 287.29) 61.3%, oklch(64.82% 0.2050 293.77) 64.5%, oklch(66.74% 0.2119 301.21) 67.7%, oklch(68.34% 0.2159 310.48) 71.0%, oklch(69.70% 0.2152 321.43) 74.2%, oklch(70.84% 0.2114 333.57) 77.4%, oklch(71.79% 0.2053 346.41) 80.6%, oklch(72.59% 0.1864 359.45) 83.9%, oklch(73.25% 0.1679 12.22) 87.1%, oklch(73.82% 0.1597 24.20) 90.3%, oklch(74.31% 0.1583 34.92) 93.5%, oklch(74.76% 0.1611 43.88) 96.8%, oklch(75.20% 0.1640 50.59) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.021 | 248.9 |
| 2 | 0.374 | 0.023 | 255.2 |
| 3 | 0.661 | 0.211 | 298.6 |
| 4 | 0.752 | 0.164 | 410.6 |

## In these collections

- [Funhaus](https://grabient.com/funhaus)

## Other forms

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