# Color Palette: Powder blue and violet

The "Color Palette: Powder blue and violet" palette brings together off-white, dark blue, purple, gold, and teal. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits presentation backgrounds and section dividers. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Muted rainbow from white to teal angular swatches
- Seed: `kW-Qe8mZY_8i9xBgs1FzavKw`
- Page: https://grabient.com/kW-Qe8mZY_8i9xBgs1FzavKw?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: dark center, rainbow
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 17.1 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 | `#f5f9ff` | `oklch(98.03% 0.0092 265.04)` | Ghost White | black, 19.8 to 1 |
| 2 | `#081431` | `oklch(20.08% 0.0606 265.08)` | Squid’s Ink | white, 18.1 to 1 |
| 3 | `#885acb` | `oklch(57.09% 0.1695 299.95)` | Fuchsia Blue | white, 4.7 to 1 |
| 4 | `#d6ab31` | `oklch(75.98% 0.1406 87.90)` | Brassy | black, 9.7 to 1 |
| 5 | `#009886` | `oklch(61.03% 0.1108 179.83)` | Plumage | black, 5.8 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #f5f9ff 0.000% 20.000%, #081431 20.000% 40.000%, #885acb 40.000% 60.000%, #d6ab31 60.000% 80.000%, #009886 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(98.03% 0.0092 265.04) 0.000% 20.000%, oklch(20.08% 0.0606 265.08) 20.000% 40.000%, oklch(57.09% 0.1695 299.95) 40.000% 60.000%, oklch(75.98% 0.1406 87.90) 60.000% 80.000%, oklch(61.03% 0.1108 179.83) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.01 | 265.1 |
| 2 | 0.201 | 0.061 | 265.1 |
| 3 | 0.571 | 0.169 | 300 |
| 4 | 0.76 | 0.141 | 447.9 |
| 5 | 0.61 | 0.12 | 539.8 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)
- [Presentation swatches](https://grabient.com/presentation-swatches)

## Other forms

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