# Periwinkle cyan diagonal

Vivid analogous blue, teal and navy linear gradient with 32 colors: #0378f3, #0081de, #0087ca, #008dba, #0091ad, #0095a3, #009a9c, #009e98, #1da398, #2ea99f, #36b1ab, #3bbbbb, #40c4cd, #46cce0, #4fd1f0, #5ad2fa, #64cefe, #6fc7fd, #79bcf7, #7fafec, #82a1de, #8293cf, #7d86bf, #7679b0, #6c6da2, #5e5f94, #4d5086, #3a4178, #28346a, #17275e, #071d53, #00154b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Vivid analogous blue, teal and navy linear gradient
- Seed: `kWlpW20ae3ucrxLKnkZnKa9g`
- Page: https://grabient.com/kWlpW20ae3ucrxLKnkZnKa9g?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 9.9 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 | `#0378f3` | `oklch(59.06% 0.2053 256.64)` | Blue Darknut | black, 4.9 to 1 |
| 2 | `#0081de` | `oklch(59.38% 0.1693 250.27)` | Electron Blue | black, 5.1 to 1 |
| 3 | `#0087ca` | `oklch(59.72% 0.1389 240.90)` | Water Blue | black, 5.3 to 1 |
| 4 | `#008dba` | `oklch(60.12% 0.1194 229.68)` | Hawaiian Surf | black, 5.4 to 1 |
| 5 | `#0091ad` | `oklch(60.63% 0.1088 217.78)` | Kelp’thar Forest Blue | black, 5.6 to 1 |
| 6 | `#0095a3` | `oklch(61.28% 0.1049 206.37)` | Tile Blue | black, 5.8 to 1 |
| 7 | `#009a9c` | `oklch(62.12% 0.1058 196.59)` | Riviera Paradise | black, 6 to 1 |
| 8 | `#009e98` | `oklch(63.19% 0.1093 189.60)` | Caribbean Turquoise | black, 6.3 to 1 |
| 9 | `#1da398` | `oklch(64.56% 0.1076 186.52)` | Ceramic Blue Turquoise | black, 6.7 to 1 |
| 10 | `#2ea99f` | `oklch(66.66% 0.1051 186.98)` | Tropical Hideaway | black, 7.2 to 1 |
| 11 | `#36b1ab` | `oklch(69.40% 0.1056 190.08)` | Island Moment | black, 8 to 1 |
| 12 | `#3bbbbb` | `oklch(72.45% 0.1083 195.21)` | Montego Bay | black, 9 to 1 |
| 13 | `#40c4cd` | `oklch(75.47% 0.1122 201.77)` | Sea Serpent | black, 10 to 1 |
| 14 | `#46cce0` | `oklch(78.14% 0.1161 209.13)` | Watercourse | black, 10.9 to 1 |
| 15 | `#4fd1f0` | `oklch(80.13% 0.1192 216.69)` | Libra Blue Morpho | black, 11.6 to 1 |
| 16 | `#5ad2fa` | `oklch(81.10% 0.1203 223.83)` | Libra Blue Morpho | black, 12 to 1 |
| 17 | `#64cefe` | `oklch(80.79% 0.1187 230.33)` | Skyan | black, 11.8 to 1 |
| 18 | `#6fc7fd` | `oklch(79.44% 0.1148 237.89)` | Maya Blue | black, 11.2 to 1 |
| 19 | `#79bcf7` | `oklch(77.26% 0.1093 246.33)` | Broken Blue | black, 10.3 to 1 |
| 20 | `#7fafec` | `oklch(74.41% 0.1030 255.06)` | Fly Away | black, 9.2 to 1 |
| 21 | `#82a1de` | `oklch(71.06% 0.0965 263.51)` | Blue Cue | black, 8.1 to 1 |
| 22 | `#8293cf` | `oklch(67.36% 0.0905 271.09)` | Mystic Iris | black, 7 to 1 |
| 23 | `#7d86bf` | `oklch(63.49% 0.0858 277.23)` | Deep Periwinkle | black, 6 to 1 |
| 24 | `#7679b0` | `oklch(59.61% 0.0830 281.36)` | Ontario Violet | black, 5.1 to 1 |
| 25 | `#6c6da2` | `oklch(55.55% 0.0826 282.94)` | Kimberlite | white, 4.8 to 1 |
| 26 | `#5e5f94` | `oklch(50.70% 0.0843 282.15)` | Wizard’s Potion | white, 5.9 to 1 |
| 27 | `#4d5086` | `oklch(45.36% 0.0875 279.60)` | Twilight | white, 7.4 to 1 |
| 28 | `#3a4178` | `oklch(39.83% 0.0915 275.91)` | Little Blue Heron | white, 9.4 to 1 |
| 29 | `#28346a` | `oklch(34.46% 0.0960 271.68)` | Passionate Blue | white, 11.7 to 1 |
| 30 | `#17275e` | `oklch(29.56% 0.1002 267.53)` | Schiava Blue | white, 14.1 to 1 |
| 31 | `#071d53` | `oklch(25.44% 0.1038 264.08)` | Subnautical | white, 16 to 1 |
| 32 | `#00154b` | `oklch(22.46% 0.1049 262.13)` | Kantor Blue | white, 17.3 to 1 |

