# Near-black, ochre and crimson street fighter palette

The Near-black, ochre and crimson street fighter palette brings together black, green, gold, off-white, and red. 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 black, and its lightest tone is off-white.

- Also called: Black, yellow, white and red angular swatches
- Seed: `kWHAdnQki_-c9uT6A7wxlO8I`
- Page: https://grabient.com/kWHAdnQki_-c9uT6A7wxlO8I?style=angularSwatches&steps=5&angle=180
- Drawn as: angular swatches, 5 steps, 180 degrees
- Kinds: light center, vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 18.1 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 | `#030503` | `oklch(11.02% 0.0096 144.84)` | Armour Wash | white, 20.4 to 1 |
| 2 | `#007f1e` | `oklch(51.97% 0.1643 144.83)` | Azure Radiance | white, 5.1 to 1 |
| 3 | `#eeb900` | `oklch(81.10% 0.1658 87.77)` | Pattypan | black, 11.5 to 1 |
| 4 | `#f7f0ec` | `oklch(96.06% 0.0096 56.08)` | Soft Breeze | black, 18.6 to 1 |
| 5 | `#d60025` | `oklch(55.13% 0.2232 24.39)` | Cardinal Rage | white, 5.4 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #030503 0.000% 20.000%, #007f1e 20.000% 40.000%, #eeb900 40.000% 60.000%, #f7f0ec 60.000% 80.000%, #d60025 80.000% 100.000%);
background: conic-gradient(from 180deg, oklch(11.02% 0.0096 144.84) 0.000% 20.000%, oklch(51.97% 0.1643 144.83) 20.000% 40.000%, oklch(81.10% 0.1658 87.77) 40.000% 60.000%, oklch(96.06% 0.0096 56.08) 60.000% 80.000%, oklch(55.13% 0.2232 24.39) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.11 | 0.01 | 144.8 |
| 2 | 0.52 | 0.2 | 144.8 |
| 3 | 0.811 | 0.169 | 87.8 |
| 4 | 0.961 | 0.01 | 56.1 |
| 5 | 0.551 | 0.23 | 24.4 |

## In these collections

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

## Other forms

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