# Near-black and orange street fighter palette

The Near-black and orange street fighter palette brings together dark gray, red, gold, and orange. 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: Black, red, yellow and orange linear swatches
- Seed: `kUIQcURNO_-S9xxRzDug`
- Page: https://grabient.com/kUIQcURNO_-S9xxRzDug?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.3 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 | `#0b0606` | `oklch(12.99% 0.0096 28.13)` | Accursed Black | white, 20.1 to 1 |
| 2 | `#d0000c` | `oklch(53.94% 0.2206 28.14)` | Red Epiphyllum | white, 5.6 to 1 |
| 3 | `#e6b300` | `oklch(79.13% 0.1617 88.35)` | Trumpet Gold | black, 10.8 to 1 |
| 4 | `#d76a00` | `oklch(64.17% 0.1641 52.41)` | Apple II Chocolate | black, 5.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0b0606 0.000% 25.000%, #d0000c 25.000% 50.000%, #e6b300 50.000% 75.000%, #d76a00 75.000% 100.000%);
background: linear-gradient(90deg, oklch(12.99% 0.0096 28.13) 0.000% 25.000%, oklch(53.94% 0.2206 28.14) 25.000% 50.000%, oklch(79.13% 0.1617 88.35) 50.000% 75.000%, oklch(64.17% 0.1641 52.41) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.01 | 28.1 |
| 2 | 0.539 | 0.23 | 28.1 |
| 3 | 0.791 | 0.169 | 88.4 |
| 4 | 0.642 | 0.209 | 52.4 |

## In these collections

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

## Other forms

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