# Neon orange, green and purple radial swatches

Neon orange, green and purple radial swatches with 3 colors: #ff6d03, #3ce75e, #9b2cff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSs5Ag59JL0nlUk`
- Page: https://grabient.com/kSs5Ag59JL0nlUk?style=radialSwatches&steps=3&angle=0
- Drawn as: radial swatches, 3 steps, 0 degrees
- Kinds: vivid, neon, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3 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 | `#ff6d03` | `oklch(70.47% 0.1984 45.70)` | Spooky Tangerine | black, 7.4 to 1 |
| 2 | `#3ce75e` | `oklch(81.50% 0.2260 146.09)` | Toxic Slime | black, 12.7 to 1 |
| 3 | `#9b2cff` | `oklch(57.87% 0.2783 301.44)` | Veronica | white, 5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #ff6d03 0.000% 33.333%, #3ce75e 33.333% 66.667%, #9b2cff 66.667% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(70.47% 0.1984 45.70) 0.000% 33.333%, oklch(81.50% 0.2260 146.09) 33.333% 66.667%, oklch(57.87% 0.2783 301.44) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.705 | 0.198 | 45.7 |
| 2 | 0.815 | 0.226 | 146.1 |
| 3 | 0.579 | 0.278 | 301.4 |

## In these collections

- [Triadic swatches](https://grabient.com/triadic-swatches)
- [Secondary color swatches](https://grabient.com/secondary-color-swatches)

## Other forms

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