# Periwinkle azure diagonal

Monochrome blue to light blue linear gradient with 48 colors: #546daa, #5571ae, #5776b5, #597dbc, #5b84c5, #5e8dce, #5f95d8, #619de1, #61a5ea, #61abf1, #5fb1f8, #5db4fc, #59b5ff, #55b3ff, #4cafff, #43aafc, #3aa3f9, #309bf4, #2692f0, #1c89eb, #1481e7, #0e79e3, #0c73e0, #0d6ede, #116cde, #176adf, #1c6ae1, #226ae5, #296ce8, #2f6eec, #3570f1, #3c73f5, #4376f8, #4979fb, #4f7dfd, #5580fe, #5b84fd, #6288fc, #698df9, #7192f5, #7997f1, #819cec, #88a0e7, #90a5e2, #97a9de, #9dacd9, #a2afd5, #a6b1d3. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome blue to light blue linear gradient
- Seed: `kWiki9XzI9kZFQVRRcEYRJAQ`
- Page: https://grabient.com/kWiki9XzI9kZFQVRRcEYRJAQ?steps=48&angle=225
- Drawn as: linear gradient, 48 steps, 225 degrees
- Kinds: vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.3 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 | `#546daa` | `oklch(54.33% 0.0992 265.78)` | New Age Blue | white, 5 to 1 |
| 2 | `#5571ae` | `oklch(55.48% 0.1011 264.68)` | Prefect | white, 4.8 to 1 |
| 3 | `#5776b5` | `oklch(57.10% 0.1034 263.16)` | Sapphire Shimmer Blue | black, 4.6 to 1 |
| 4 | `#597dbc` | `oklch(59.08% 0.1060 261.31)` | Blue Iolite | black, 5 to 1 |
| 5 | `#5b84c5` | `oklch(61.32% 0.1090 259.22)` | Havelock Blue | black, 5.5 to 1 |
| 6 | `#5e8dce` | `oklch(63.69% 0.1122 257.00)` | Royal Regatta | black, 6.1 to 1 |
| 7 | `#5f95d8` | `oklch(66.10% 0.1157 254.73)` | Little Boy Blue | black, 6.7 to 1 |
| 8 | `#619de1` | `oklch(68.41% 0.1193 252.52)` | Blue Bay | black, 7.4 to 1 |
| 9 | `#61a5ea` | `oklch(70.53% 0.1231 250.46)` | Cerulean | black, 8 to 1 |
| 10 | `#61abf1` | `oklch(72.34% 0.1270 248.65)` | Blue Jeans | black, 8.6 to 1 |
| 11 | `#5fb1f8` | `oklch(73.73% 0.1309 247.17)` | Tiān Lán Sky | black, 9 to 1 |
| 12 | `#5db4fc` | `oklch(74.58% 0.1349 246.14)` | Tiān Lán Sky | black, 9.3 to 1 |
| 13 | `#59b5ff` | `oklch(74.79% 0.1386 245.62)` | Tiān Lán Sky | black, 9.4 to 1 |
| 14 | `#55b3ff` | `oklch(74.27% 0.1417 245.60)` | Tiān Lán Sky | black, 9.2 to 1 |
| 15 | `#4cafff` | `oklch(73.13% 0.1477 245.98)` | Adamantine Blue | black, 8.9 to 1 |
| 16 | `#43aafc` | `oklch(71.48% 0.1527 246.68)` | Adamantine Blue | black, 8.3 to 1 |
| 17 | `#3aa3f9` | `oklch(69.46% 0.1578 247.66)` | Rockman Blue | black, 7.7 to 1 |
| 18 | `#309bf4` | `oklch(67.19% 0.1631 248.85)` | Fresh Blue of Bel Air | black, 7 to 1 |
| 19 | `#2692f0` | `oklch(64.80% 0.1682 250.18)` | Karimun Blue | black, 6.4 to 1 |
| 20 | `#1c89eb` | `oklch(62.41% 0.1732 251.59)` | Bleu de France | black, 5.8 to 1 |
| 21 | `#1481e7` | `oklch(60.15% 0.1779 253.03)` | Blue Cola | black, 5.3 to 1 |
| 22 | `#0e79e3` | `oklch(58.15% 0.1821 254.43)` | Bright Navy Blue | black, 4.8 to 1 |
| 23 | `#0c73e0` | `oklch(56.54% 0.1859 255.72)` | Enchanting Sapphire | white, 4.6 to 1 |
| 24 | `#0d6ede` | `oklch(55.44% 0.1889 256.85)` | Flickr Blue | white, 4.8 to 1 |
| 25 | `#116cde` | `oklch(54.93% 0.1913 257.78)` | Flickr Blue | white, 4.9 to 1 |
| 26 | `#176adf` | `oklch(54.82% 0.1938 258.69)` | Blue Ruin | white, 5 to 1 |
| 27 | `#1c6ae1` | `oklch(55.02% 0.1964 259.60)` | Blue Ruin | white, 5 to 1 |
| 28 | `#226ae5` | `oklch(55.49% 0.1988 260.51)` | Níu Zǎi Sè Denim | white, 4.9 to 1 |
| 29 | `#296ce8` | `oklch(56.19% 0.2009 261.41)` | Bluetiful | white, 4.7 to 1 |
| 30 | `#2f6eec` | `oklch(57.07% 0.2025 262.29)` | Bluetiful | white, 4.6 to 1 |
| 31 | `#3570f1` | `oklch(58.08% 0.2035 263.14)` | Deep Sky Blue | black, 4.7 to 1 |
| 32 | `#3c73f5` | `oklch(59.17% 0.2037 263.95)` | Hailey Blue | black, 4.9 to 1 |
| 33 | `#4376f8` | `oklch(60.31% 0.2029 264.72)` | Lightish Blue | black, 5.1 to 1 |
| 34 | `#4979fb` | `oklch(61.45% 0.2010 265.44)` | Lightish Blue | black, 5.4 to 1 |
| 35 | `#4f7dfd` | `oklch(62.55% 0.1977 266.11)` | C64 NTSC | black, 5.6 to 1 |
| 36 | `#5580fe` | `oklch(63.55% 0.1930 266.70)` | Flickery C64 | black, 5.9 to 1 |
| 37 | `#5b84fd` | `oklch(64.50% 0.1862 267.22)` | Skinny Jeans | black, 6.1 to 1 |
| 38 | `#6288fc` | `oklch(65.56% 0.1768 267.68)` | Deep Denim | black, 6.4 to 1 |
| 39 | `#698df9` | `oklch(66.72% 0.1652 268.08)` | Punch Out Glove | black, 6.7 to 1 |
| 40 | `#7192f5` | `oklch(67.95% 0.1519 268.43)` | Guilliman Blue | black, 7.1 to 1 |
| 41 | `#7997f1` | `oklch(69.20% 0.1375 268.73)` | Guilliman Blue | black, 7.4 to 1 |
| 42 | `#819cec` | `oklch(70.46% 0.1225 268.99)` | Portage | black, 7.8 to 1 |
| 43 | `#88a0e7` | `oklch(71.70% 0.1075 269.21)` | Blue Cue | black, 8.2 to 1 |
| 44 | `#90a5e2` | `oklch(72.87% 0.0929 269.41)` | Dalmatian Sage | black, 8.6 to 1 |
| 45 | `#97a9de` | `oklch(73.96% 0.0793 269.58)` | Victory Lake | black, 9 to 1 |
| 46 | `#9dacd9` | `oklch(74.92% 0.0672 269.73)` | Aster Flower Blue | black, 9.3 to 1 |
| 47 | `#a2afd5` | `oklch(75.74% 0.0571 269.87)` | Calm Interlude | black, 9.6 to 1 |
| 48 | `#a6b1d3` | `oklch(76.38% 0.0496 270.01)` | Awesome Violet | black, 9.8 to 1 |

