# Charcoal Red Gold Rings

These 4 concentric rings move outward through deep charcoal, bright red-orange, gold, and pale cream. The separated colors give backgrounds, type, borders, and accents distinct assignments. Use it for bold Funhaus graphics, playful branding, geometric editorial layouts, or energetic interface backgrounds with clear color roles.

- Also called: Black, red, yellow and off-white radial swatches
- Seed: `kUNABAU1S5XHDR18DD9A`
- Page: https://grabient.com/kUNABAU1S5XHDR18DD9A?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.7 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 | `#171717` | `oklch(20.47% 0.0000 89.88)` | Cynical Black | white, 17.9 to 1 |
| 2 | `#fe3e06` | `oklch(65.35% 0.2329 33.99)` | Fire Opal | black, 5.9 to 1 |
| 3 | `#ffda1c` | `oklch(89.37% 0.1798 96.34)` | Simpsons Yellow | black, 15.3 to 1 |
| 4 | `#fff7e0` | `oklch(97.64% 0.0313 91.08)` | Sushi Rice | black, 19.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #171717 0.000% 25.000%, #fe3e06 25.000% 50.000%, #ffda1c 50.000% 75.000%, #fff7e0 75.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(20.47% 0.0000 89.88) 0.000% 25.000%, oklch(65.35% 0.2329 33.99) 25.000% 50.000%, oklch(89.37% 0.1798 96.34) 50.000% 75.000%, oklch(97.64% 0.0313 91.08) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0 | 90 |
| 2 | 0.654 | 0.233 | 34 |
| 3 | 0.894 | 0.185 | 96.3 |
| 4 | 0.976 | 0.033 | 91.1 |

## In these collections

- [Funhaus](https://grabient.com/funhaus)

## Other forms

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