# Blue and violet color palette

The Blue and violet color palette brings together blue and purple. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is purple.

- Also called: Monochrome blue angular swatches
- Seed: `kSf4O-v8vBMHGwW`
- Page: https://grabient.com/kSf4O-v8vBMHGwW?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: even lightness, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#3856c8` | `oklch(50.00% 0.1805 267.89)` | Free Speech Blue | white, 6.2 to 1 |
| 2 | `#4250cf` | `oklch(49.90% 0.1952 272.38)` | Gorgonzola Blue | white, 6.4 to 1 |
| 3 | `#5048d5` | `oklch(50.00% 0.2081 278.46)` | Iris | white, 6.5 to 1 |
| 4 | `#6146d1` | `oklch(50.79% 0.2029 285.46)` | Waiporoporo Purple | white, 6.3 to 1 |
| 5 | `#6d47cc` | `oklch(51.57% 0.1943 291.14)` | Waiporoporo Purple | white, 6.1 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #3856c8 0.000% 20.000%, #4250cf 20.000% 40.000%, #5048d5 40.000% 60.000%, #6146d1 60.000% 80.000%, #6d47cc 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(50.00% 0.1805 267.89) 0.000% 20.000%, oklch(49.90% 0.1952 272.38) 20.000% 40.000%, oklch(50.00% 0.2081 278.46) 40.000% 60.000%, oklch(50.79% 0.2029 285.46) 60.000% 80.000%, oklch(51.57% 0.1943 291.14) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.5 | 0.181 | 267.9 |
| 2 | 0.5 | 0.208 | 278.5 |
| 3 | 0.516 | 0.194 | 291.1 |

## In these collections

- [Violet swatches](https://grabient.com/violet-swatches)
- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)
- [Indigo swatches](https://grabient.com/indigo-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

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