## CSS

```css
background: linear-gradient(225deg, #546daa 0.0%, #5571ae 2.1%, #5776b5 4.3%, #597dbc 6.4%, #5b84c5 8.5%, #5e8dce 10.6%, #5f95d8 12.8%, #619de1 14.9%, #61a5ea 17.0%, #61abf1 19.1%, #5fb1f8 21.3%, #5db4fc 23.4%, #59b5ff 25.5%, #55b3ff 27.7%, #4cafff 29.8%, #43aafc 31.9%, #3aa3f9 34.0%, #309bf4 36.2%, #2692f0 38.3%, #1c89eb 40.4%, #1481e7 42.6%, #0e79e3 44.7%, #0c73e0 46.8%, #0d6ede 48.9%, #116cde 51.1%, #176adf 53.2%, #1c6ae1 55.3%, #226ae5 57.4%, #296ce8 59.6%, #2f6eec 61.7%, #3570f1 63.8%, #3c73f5 66.0%, #4376f8 68.1%, #4979fb 70.2%, #4f7dfd 72.3%, #5580fe 74.5%, #5b84fd 76.6%, #6288fc 78.7%, #698df9 80.9%, #7192f5 83.0%, #7997f1 85.1%, #819cec 87.2%, #88a0e7 89.4%, #90a5e2 91.5%, #97a9de 93.6%, #9dacd9 95.7%, #a2afd5 97.9%, #a6b1d3 100.0%);
background: linear-gradient(225deg in oklch, oklch(54.33% 0.0992 265.78) 0.0%, oklch(55.48% 0.1011 264.68) 2.1%, oklch(57.10% 0.1034 263.16) 4.3%, oklch(59.08% 0.1060 261.31) 6.4%, oklch(61.32% 0.1090 259.22) 8.5%, oklch(63.69% 0.1122 257.00) 10.6%, oklch(66.10% 0.1157 254.73) 12.8%, oklch(68.41% 0.1193 252.52) 14.9%, oklch(70.53% 0.1231 250.46) 17.0%, oklch(72.34% 0.1270 248.65) 19.1%, oklch(73.73% 0.1309 247.17) 21.3%, oklch(74.58% 0.1349 246.14) 23.4%, oklch(74.79% 0.1386 245.62) 25.5%, oklch(74.27% 0.1417 245.60) 27.7%, oklch(73.13% 0.1477 245.98) 29.8%, oklch(71.48% 0.1527 246.68) 31.9%, oklch(69.46% 0.1578 247.66) 34.0%, oklch(67.19% 0.1631 248.85) 36.2%, oklch(64.80% 0.1682 250.18) 38.3%, oklch(62.41% 0.1732 251.59) 40.4%, oklch(60.15% 0.1779 253.03) 42.6%, oklch(58.15% 0.1821 254.43) 44.7%, oklch(56.54% 0.1859 255.72) 46.8%, oklch(55.44% 0.1889 256.85) 48.9%, oklch(54.93% 0.1913 257.78) 51.1%, oklch(54.82% 0.1938 258.69) 53.2%, oklch(55.02% 0.1964 259.60) 55.3%, oklch(55.49% 0.1988 260.51) 57.4%, oklch(56.19% 0.2009 261.41) 59.6%, oklch(57.07% 0.2025 262.29) 61.7%, oklch(58.08% 0.2035 263.14) 63.8%, oklch(59.17% 0.2037 263.95) 66.0%, oklch(60.31% 0.2029 264.72) 68.1%, oklch(61.45% 0.2010 265.44) 70.2%, oklch(62.55% 0.1977 266.11) 72.3%, oklch(63.55% 0.1930 266.70) 74.5%, oklch(64.50% 0.1862 267.22) 76.6%, oklch(65.56% 0.1768 267.68) 78.7%, oklch(66.72% 0.1652 268.08) 80.9%, oklch(67.95% 0.1519 268.43) 83.0%, oklch(69.20% 0.1375 268.73) 85.1%, oklch(70.46% 0.1225 268.99) 87.2%, oklch(71.70% 0.1075 269.21) 89.4%, oklch(72.87% 0.0929 269.41) 91.5%, oklch(73.96% 0.0793 269.58) 93.6%, oklch(74.92% 0.0672 269.73) 95.7%, oklch(75.74% 0.0571 269.87) 97.9%, oklch(76.38% 0.0496 270.01) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.543 | 0.099 | 265.8 |
| 2 | 0.748 | 0.138 | 245.7 |
| 3 | 0.551 | 0.19 | 257.3 |
| 4 | 0.638 | 0.192 | 266.8 |
| 5 | 0.764 | 0.05 | 270 |

## In these collections

- [Electric blue gradients](https://grabient.com/electric-blue-gradients)

## Other forms

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