# Berry Orange Sunset Rings

These 3 concentric rings move outward through dark berry, bright orange, and muted berry. The separated colors provide clear roles for backgrounds, headings, borders, icons, and small accents while preserving the collection's visual character. Use them for posters, packaging, editorial layouts, presentation graphics, or interface elements that need a coordinated palette with practical contrast.

- Also called: Analogous maroon and orange radial swatches
- Seed: `kSTj_-27fFrYqum`
- Page: https://grabient.com/kSTj_-27fFrYqum?style=radialSwatches&steps=3&angle=0
- Drawn as: radial swatches, 3 steps, 0 degrees
- Kinds: light center, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#50182f` | `oklch(30.71% 0.0868 357.89)` | Chilli Black Red | white, 13.8 to 1 |
| 2 | `#f18349` | `oklch(72.05% 0.1530 46.50)` | Mustard Crusted Salmon | black, 8 to 1 |
| 3 | `#7f2d4c` | `oklch(42.52% 0.1171 0.00)` | Beaujolais | white, 8.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #50182f 0.000% 33.333%, #f18349 33.333% 66.667%, #7f2d4c 66.667% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(30.71% 0.0868 357.89) 0.000% 33.333%, oklch(72.05% 0.1530 46.50) 33.333% 66.667%, oklch(42.52% 0.1171 0.00) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.307 | 0.087 | 357.9 |
| 2 | 0.72 | 0.153 | 406.5 |
| 3 | 0.425 | 0.117 | 360 |

## In these collections

- [Sunset swatches](https://grabient.com/sunset-swatches)

## Other forms

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