# Near-black, coral and emerald street fighter palette

The Near-black, coral and emerald street fighter palette brings together dark gray, off-white, red, and green. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Black, white, red and green angular swatches
- Seed: `kUMA7AeIYq0nKt_FLc7g`
- Page: https://grabient.com/kUMA7AeIYq0nKt_FLc7g?style=angularSwatches&steps=4&angle=45
- Drawn as: angular swatches, 4 steps, 45 degrees
- Kinds: light center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 15.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 | `#10131c` | `oklch(18.90% 0.0193 270.00)` | Midnight Edition | white, 18.5 to 1 |
| 2 | `#f2eee2` | `oklch(94.88% 0.0165 91.41)` | Cream White | black, 18 to 1 |
| 3 | `#d92e39` | `oklch(57.87% 0.2053 23.78)` | Safflower Red | white, 4.7 to 1 |
| 4 | `#2a8347` | `oklch(54.33% 0.1254 150.59)` | Vine | white, 4.7 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #10131c 0.000% 25.000%, #f2eee2 25.000% 50.000%, #d92e39 50.000% 75.000%, #2a8347 75.000% 100.000%);
background: conic-gradient(from 45deg, oklch(18.90% 0.0193 270.00) 0.000% 25.000%, oklch(94.88% 0.0165 91.41) 25.000% 50.000%, oklch(57.87% 0.2053 23.78) 50.000% 75.000%, oklch(54.33% 0.1254 150.59) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.189 | 0.019 | 270 |
| 2 | 0.949 | 0.017 | 91.4 |
| 3 | 0.579 | 0.205 | 23.8 |
| 4 | 0.543 | 0.125 | 150.6 |

## In these collections

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

## Other forms

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