# Sky Blue into Iris Shadow

Monochrome blue, light blue and navy linear gradient with 48 colors: #299bd5, #339ed6, #3ea2d7, #4ba8d9, #58aedb, #66b4dd, #74bbe0, #82c2e2, #90c9e5, #9dcfe7, #a9d5ea, #b4daec, #bcdeed, #c3e1ef, #c8e3ef, #c9e3f0, #c7e1ef, #c1deee, #b9d9ed, #aed2eb, #a2cae9, #95c1e8, #89b6e6, #7daae3, #739ee0, #6a90dd, #6483d8, #5f75d3, #5b68cd, #585cc7, #5651c1, #5348bb, #5040b4, #4c3bae, #4736a7, #4233a1, #3d309a, #382f93, #322d8c, #2d2d85, #282c7e, #232c77, #1f2c71, #1c2b6b, #192b65, #162a60, #14295c, #122858. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome blue, light blue and navy linear gradient
- Seed: `kUpl6o8gw_Dw_xilIT2g`
- Page: https://grabient.com/kUpl6o8gw_Dw_xilIT2g?steps=48&angle=135
- Drawn as: linear gradient, 48 steps, 135 degrees
- Kinds: light center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.6 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 | `#299bd5` | `oklch(65.35% 0.1295 236.95)` | Blue Burst | black, 6.7 to 1 |
| 2 | `#339ed6` | `oklch(66.36% 0.1256 236.57)` | Blue Damselfly | black, 6.9 to 1 |
| 3 | `#3ea2d7` | `oklch(67.76% 0.1202 235.94)` | Dayflower | black, 7.3 to 1 |
| 4 | `#4ba8d9` | `oklch(69.49% 0.1136 235.11)` | Blue Astro | black, 7.8 to 1 |
| 5 | `#58aedb` | `oklch(71.48% 0.1059 234.13)` | Cousteau | black, 8.4 to 1 |
| 6 | `#66b4dd` | `oklch(73.66% 0.0976 233.05)` | Milky Waves | black, 9.1 to 1 |
| 7 | `#74bbe0` | `oklch(75.95% 0.0888 231.93)` | Costa Rica Blue | black, 9.9 to 1 |
| 8 | `#82c2e2` | `oklch(78.29% 0.0799 230.83)` | Horizon Haze | black, 10.7 to 1 |
| 9 | `#90c9e5` | `oklch(80.60% 0.0710 229.79)` | Gossamer Threads | black, 11.6 to 1 |
| 10 | `#9dcfe7` | `oklch(82.81% 0.0624 228.86)` | Light Whimsy | black, 12.5 to 1 |
| 11 | `#a9d5ea` | `oklch(84.85% 0.0544 228.10)` | Monaco | black, 13.3 to 1 |
| 12 | `#b4daec` | `oklch(86.65% 0.0473 227.57)` | Minified Blue | black, 14.1 to 1 |
| 13 | `#bcdeed` | `oklch(88.13% 0.0413 227.31)` | Ice Rink | black, 14.8 to 1 |
| 14 | `#c3e1ef` | `oklch(89.24% 0.0367 227.37)` | Cotton Clouds | black, 15.3 to 1 |
| 15 | `#c8e3ef` | `oklch(89.89% 0.0337 227.82)` | Niagara Falls | black, 15.6 to 1 |
| 16 | `#c9e3f0` | `oklch(90.01% 0.0326 228.70)` | Niagara Falls | black, 15.6 to 1 |
| 17 | `#c7e1ef` | `oklch(89.54% 0.0337 230.08)` | Pale Frost | black, 15.4 to 1 |
| 18 | `#c1deee` | `oklch(88.45% 0.0374 232.15)` | Tropical Pool | black, 14.9 to 1 |
| 19 | `#b9d9ed` | `oklch(86.81% 0.0435 234.85)` | First Rain | black, 14.1 to 1 |
| 20 | `#aed2eb` | `oklch(84.69% 0.0516 238.11)` | Vive le Vent | black, 13.2 to 1 |
| 21 | `#a2cae9` | `oklch(82.17% 0.0613 241.80)` | Island Light | black, 12.2 to 1 |
| 22 | `#95c1e8` | `oklch(79.31% 0.0724 245.83)` | Salvia Blue | black, 11 to 1 |
| 23 | `#89b6e6` | `oklch(76.19% 0.0843 250.09)` | Adrift on the Nile | black, 9.9 to 1 |
| 24 | `#7daae3` | `oklch(72.87% 0.0969 254.49)` | Jordy Blue | black, 8.7 to 1 |
| 25 | `#739ee0` | `oklch(69.43% 0.1096 258.91)` | Ice Blue | black, 7.6 to 1 |
| 26 | `#6a90dd` | `oklch(65.94% 0.1222 263.26)` | Little Boy Blue | black, 6.6 to 1 |
| 27 | `#6483d8` | `oklch(62.47% 0.1343 267.43)` | Blue Jay | black, 5.7 to 1 |
| 28 | `#5f75d3` | `oklch(59.09% 0.1455 271.31)` | Indigo Light | black, 4.9 to 1 |
| 29 | `#5b68cd` | `oklch(55.87% 0.1555 274.82)` | Borage Blue | white, 4.8 to 1 |
| 30 | `#585cc7` | `oklch(52.89% 0.1638 277.83)` | Circumorbital Ring | white, 5.5 to 1 |
| 31 | `#5651c1` | `oklch(50.22% 0.1702 280.26)` | Iris | white, 6.3 to 1 |
| 32 | `#5348bb` | `oklch(47.91% 0.1742 281.99)` | Swiss Plum | white, 7 to 1 |
| 33 | `#5040b4` | `oklch(45.98% 0.1758 282.97)` | Megadrive Screen | white, 7.6 to 1 |
| 34 | `#4c3bae` | `oklch(44.19% 0.1752 283.33)` | Megadrive Screen | white, 8.2 to 1 |
| 35 | `#4736a7` | `oklch(42.51% 0.1729 283.14)` | Purple Cabbage | white, 8.8 to 1 |
| 36 | `#4233a1` | `oklch(40.95% 0.1691 282.48)` | Purple Cabbage | white, 9.4 to 1 |
| 37 | `#3d309a` | `oklch(39.49% 0.1639 281.41)` | Bluebell | white, 10 to 1 |
| 38 | `#382f93` | `oklch(38.14% 0.1577 280.01)` | Perfect Dark | white, 10.5 to 1 |
| 39 | `#322d8c` | `oklch(36.88% 0.1507 278.36)` | Cosmic Cobalt | white, 11 to 1 |
| 40 | `#2d2d85` | `oklch(35.72% 0.1431 276.51)` | Cosmic Cobalt | white, 11.5 to 1 |
| 41 | `#282c7e` | `oklch(34.64% 0.1352 274.54)` | St. Patrick’s Blue | white, 11.9 to 1 |
| 42 | `#232c77` | `oklch(33.64% 0.1272 272.52)` | St. Patrick’s Blue | white, 12.3 to 1 |
| 43 | `#1f2c71` | `oklch(32.73% 0.1194 270.53)` | Blue Rose | white, 12.7 to 1 |
| 44 | `#1c2b6b` | `oklch(31.88% 0.1119 268.63)` | Mythical Night | white, 13 to 1 |
| 45 | `#192b65` | `oklch(31.11% 0.1051 266.89)` | Schiava Blue | white, 13.3 to 1 |
| 46 | `#162a60` | `oklch(30.39% 0.0992 265.39)` | Schiava Blue | white, 13.6 to 1 |
| 47 | `#14295c` | `oklch(29.74% 0.0944 264.19)` | Schiava Blue | white, 13.9 to 1 |
| 48 | `#122858` | `oklch(29.13% 0.0909 263.37)` | Fibonacci Blue | white, 14.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #299bd5 0.0%, #339ed6 2.1%, #3ea2d7 4.3%, #4ba8d9 6.4%, #58aedb 8.5%, #66b4dd 10.6%, #74bbe0 12.8%, #82c2e2 14.9%, #90c9e5 17.0%, #9dcfe7 19.1%, #a9d5ea 21.3%, #b4daec 23.4%, #bcdeed 25.5%, #c3e1ef 27.7%, #c8e3ef 29.8%, #c9e3f0 31.9%, #c7e1ef 34.0%, #c1deee 36.2%, #b9d9ed 38.3%, #aed2eb 40.4%, #a2cae9 42.6%, #95c1e8 44.7%, #89b6e6 46.8%, #7daae3 48.9%, #739ee0 51.1%, #6a90dd 53.2%, #6483d8 55.3%, #5f75d3 57.4%, #5b68cd 59.6%, #585cc7 61.7%, #5651c1 63.8%, #5348bb 66.0%, #5040b4 68.1%, #4c3bae 70.2%, #4736a7 72.3%, #4233a1 74.5%, #3d309a 76.6%, #382f93 78.7%, #322d8c 80.9%, #2d2d85 83.0%, #282c7e 85.1%, #232c77 87.2%, #1f2c71 89.4%, #1c2b6b 91.5%, #192b65 93.6%, #162a60 95.7%, #14295c 97.9%, #122858 100.0%);
background: linear-gradient(135deg in oklch, oklch(65.35% 0.1295 236.95) 0.0%, oklch(66.36% 0.1256 236.57) 2.1%, oklch(67.76% 0.1202 235.94) 4.3%, oklch(69.49% 0.1136 235.11) 6.4%, oklch(71.48% 0.1059 234.13) 8.5%, oklch(73.66% 0.0976 233.05) 10.6%, oklch(75.95% 0.0888 231.93) 12.8%, oklch(78.29% 0.0799 230.83) 14.9%, oklch(80.60% 0.0710 229.79) 17.0%, oklch(82.81% 0.0624 228.86) 19.1%, oklch(84.85% 0.0544 228.10) 21.3%, oklch(86.65% 0.0473 227.57) 23.4%, oklch(88.13% 0.0413 227.31) 25.5%, oklch(89.24% 0.0367 227.37) 27.7%, oklch(89.89% 0.0337 227.82) 29.8%, oklch(90.01% 0.0326 228.70) 31.9%, oklch(89.54% 0.0337 230.08) 34.0%, oklch(88.45% 0.0374 232.15) 36.2%, oklch(86.81% 0.0435 234.85) 38.3%, oklch(84.69% 0.0516 238.11) 40.4%, oklch(82.17% 0.0613 241.80) 42.6%, oklch(79.31% 0.0724 245.83) 44.7%, oklch(76.19% 0.0843 250.09) 46.8%, oklch(72.87% 0.0969 254.49) 48.9%, oklch(69.43% 0.1096 258.91) 51.1%, oklch(65.94% 0.1222 263.26) 53.2%, oklch(62.47% 0.1343 267.43) 55.3%, oklch(59.09% 0.1455 271.31) 57.4%, oklch(55.87% 0.1555 274.82) 59.6%, oklch(52.89% 0.1638 277.83) 61.7%, oklch(50.22% 0.1702 280.26) 63.8%, oklch(47.91% 0.1742 281.99) 66.0%, oklch(45.98% 0.1758 282.97) 68.1%, oklch(44.19% 0.1752 283.33) 70.2%, oklch(42.51% 0.1729 283.14) 72.3%, oklch(40.95% 0.1691 282.48) 74.5%, oklch(39.49% 0.1639 281.41) 76.6%, oklch(38.14% 0.1577 280.01) 78.7%, oklch(36.88% 0.1507 278.36) 80.9%, oklch(35.72% 0.1431 276.51) 83.0%, oklch(34.64% 0.1352 274.54) 85.1%, oklch(33.64% 0.1272 272.52) 87.2%, oklch(32.73% 0.1194 270.53) 89.4%, oklch(31.88% 0.1119 268.63) 91.5%, oklch(31.11% 0.1051 266.89) 93.6%, oklch(30.39% 0.0992 265.39) 95.7%, oklch(29.74% 0.0944 264.19) 97.9%, oklch(29.13% 0.0909 263.37) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.654 | 0.13 | 237 |
| 2 | 0.898 | 0.033 | 229.6 |
| 3 | 0.472 | 0.175 | 282.4 |
| 4 | 0.291 | 0.091 | 263.4 |

## In these collections

- [Cool blue](https://grabient.com/cool-blue)

## Other forms

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