# Champagne, crimson and near-black street fighter palette

The Champagne, crimson and near-black street fighter palette brings together off-white, gold, red, blue, and black. 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: White, red, blue and black linear swatches
- Seed: `kW9gdB6r2_8dTuA-WrGjIO_4`
- Page: https://grabient.com/kW9gdB6r2_8dTuA-WrGjIO_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 18.8 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 | `#f7f5ed` | `oklch(96.85% 0.0096 92.11)` | Snow Day | black, 19.1 to 1 |
| 2 | `#f2c510` | `oklch(83.86% 0.1695 92.11)` | Moon Yellow | black, 12.7 to 1 |
| 3 | `#da0020` | `oklch(55.91% 0.2270 25.55)` | Untamed Red | white, 5.2 to 1 |
| 4 | `#1844ea` | `oklch(48.82% 0.2494 265.06)` | Scuff Blue | white, 6.8 to 1 |
| 5 | `#020305` | `oklch(9.84% 0.0096 265.06)` | Armour Wash | white, 20.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f7f5ed 0.000% 20.000%, #f2c510 20.000% 40.000%, #da0020 40.000% 60.000%, #1844ea 60.000% 80.000%, #020305 80.000% 100.000%);
background: linear-gradient(90deg, oklch(96.85% 0.0096 92.11) 0.000% 20.000%, oklch(83.86% 0.1695 92.11) 20.000% 40.000%, oklch(55.91% 0.2270 25.55) 40.000% 60.000%, oklch(48.82% 0.2494 265.06) 60.000% 80.000%, oklch(9.84% 0.0096 265.06) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.01 | 92.1 |
| 2 | 0.839 | 0.169 | 92.1 |
| 3 | 0.559 | 0.23 | 25.5 |
| 4 | 0.488 | 0.249 | -94.9 |
| 5 | 0.098 | 0.01 | -94.9 |

## In these collections

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

## Other forms

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