# Blue color palette

This palette brings together pale blue, light blue, and blue. It darkens and then lightens across a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and presentation backgrounds, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Monochrome light blue to blue linear gradient
- Seed: `ka7hulaKRBFTAwVATkDrrvAENJP5aNz7g`
- Page: https://grabient.com/ka7hulaKRBFTAwVATkDrrvAENJP5aNz7g?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.1 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 | `#d3efff` | `oklch(93.70% 0.0368 232.01)` | Ice Castle | black, 17.5 to 1 |
| 2 | `#c9ebff` | `oklch(92.27% 0.0447 233.23)` | Blue Java Banana | black, 16.8 to 1 |
| 3 | `#bce6ff` | `oklch(90.31% 0.0553 234.91)` | Icy Landscape | black, 15.8 to 1 |
| 4 | `#addfff` | `oklch(87.96% 0.0679 236.91)` | Droplet | black, 14.7 to 1 |
| 5 | `#9dd7ff` | `oklch(85.38% 0.0815 239.06)` | Malmö FF | black, 13.6 to 1 |
| 6 | `#8dcfff` | `oklch(82.72% 0.0954 241.19)` | Clear Sky | black, 12.4 to 1 |
| 7 | `#7dc6ff` | `oklch(79.99% 0.1097 243.33)` | Chromis Damsel Blue | black, 11.3 to 1 |
| 8 | `#6bbcff` | `oklch(77.03% 0.1252 245.64)` | Green Darner Tail | black, 10.2 to 1 |
| 9 | `#59b1ff` | `oklch(73.92% 0.1417 248.01)` | Tiān Lán Sky | black, 9.1 to 1 |
| 10 | `#47a5ff` | `oklch(70.73% 0.1587 250.34)` | Xed | black, 8.1 to 1 |
| 11 | `#3799fe` | `oklch(67.57% 0.1738 252.50)` | Brilliant Azure | black, 7.1 to 1 |
| 12 | `#2a8dfa` | `oklch(64.45% 0.1852 254.47)` | Clear Chill | black, 6.2 to 1 |
| 13 | `#1e80f6` | `oklch(61.27% 0.1959 256.39)` | Brescian Blue | black, 5.4 to 1 |
| 14 | `#1574f0` | `oklch(58.08% 0.2051 258.20)` | Deep Sky Blue | black, 4.7 to 1 |
| 15 | `#0f67ea` | `oklch(54.92% 0.2118 259.80)` | Epic Blue | white, 5 to 1 |
| 16 | `#0c5ce1` | `oklch(51.86% 0.2150 261.11)` | Chun-Li Blue | white, 5.8 to 1 |
| 17 | `#0c51d6` | `oklch(48.84% 0.2131 262.03)` | Frosted Blueberries | white, 6.6 to 1 |
| 18 | `#0b47c5` | `oklch(45.33% 0.2040 262.59)` | Flying Fish Blue | white, 7.7 to 1 |
| 19 | `#093eb2` | `oklch(41.77% 0.1906 262.86)` | Indian Peafowl | white, 8.9 to 1 |
| 20 | `#0837a1` | `oklch(38.76% 0.1770 262.91)` | Egyptian Blue | white, 10.1 to 1 |
| 21 | `#073395` | `oklch(36.91% 0.1669 262.80)` | Smalt | white, 10.9 to 1 |
| 22 | `#073494` | `oklch(36.81% 0.1641 262.60)` | Smalt | white, 10.9 to 1 |
| 23 | `#07389c` | `oklch(38.61% 0.1695 262.29)` | Amalfitan Azure | white, 10.1 to 1 |
| 24 | `#0741ac` | `oklch(41.76% 0.1796 261.83)` | Indian Peafowl | white, 8.9 to 1 |
| 25 | `#084cbf` | `oklch(45.67% 0.1908 261.19)` | Absolute Zero | white, 7.5 to 1 |
| 26 | `#0958d1` | `oklch(49.71% 0.1991 260.36)` | Dead Blue Eyes | white, 6.3 to 1 |
| 27 | `#0d64de` | `oklch(53.32% 0.2009 259.31)` | Blue Ruin | white, 5.3 to 1 |
| 28 | `#1872e7` | `oklch(57.07% 0.1949 257.79)` | Níu Zǎi Sè Denim | black, 4.6 to 1 |
| 29 | `#2681ee` | `oklch(61.14% 0.1840 255.90)` | Bubble Bobble P2 | black, 5.4 to 1 |
| 30 | `#3790f4` | `oklch(65.08% 0.1712 253.95)` | Karimun Blue | black, 6.4 to 1 |
| 31 | `#459df8` | `oklch(68.47% 0.1594 252.24)` | Sky Dancer | black, 7.4 to 1 |
| 32 | `#50a5fc` | `oklch(70.87% 0.1516 251.05)` | Âbi Blue | black, 8.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #d3efff 0.0%, #c9ebff 3.2%, #bce6ff 6.5%, #addfff 9.7%, #9dd7ff 12.9%, #8dcfff 16.1%, #7dc6ff 19.4%, #6bbcff 22.6%, #59b1ff 25.8%, #47a5ff 29.0%, #3799fe 32.3%, #2a8dfa 35.5%, #1e80f6 38.7%, #1574f0 41.9%, #0f67ea 45.2%, #0c5ce1 48.4%, #0c51d6 51.6%, #0b47c5 54.8%, #093eb2 58.1%, #0837a1 61.3%, #073395 64.5%, #073494 67.7%, #07389c 71.0%, #0741ac 74.2%, #084cbf 77.4%, #0958d1 80.6%, #0d64de 83.9%, #1872e7 87.1%, #2681ee 90.3%, #3790f4 93.5%, #459df8 96.8%, #50a5fc 100.0%);
background: linear-gradient(135deg in oklch, oklch(93.70% 0.0368 232.01) 0.0%, oklch(92.27% 0.0447 233.23) 3.2%, oklch(90.31% 0.0553 234.91) 6.5%, oklch(87.96% 0.0679 236.91) 9.7%, oklch(85.38% 0.0815 239.06) 12.9%, oklch(82.72% 0.0954 241.19) 16.1%, oklch(79.99% 0.1097 243.33) 19.4%, oklch(77.03% 0.1252 245.64) 22.6%, oklch(73.92% 0.1417 248.01) 25.8%, oklch(70.73% 0.1587 250.34) 29.0%, oklch(67.57% 0.1738 252.50) 32.3%, oklch(64.45% 0.1852 254.47) 35.5%, oklch(61.27% 0.1959 256.39) 38.7%, oklch(58.08% 0.2051 258.20) 41.9%, oklch(54.92% 0.2118 259.80) 45.2%, oklch(51.86% 0.2150 261.11) 48.4%, oklch(48.84% 0.2131 262.03) 51.6%, oklch(45.33% 0.2040 262.59) 54.8%, oklch(41.77% 0.1906 262.86) 58.1%, oklch(38.76% 0.1770 262.91) 61.3%, oklch(36.91% 0.1669 262.80) 64.5%, oklch(36.81% 0.1641 262.60) 67.7%, oklch(38.61% 0.1695 262.29) 71.0%, oklch(41.76% 0.1796 261.83) 74.2%, oklch(45.67% 0.1908 261.19) 77.4%, oklch(49.71% 0.1991 260.36) 80.6%, oklch(53.32% 0.2009 259.31) 83.9%, oklch(57.07% 0.1949 257.79) 87.1%, oklch(61.14% 0.1840 255.90) 90.3%, oklch(65.08% 0.1712 253.95) 93.5%, oklch(68.47% 0.1594 252.24) 96.8%, oklch(70.87% 0.1516 251.05) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.037 | 232 |
| 2 | 0.823 | 0.099 | 241.5 |
| 3 | 0.665 | 0.178 | 253.2 |
| 4 | 0.504 | 0.215 | 261.6 |
| 5 | 0.366 | 0.164 | 262.7 |
| 6 | 0.528 | 0.201 | 259.5 |
| 7 | 0.709 | 0.152 | 251.1 |

## In these collections

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

## Other forms

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