# Blue violet taupe cream bands

Blue, purple and gray linear swatches with 13 colors: #244772, #2b3d6f, #323577, #3b3298, #4631a9, #5137a8, #60418e, #6d4e74, #815e6c, #90757c, #a28f9a, #c1aaa5, #c8cab2. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, purple and gray linear swatches
- Seed: `kcZD21riTCTO_QK3vUDOxvDMcPRbYCb2aYvOo`
- Page: https://grabient.com/kcZD21riTCTO_QK3vUDOxvDMcPRbYCb2aYvOo?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#244772` | `oklch(39.37% 0.0841 255.23)` | Pretty Twilight Night | white, 9.4 to 1 |
| 2 | `#2b3d6f` | `oklch(37.16% 0.0889 266.90)` | Mystification | white, 10.5 to 1 |
| 3 | `#323577` | `oklch(36.52% 0.1104 277.15)` | Ballpoint Indigo | white, 10.9 to 1 |
| 4 | `#3b3298` | `oklch(39.38% 0.1596 280.32)` | Bluebell | white, 10 to 1 |
| 5 | `#4631a9` | `oklch(41.70% 0.1808 283.30)` | Purple Cabbage | white, 9.2 to 1 |
| 6 | `#5137a8` | `oklch(43.46% 0.1719 287.73)` | Royalty | white, 8.5 to 1 |
| 7 | `#60418e` | `oklch(44.69% 0.1238 300.21)` | Daisy Bush | white, 7.9 to 1 |
| 8 | `#6d4e74` | `oklch(47.00% 0.0708 320.06)` | Exotic Purple | white, 7 to 1 |
| 9 | `#815e6c` | `oklch(52.22% 0.0492 353.24)` | Chicha Morada | white, 5.6 to 1 |
| 10 | `#90757c` | `oklch(58.97% 0.0357 1.55)` | Socialite | black, 5 to 1 |
| 11 | `#a28f9a` | `oklch(66.99% 0.0273 340.82)` | Nirvana | black, 6.9 to 1 |
| 12 | `#c1aaa5` | `oklch(75.70% 0.0273 33.07)` | Dusky | black, 9.5 to 1 |
| 13 | `#c8cab2` | `oklch(83.07% 0.0317 109.75)` | Whispering Pine | black, 12.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #244772 0.000% 7.692%, #2b3d6f 7.692% 15.385%, #323577 15.385% 23.077%, #3b3298 23.077% 30.769%, #4631a9 30.769% 38.462%, #5137a8 38.462% 46.154%, #60418e 46.154% 53.846%, #6d4e74 53.846% 61.538%, #815e6c 61.538% 69.231%, #90757c 69.231% 76.923%, #a28f9a 76.923% 84.615%, #c1aaa5 84.615% 92.308%, #c8cab2 92.308% 100.000%);
background: linear-gradient(90deg, oklch(39.37% 0.0841 255.23) 0.000% 7.692%, oklch(37.16% 0.0889 266.90) 7.692% 15.385%, oklch(36.52% 0.1104 277.15) 15.385% 23.077%, oklch(39.38% 0.1596 280.32) 23.077% 30.769%, oklch(41.70% 0.1808 283.30) 30.769% 38.462%, oklch(43.46% 0.1719 287.73) 38.462% 46.154%, oklch(44.69% 0.1238 300.21) 46.154% 53.846%, oklch(47.00% 0.0708 320.06) 53.846% 61.538%, oklch(52.22% 0.0492 353.24) 61.538% 69.231%, oklch(58.97% 0.0357 1.55) 69.231% 76.923%, oklch(66.99% 0.0273 340.82) 76.923% 84.615%, oklch(75.70% 0.0273 33.07) 84.615% 92.308%, oklch(83.07% 0.0317 109.75) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.394 | 0.084 | 255.2 |
| 2 | 0.362 | 0.101 | 275.3 |
| 3 | 0.406 | 0.174 | 281.7 |
| 4 | 0.437 | 0.168 | 289.1 |
| 5 | 0.465 | 0.076 | 316.5 |
| 6 | 0.559 | 0.041 | 365.1 |
| 7 | 0.693 | 0.026 | 345.1 |
| 8 | 0.831 | 0.032 | 469.8 |

## In these collections

- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)

## Other forms

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