# Smoky Amethyst Rings

The Navy and violet color palette brings together blue and purple. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is blue, and its lightest tone is purple.

- Also called: Monochrome purple radial swatches
- Seed: `kQVFLNvifAo`
- Page: https://grabient.com/kQVFLNvifAo?style=radialSwatches&steps=5&angle=135
- Drawn as: radial swatches, 5 steps, 135 degrees
- Kinds: cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.9 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 | `#36276b` | `oklch(33.07% 0.1130 288.98)` | Dark Dreams | white, 12.6 to 1 |
| 2 | `#3f2f73` | `oklch(36.27% 0.1122 290.27)` | Her Highness | white, 11.2 to 1 |
| 3 | `#4d3c80` | `oklch(40.94% 0.1109 292.15)` | Prism Violet | white, 9.2 to 1 |
| 4 | `#5b498d` | `oklch(45.62% 0.1097 294.04)` | Purple Corallite | white, 7.5 to 1 |
| 5 | `#655196` | `oklch(48.82% 0.1089 295.32)` | Purple Opulence | white, 6.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #36276b 0.000% 20.000%, #3f2f73 20.000% 40.000%, #4d3c80 40.000% 60.000%, #5b498d 60.000% 80.000%, #655196 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(33.07% 0.1130 288.98) 0.000% 20.000%, oklch(36.27% 0.1122 290.27) 20.000% 40.000%, oklch(40.94% 0.1109 292.15) 40.000% 60.000%, oklch(45.62% 0.1097 294.04) 60.000% 80.000%, oklch(48.82% 0.1089 295.32) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.331 | 0.113 | 289 |
| 2 | 0.488 | 0.109 | 295.3 |

## In these collections

- [Calm swatches](https://grabient.com/calm-swatches)
- [Indigo swatches](https://grabient.com/indigo-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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