# Electric Periwinkle Stripes

The Blue blue palette brings together blue. 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 lightest and darkest tones both fall within the blue color family.

- Also called: Vivid analogous blue and lavender linear swatches
- Seed: `kUasO9uWdAEPVwPSskDg`
- Page: https://grabient.com/kUasO9uWdAEPVwPSskDg?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: vivid, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.8 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 | `#1616db` | `oklch(41.73% 0.2687 266.48)` | Ultramarine | white, 9.6 to 1 |
| 2 | `#1715df` | `oklch(42.18% 0.2729 266.50)` | Ultramarine | white, 9.5 to 1 |
| 3 | `#1813e4` | `oklch(42.79% 0.2793 266.48)` | Burning Ultrablue | white, 9.3 to 1 |
| 4 | `#1a14ea` | `oklch(43.66% 0.2842 266.73)` | Burning Ultrablue | white, 9 to 1 |
| 5 | `#201bee` | `oklch(44.88% 0.2839 267.54)` | Bluebonnet | white, 8.5 to 1 |
| 6 | `#2b27f0` | `oklch(46.51% 0.2774 269.13)` | Delft Blue | white, 7.9 to 1 |
| 7 | `#3733f1` | `oklch(48.47% 0.2668 271.31)` | Royal Vessel | white, 7.1 to 1 |
| 8 | `#4440f1` | `oklch(50.71% 0.2527 273.71)` | Bright Greek | white, 6.4 to 1 |
| 9 | `#514df0` | `oklch(53.15% 0.2356 276.00)` | Sylph of Moonlight | white, 5.7 to 1 |
| 10 | `#5f5bed` | `oklch(56.13% 0.2124 278.31)` | Flickering Sea | white, 4.9 to 1 |
| 11 | `#6f6be8` | `oklch(59.57% 0.1837 280.75)` | If I Could Fly | black, 4.9 to 1 |
| 12 | `#7d78e3` | `oklch(62.76% 0.1565 282.93)` | Hera Blue | black, 5.6 to 1 |
| 13 | `#8781df` | `oklch(64.96% 0.1378 284.45)` | Indigo Bloom | black, 6.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1616db 0.000% 7.692%, #1715df 7.692% 15.385%, #1813e4 15.385% 23.077%, #1a14ea 23.077% 30.769%, #201bee 30.769% 38.462%, #2b27f0 38.462% 46.154%, #3733f1 46.154% 53.846%, #4440f1 53.846% 61.538%, #514df0 61.538% 69.231%, #5f5bed 69.231% 76.923%, #6f6be8 76.923% 84.615%, #7d78e3 84.615% 92.308%, #8781df 92.308% 100.000%);
background: linear-gradient(90deg, oklch(41.73% 0.2687 266.48) 0.000% 7.692%, oklch(42.18% 0.2729 266.50) 7.692% 15.385%, oklch(42.79% 0.2793 266.48) 15.385% 23.077%, oklch(43.66% 0.2842 266.73) 23.077% 30.769%, oklch(44.88% 0.2839 267.54) 30.769% 38.462%, oklch(46.51% 0.2774 269.13) 38.462% 46.154%, oklch(48.47% 0.2668 271.31) 46.154% 53.846%, oklch(50.71% 0.2527 273.71) 53.846% 61.538%, oklch(53.15% 0.2356 276.00) 61.538% 69.231%, oklch(56.13% 0.2124 278.31) 69.231% 76.923%, oklch(59.57% 0.1837 280.75) 76.923% 84.615%, oklch(62.76% 0.1565 282.93) 84.615% 92.308%, oklch(64.96% 0.1378 284.45) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.417 | 0.269 | 266.5 |
| 2 | 0.449 | 0.284 | 267.5 |
| 3 | 0.531 | 0.236 | 276 |
| 4 | 0.65 | 0.138 | 284.4 |

## In these collections

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

## Other forms

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