# Near-black, indigo and ochre street fighter palette

The Near-black, indigo and ochre street fighter palette brings together dark gray, orange, blue, off-white, 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: Black, orange, blue and yellow linear swatches
- Seed: `kWIQclUtA_7varr7A7Xab21w`
- Page: https://grabient.com/kWIQclUtA_7varr7A7Xab21w?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: vivid
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 18.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 | `#0a0605` | `oklch(12.99% 0.0096 52.03)` | Accursed Black | white, 20.1 to 1 |
| 2 | `#db6b00` | `oklch(64.96% 0.1670 52.01)` | Apple II Chocolate | black, 6.1 to 1 |
| 3 | `#1c3be3` | `oklch(46.85% 0.2494 266.20)` | Palatinate Blue | white, 7.5 to 1 |
| 4 | `#eef7f5` | `oklch(96.85% 0.0096 180.60)` | Aijiro White | black, 19.2 to 1 |
| 5 | `#eac509` | `oklch(83.07% 0.1695 95.01)` | Abra Goldenrod | black, 12.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0a0605 0.000% 20.000%, #db6b00 20.000% 40.000%, #1c3be3 40.000% 60.000%, #eef7f5 60.000% 80.000%, #eac509 80.000% 100.000%);
background: linear-gradient(90deg, oklch(12.99% 0.0096 52.03) 0.000% 20.000%, oklch(64.96% 0.1670 52.01) 20.000% 40.000%, oklch(46.85% 0.2494 266.20) 40.000% 60.000%, oklch(96.85% 0.0096 180.60) 60.000% 80.000%, oklch(83.07% 0.1695 95.01) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.01 | 52 |
| 2 | 0.65 | 0.22 | 52 |
| 3 | 0.469 | 0.249 | -93.8 |
| 4 | 0.969 | 0.01 | -179.4 |
| 5 | 0.831 | 0.169 | -265 |

## In these collections

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

## Other forms

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