# Emerald, teal and near-black street fighter palette

The Emerald, teal and near-black street fighter palette brings together green, blue, gold, 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 gold.

- Also called: Rainbow from green to black linear swatches
- Seed: `kUiltrvsHNGS2q0YByrA`
- Page: https://grabient.com/kUiltrvsHNGS2q0YByrA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, vivid, rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 9.5 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 | `#288448` | `oklch(54.33% 0.1254 151.17)` | Vine | white, 4.7 to 1 |
| 2 | `#2158c5` | `oklch(49.21% 0.1805 262.13)` | Cerulean Blue | white, 6.4 to 1 |
| 3 | `#e3b42c` | `oklch(79.13% 0.1502 87.77)` | Kogane Gold | black, 10.8 to 1 |
| 4 | `#10131c` | `oklch(18.90% 0.0193 269.18)` | Midnight Edition | white, 18.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #288448 0.000% 25.000%, #2158c5 25.000% 50.000%, #e3b42c 50.000% 75.000%, #10131c 75.000% 100.000%);
background: linear-gradient(90deg, oklch(54.33% 0.1254 151.17) 0.000% 25.000%, oklch(49.21% 0.1805 262.13) 25.000% 50.000%, oklch(79.13% 0.1502 87.77) 50.000% 75.000%, oklch(18.90% 0.0193 269.18) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.543 | 0.125 | 151.2 |
| 2 | 0.492 | 0.181 | 262.1 |
| 3 | 0.791 | 0.15 | 87.8 |
| 4 | 0.189 | 0.019 | -90.8 |

## In these collections

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

## Other forms

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