# Racetrack red orange and black rings

The Racetrack red orange and black rings brings together dark gray, red, orange, and off-white. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Black, red, orange and white radial swatches
- Seed: `kULQBASNS41vFQn6AESg`
- Page: https://grabient.com/kULQBASNS41vFQn6AESg?style=radialSwatches&steps=4&angle=0
- Drawn as: radial swatches, 4 steps, 0 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.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 | `#111111` | `oklch(17.72% 0.0000 89.88)` | Dreamless Sleep | white, 18.8 to 1 |
| 2 | `#df0c00` | `oklch(57.09% 0.2307 29.74)` | Midwinter Fire | white, 4.9 to 1 |
| 3 | `#fd7a00` | `oklch(72.05% 0.1881 50.88)` | Carrot Curl | black, 7.9 to 1 |
| 4 | `#f2f2f2` | `oklch(96.06% 0.0000 89.88)` | Zappy Zebra | black, 18.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #111111 0.000% 25.000%, #df0c00 25.000% 50.000%, #fd7a00 50.000% 75.000%, #f2f2f2 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(17.72% 0.0000 89.88) 0.000% 25.000%, oklch(57.09% 0.2307 29.74) 25.000% 50.000%, oklch(72.05% 0.1881 50.88) 50.000% 75.000%, oklch(96.06% 0.0000 89.88) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.177 | 0 | 90 |
| 2 | 0.571 | 0.233 | 29.8 |
| 3 | 0.72 | 0.19 | 50.9 |
| 4 | 0.961 | 0 | 91.1 |

## In these collections

- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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