## CSS

```css
background: linear-gradient(225deg, #0378f3 0.0%, #0081de 3.2%, #0087ca 6.5%, #008dba 9.7%, #0091ad 12.9%, #0095a3 16.1%, #009a9c 19.4%, #009e98 22.6%, #1da398 25.8%, #2ea99f 29.0%, #36b1ab 32.3%, #3bbbbb 35.5%, #40c4cd 38.7%, #46cce0 41.9%, #4fd1f0 45.2%, #5ad2fa 48.4%, #64cefe 51.6%, #6fc7fd 54.8%, #79bcf7 58.1%, #7fafec 61.3%, #82a1de 64.5%, #8293cf 67.7%, #7d86bf 71.0%, #7679b0 74.2%, #6c6da2 77.4%, #5e5f94 80.6%, #4d5086 83.9%, #3a4178 87.1%, #28346a 90.3%, #17275e 93.5%, #071d53 96.8%, #00154b 100.0%);
background: linear-gradient(225deg in oklch, oklch(59.06% 0.2053 256.64) 0.0%, oklch(59.38% 0.1693 250.27) 3.2%, oklch(59.72% 0.1389 240.90) 6.5%, oklch(60.12% 0.1194 229.68) 9.7%, oklch(60.63% 0.1088 217.78) 12.9%, oklch(61.28% 0.1049 206.37) 16.1%, oklch(62.12% 0.1058 196.59) 19.4%, oklch(63.19% 0.1093 189.60) 22.6%, oklch(64.56% 0.1076 186.52) 25.8%, oklch(66.66% 0.1051 186.98) 29.0%, oklch(69.40% 0.1056 190.08) 32.3%, oklch(72.45% 0.1083 195.21) 35.5%, oklch(75.47% 0.1122 201.77) 38.7%, oklch(78.14% 0.1161 209.13) 41.9%, oklch(80.13% 0.1192 216.69) 45.2%, oklch(81.10% 0.1203 223.83) 48.4%, oklch(80.79% 0.1187 230.33) 51.6%, oklch(79.44% 0.1148 237.89) 54.8%, oklch(77.26% 0.1093 246.33) 58.1%, oklch(74.41% 0.1030 255.06) 61.3%, oklch(71.06% 0.0965 263.51) 64.5%, oklch(67.36% 0.0905 271.09) 67.7%, oklch(63.49% 0.0858 277.23) 71.0%, oklch(59.61% 0.0830 281.36) 74.2%, oklch(55.55% 0.0826 282.94) 77.4%, oklch(50.70% 0.0843 282.15) 80.6%, oklch(45.36% 0.0875 279.60) 83.9%, oklch(39.83% 0.0915 275.91) 87.1%, oklch(34.46% 0.0960 271.68) 90.3%, oklch(29.56% 0.1002 267.53) 93.5%, oklch(25.44% 0.1038 264.08) 96.8%, oklch(22.46% 0.1049 262.13) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.591 | 0.205 | 256.6 |
| 2 | 0.642 | 0.109 | 186.9 |
| 3 | 0.811 | 0.12 | 227.1 |
| 4 | 0.587 | 0.083 | 282 |
| 5 | 0.224 | 0.106 | 261.9 |

## In these collections

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

## Other forms

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