# Emerald, rose and dusty blue street fighter

The Emerald, rose and dusty blue street fighter brings together green, blue, orange, and dark gray. 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: Rainbow from green to black linear swatches
- Seed: `kUoHFmRb7OGC4U0bCDCg`
- Page: https://grabient.com/kUoHFmRb7OGC4U0bCDCg?style=linearSwatches&steps=4&angle=180
- Drawn as: linear swatches, 4 steps, 180 degrees
- Kinds: light center, vivid, rainbow
- Hues: triadic
- Contrast of its darkest and lightest colors: 7.9 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 | `#45a045` | `oklch(62.99% 0.1557 143.44)` | Oregano Green | black, 6.3 to 1 |
| 2 | `#376ad4` | `oklch(54.72% 0.1722 262.85)` | Enchanting Sapphire | white, 5 to 1 |
| 3 | `#f19b2d` | `oklch(75.98% 0.1543 66.65)` | Nuclear Mango | black, 9.4 to 1 |
| 4 | `#1a1722` | `oklch(21.26% 0.0220 297.72)` | Violet Void | white, 17.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #45a045 0.000% 25.000%, #376ad4 25.000% 50.000%, #f19b2d 50.000% 75.000%, #1a1722 75.000% 100.000%);
background: linear-gradient(180deg, oklch(62.99% 0.1557 143.44) 0.000% 25.000%, oklch(54.72% 0.1722 262.85) 25.000% 50.000%, oklch(75.98% 0.1543 66.65) 50.000% 75.000%, oklch(21.26% 0.0220 297.72) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.63 | 0.156 | 143.4 |
| 2 | 0.547 | 0.172 | 262.9 |
| 3 | 0.76 | 0.154 | 426.6 |
| 4 | 0.213 | 0.022 | 297.7 |

## In these collections

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

## Other forms

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