# Orange green arcade rings

White, green, orange and red radial swatches with 6 colors: #f8f0ec, #017222, #d76a04, #2b8347, #e36b05, #d92e39. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: White, green, orange and red radial swatches
- Seed: `kY9AclPTVLFG7tNFLcuVD80EnKvM`
- Page: https://grabient.com/kY9AclPTVLFG7tNFLcuVD80EnKvM?style=radialSwatches&steps=6&angle=0
- Drawn as: radial swatches, 6 steps, 0 degrees
- Kinds: dark center, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 5.4 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 | `#f8f0ec` | `oklch(96.06% 0.0096 52.03)` | Soft Breeze | black, 18.6 to 1 |
| 2 | `#017222` | `oklch(48.03% 0.1461 146.08)` | Clear Green | white, 6.1 to 1 |
| 3 | `#d76a04` | `oklch(64.17% 0.1640 52.03)` | Apple II Chocolate | black, 5.9 to 1 |
| 4 | `#2b8347` | `oklch(54.33% 0.1254 150.31)` | Vine | white, 4.7 to 1 |
| 5 | `#e36b05` | `oklch(66.14% 0.1736 49.92)` | Accent Orange | black, 6.3 to 1 |
| 6 | `#d92e39` | `oklch(57.87% 0.2053 23.50)` | Safflower Red | white, 4.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f8f0ec 0.000% 16.667%, #017222 16.667% 33.333%, #d76a04 33.333% 50.000%, #2b8347 50.000% 66.667%, #e36b05 66.667% 83.333%, #d92e39 83.333% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(96.06% 0.0096 52.03) 0.000% 16.667%, oklch(48.03% 0.1461 146.08) 16.667% 33.333%, oklch(64.17% 0.1640 52.03) 33.333% 50.000%, oklch(54.33% 0.1254 150.31) 50.000% 66.667%, oklch(66.14% 0.1736 49.92) 66.667% 83.333%, oklch(57.87% 0.2053 23.50) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.01 | 52 |
| 2 | 0.48 | 0.146 | 146.1 |
| 3 | 0.642 | 0.164 | 52 |
| 4 | 0.543 | 0.125 | 150.3 |
| 5 | 0.661 | 0.174 | 49.9 |
| 6 | 0.579 | 0.205 | 23.5 |

## In these collections

- [Street Fighter swatches](https://grabient.com/street-fighter-swatches)

## Other forms

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