# Near-black, cobalt blue and ochre street fighter

The Near-black, cobalt blue and ochre street fighter brings together dark gray, off-white, blue, red, and gold. 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: Rainbow from black to yellow radial swatches
- Seed: `kWMA7AeIYqz7B1DJys5ZLbHg`
- Page: https://grabient.com/kWMA7AeIYqz7B1DJys5ZLbHg?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: vivid, rainbow
- 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 | `#2358c5` | `oklch(49.21% 0.1805 262.60)` | Cerulean Blue | white, 6.4 to 1 |
| 4 | `#d92e37` | `oklch(57.87% 0.2053 24.13)` | Akuma | white, 4.7 to 1 |
| 5 | `#e2b52c` | `oklch(79.13% 0.1502 88.59)` | Kogane Gold | black, 10.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #10131c 0.000% 20.000%, #f2eee2 20.000% 40.000%, #2358c5 40.000% 60.000%, #d92e37 60.000% 80.000%, #e2b52c 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(18.90% 0.0193 270.00) 0.000% 20.000%, oklch(94.88% 0.0165 91.41) 20.000% 40.000%, oklch(49.21% 0.1805 262.60) 40.000% 60.000%, oklch(57.87% 0.2053 24.13) 60.000% 80.000%, oklch(79.13% 0.1502 88.59) 80.000% 100.000%);
```

## Keyframes

5 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.492 | 0.181 | 262.6 |
| 4 | 0.579 | 0.205 | 384.1 |
| 5 | 0.791 | 0.15 | 448.6 |

## In these collections

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

## Other forms

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