# Violet charcoal interface rings

Muted violet surrounds charcoal, soft gray-lilac, and a clean white center in a composed concentric palette. The contrast feels calm, technical, and suitable for alternating dark and light surfaces. Use it for analytics screens, account pages, component libraries, and searches for violet UI palettes, dark mode neutrals, or interface swatches.

- Also called: White, gray, dark purple and blue radial swatches
- Seed: `kW-ATb9IU_c6MQAqDL_SVU9Y`
- Page: https://grabient.com/kW-ATb9IU_c6MQAqDL_SVU9Y?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: dark center, neutral
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.5 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 | `#f8f6fa` | `oklch(97.64% 0.0055 308.67)` | Walkie Chalkie | black, 19.5 to 1 |
| 2 | `#e6e2eb` | `oklch(91.73% 0.0138 304.44)` | Soft Iris | black, 16.3 to 1 |
| 3 | `#8a8196` | `oklch(61.81% 0.0331 305.50)` | Violet Vibes | black, 5.6 to 1 |
| 4 | `#393144` | `oklch(33.07% 0.0344 304.44)` | Oil Rush | white, 12.3 to 1 |
| 5 | `#6f55fb` | `oklch(57.48% 0.2343 283.31)` | Venetian Nights | white, 4.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f8f6fa 0.000% 20.000%, #e6e2eb 20.000% 40.000%, #8a8196 40.000% 60.000%, #393144 60.000% 80.000%, #6f55fb 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(97.64% 0.0055 308.67) 0.000% 20.000%, oklch(91.73% 0.0138 304.44) 20.000% 40.000%, oklch(61.81% 0.0331 305.50) 40.000% 60.000%, oklch(33.07% 0.0344 304.44) 60.000% 80.000%, oklch(57.48% 0.2343 283.31) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.976 | 0.006 | 308.7 |
| 2 | 0.917 | 0.014 | 304.4 |
| 3 | 0.618 | 0.033 | 305.5 |
| 4 | 0.331 | 0.034 | 304.4 |
| 5 | 0.575 | 0.234 | 283.3 |

## In these collections

- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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