# Blue color palette

The Blue color palette brings together pale teal, light blue, and blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is blue, and its lightest tone is pale teal.

- Also called: Monochrome light blue to blue linear gradient
- Seed: `kU9hKa8BtBF-1QXNw8Fg`
- Page: https://grabient.com/kU9hKa8BtBF-1QXNw8Fg?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light to dark, vivid, light, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.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 | `#e4f9ff` | `oklch(96.85% 0.0232 217.23)` | Clear Skies | black, 19.2 to 1 |
| 2 | `#e0f8ff` | `oklch(96.37% 0.0265 217.77)` | Glacial Day | black, 19 to 1 |
| 3 | `#dcf7ff` | `oklch(95.78% 0.0304 218.43)` | Glacial Day | black, 18.7 to 1 |
| 4 | `#d6f5ff` | `oklch(95.10% 0.0349 219.21)` | Glacial Day | black, 18.3 to 1 |
| 5 | `#d0f3ff` | `oklch(94.33% 0.0394 220.11)` | Water | black, 17.9 to 1 |
| 6 | `#caf1ff` | `oklch(93.48% 0.0443 221.06)` | Heaven’s Gate | black, 17.5 to 1 |
| 7 | `#c3effe` | `oklch(92.57% 0.0495 222.08)` | Heaven’s Gate | black, 17 to 1 |
| 8 | `#bcecfe` | `oklch(91.61% 0.0550 223.14)` | Ice Effect | black, 16.5 to 1 |
| 9 | `#b5e9fe` | `oklch(90.61% 0.0607 224.23)` | Breaking the Ice | black, 16.1 to 1 |
| 10 | `#aee7fe` | `oklch(89.58% 0.0666 225.33)` | Fresh Air | black, 15.6 to 1 |
| 11 | `#a6e4fe` | `oklch(88.54% 0.0725 226.42)` | Ganon Blue | black, 15.1 to 1 |
| 12 | `#9ee1fe` | `oklch(87.48% 0.0785 227.51)` | Ganon Blue | black, 14.6 to 1 |
| 13 | `#96deff` | `oklch(86.35% 0.0851 228.64)` | Columbia Blue | black, 14.1 to 1 |
| 14 | `#8ddaff` | `oklch(85.17% 0.0919 229.82)` | Tranquil Pool | black, 13.6 to 1 |
| 15 | `#84d6ff` | `oklch(83.95% 0.0984 231.03)` | Kul Sharif Blue | black, 13 to 1 |
| 16 | `#7bd2ff` | `oklch(82.68% 0.1049 232.28)` | Sky | black, 12.5 to 1 |
| 17 | `#72ceff` | `oklch(81.39% 0.1116 233.55)` | Bubbly Barracuda | black, 12 to 1 |
| 18 | `#69caff` | `oklch(80.07% 0.1184 234.82)` | Skyan | black, 11.4 to 1 |
| 19 | `#60c6ff` | `oklch(78.74% 0.1251 236.10)` | Blue Mana | black, 10.9 to 1 |
| 20 | `#56c1ff` | `oklch(77.41% 0.1319 237.37)` | Hello Summer | black, 10.4 to 1 |
| 21 | `#4cbcff` | `oklch(76.08% 0.1386 238.63)` | Glitter Lake | black, 9.9 to 1 |
| 22 | `#42b8ff` | `oklch(74.75% 0.1454 239.87)` | Glitter Lake | black, 9.5 to 1 |
| 23 | `#37b3ff` | `oklch(73.32% 0.1526 241.18)` | Adamantine Blue | black, 9 to 1 |
| 24 | `#2dadfe` | `oklch(71.80% 0.1580 242.57)` | Fantasy Console Sky | black, 8.5 to 1 |
| 25 | `#24a7fc` | `oklch(70.21% 0.1627 244.00)` | Xed | black, 8 to 1 |
| 26 | `#1ba1fa` | `oklch(68.61% 0.1671 245.42)` | Rockman Blue | black, 7.5 to 1 |
| 27 | `#129bf7` | `oklch(67.04% 0.1712 246.82)` | Fresh Blue of Bel Air | black, 7 to 1 |
| 28 | `#0995f5` | `oklch(65.53% 0.1749 248.15)` | Karimun Blue | black, 6.6 to 1 |
| 29 | `#0190f3` | `oklch(64.14% 0.1783 249.38)` | Karimun Blue | black, 6.2 to 1 |
| 30 | `#008bf0` | `oklch(62.89% 0.1804 250.49)` | Bleu de France | black, 5.9 to 1 |
| 31 | `#0087ee` | `oklch(61.84% 0.1820 251.42)` | Bleu de France | black, 5.7 to 1 |
| 32 | `#0084ec` | `oklch(61.03% 0.1834 252.15)` | Blue Cola | black, 5.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e4f9ff 0.0%, #e0f8ff 3.2%, #dcf7ff 6.5%, #d6f5ff 9.7%, #d0f3ff 12.9%, #caf1ff 16.1%, #c3effe 19.4%, #bcecfe 22.6%, #b5e9fe 25.8%, #aee7fe 29.0%, #a6e4fe 32.3%, #9ee1fe 35.5%, #96deff 38.7%, #8ddaff 41.9%, #84d6ff 45.2%, #7bd2ff 48.4%, #72ceff 51.6%, #69caff 54.8%, #60c6ff 58.1%, #56c1ff 61.3%, #4cbcff 64.5%, #42b8ff 67.7%, #37b3ff 71.0%, #2dadfe 74.2%, #24a7fc 77.4%, #1ba1fa 80.6%, #129bf7 83.9%, #0995f5 87.1%, #0190f3 90.3%, #008bf0 93.5%, #0087ee 96.8%, #0084ec 100.0%);
background: linear-gradient(90deg in oklch, oklch(96.85% 0.0232 217.23) 0.0%, oklch(96.37% 0.0265 217.77) 3.2%, oklch(95.78% 0.0304 218.43) 6.5%, oklch(95.10% 0.0349 219.21) 9.7%, oklch(94.33% 0.0394 220.11) 12.9%, oklch(93.48% 0.0443 221.06) 16.1%, oklch(92.57% 0.0495 222.08) 19.4%, oklch(91.61% 0.0550 223.14) 22.6%, oklch(90.61% 0.0607 224.23) 25.8%, oklch(89.58% 0.0666 225.33) 29.0%, oklch(88.54% 0.0725 226.42) 32.3%, oklch(87.48% 0.0785 227.51) 35.5%, oklch(86.35% 0.0851 228.64) 38.7%, oklch(85.17% 0.0919 229.82) 41.9%, oklch(83.95% 0.0984 231.03) 45.2%, oklch(82.68% 0.1049 232.28) 48.4%, oklch(81.39% 0.1116 233.55) 51.6%, oklch(80.07% 0.1184 234.82) 54.8%, oklch(78.74% 0.1251 236.10) 58.1%, oklch(77.41% 0.1319 237.37) 61.3%, oklch(76.08% 0.1386 238.63) 64.5%, oklch(74.75% 0.1454 239.87) 67.7%, oklch(73.32% 0.1526 241.18) 71.0%, oklch(71.80% 0.1580 242.57) 74.2%, oklch(70.21% 0.1627 244.00) 77.4%, oklch(68.61% 0.1671 245.42) 80.6%, oklch(67.04% 0.1712 246.82) 83.9%, oklch(65.53% 0.1749 248.15) 87.1%, oklch(64.14% 0.1783 249.38) 90.3%, oklch(62.89% 0.1804 250.49) 93.5%, oklch(61.84% 0.1820 251.42) 96.8%, oklch(61.03% 0.1834 252.15) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.025 | 217.3 |
| 2 | 0.882 | 0.074 | 226.8 |
| 3 | 0.752 | 0.146 | 239.5 |
| 4 | 0.61 | 0.186 | 252.1 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)
- [Electric blue gradients](https://grabient.com/electric-blue-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)

## Other forms

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