# Blue color palette

The Blue color palette brings together dark blue, blue, and pale blue. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits information graphics and map mood boards. Its darkest tone is dark blue, and its lightest tone is pale blue.

- Also called: Monochrome navy, blue and light blue radial gradient
- Seed: `kSMzq5Rkw_XUWP0`
- Page: https://grabient.com/kSMzq5Rkw_XUWP0?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.4 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 | `#011339` | `oklch(20.08% 0.0799 260.16)` | Navy | white, 18.2 to 1 |
| 2 | `#00163f` | `oklch(21.35% 0.0852 259.96)` | Navy | white, 17.7 to 1 |
| 3 | `#001947` | `oklch(22.88% 0.0923 259.79)` | Cetacean Blue | white, 17.1 to 1 |
| 4 | `#001d4e` | `oklch(24.64% 0.0986 259.64)` | Subnautical | white, 16.3 to 1 |
| 5 | `#002157` | `oklch(26.60% 0.1047 259.31)` | Clarinet | white, 15.4 to 1 |
| 6 | `#002660` | `oklch(28.73% 0.1111 258.95)` | Black Sea Night | white, 14.4 to 1 |
| 7 | `#002c6a` | `oklch(31.01% 0.1179 258.58)` | Deep Sea Dream | white, 13.3 to 1 |
| 8 | `#003275` | `oklch(33.42% 0.1248 258.20)` | Dark Midnight Blue | white, 12.2 to 1 |
| 9 | `#003980` | `oklch(35.93% 0.1319 257.81)` | Cobalt Blue Tarantula | white, 11 to 1 |
| 10 | `#00408c` | `oklch(38.50% 0.1390 257.41)` | Mystery Oceans | white, 9.9 to 1 |
| 11 | `#004797` | `oklch(41.12% 0.1460 257.00)` | Fright Night | white, 8.9 to 1 |
| 12 | `#004ea3` | `oklch(43.76% 0.1529 256.60)` | Sea of Tears | white, 7.9 to 1 |
| 13 | `#0056af` | `oklch(46.39% 0.1596 256.20)` | Blue Lobster | white, 7.1 to 1 |
| 14 | `#005dbb` | `oklch(48.98% 0.1660 255.81)` | Amnesia Blue | white, 6.3 to 1 |
| 15 | `#0065c7` | `oklch(51.50% 0.1722 255.43)` | Royal Navy Blue | white, 5.7 to 1 |
| 16 | `#006cd2` | `oklch(53.94% 0.1780 255.06)` | Flickr Blue | white, 5.1 to 1 |
| 17 | `#0073dd` | `oklch(56.30% 0.1836 254.72)` | Bright Navy Blue | white, 4.6 to 1 |
| 18 | `#007be9` | `oklch(58.78% 0.1893 254.35)` | Blue Darknut | black, 4.9 to 1 |
| 19 | `#0083f5` | `oklch(61.38% 0.1952 253.98)` | Bubble Bobble P2 | black, 5.5 to 1 |
| 20 | `#198cfc` | `oklch(64.07% 0.1917 253.58)` | Clear Chill | black, 6.1 to 1 |
| 21 | `#3196ff` | `oklch(66.82% 0.1802 253.18)` | Brilliant Azure | black, 6.9 to 1 |
| 22 | `#48a0ff` | `oklch(69.61% 0.1636 252.78)` | Blue Chaos | black, 7.7 to 1 |
| 23 | `#5ba9ff` | `oklch(72.39% 0.1473 252.38)` | Âbi Blue | black, 8.5 to 1 |
| 24 | `#6db3ff` | `oklch(75.13% 0.1315 251.99)` | French Sky Blue | black, 9.5 to 1 |
| 25 | `#7ebbff` | `oklch(77.82% 0.1164 251.61)` | Cooler Than Ever | black, 10.4 to 1 |
| 26 | `#8dc4ff` | `oklch(80.40% 0.1020 251.25)` | Chromis Damsel Blue | black, 11.4 to 1 |
| 27 | `#9ccbff` | `oklch(82.86% 0.0885 250.90)` | Apocyan | black, 12.4 to 1 |
| 28 | `#a9d3ff` | `oklch(85.16% 0.0761 250.57)` | Ice Cold Stare | black, 13.4 to 1 |
| 29 | `#b6d9ff` | `oklch(87.26% 0.0649 250.27)` | Oh Boy! | black, 14.3 to 1 |
| 30 | `#c1dfff` | `oklch(89.15% 0.0550 250.00)` | Dithered Sky | black, 15.2 to 1 |
| 31 | `#cae4ff` | `oklch(90.78% 0.0465 249.77)` | Fresh Water | black, 16 to 1 |
| 32 | `#d2e8ff` | `oklch(92.13% 0.0395 249.58)` | Veiling Waterfalls | black, 16.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #011339 0.0%, #00163f 3.2%, #001947 6.5%, #001d4e 9.7%, #002157 12.9%, #002660 16.1%, #002c6a 19.4%, #003275 22.6%, #003980 25.8%, #00408c 29.0%, #004797 32.3%, #004ea3 35.5%, #0056af 38.7%, #005dbb 41.9%, #0065c7 45.2%, #006cd2 48.4%, #0073dd 51.6%, #007be9 54.8%, #0083f5 58.1%, #198cfc 61.3%, #3196ff 64.5%, #48a0ff 67.7%, #5ba9ff 71.0%, #6db3ff 74.2%, #7ebbff 77.4%, #8dc4ff 80.6%, #9ccbff 83.9%, #a9d3ff 87.1%, #b6d9ff 90.3%, #c1dfff 93.5%, #cae4ff 96.8%, #d2e8ff 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(20.08% 0.0799 260.16) 0.0%, oklch(21.35% 0.0852 259.96) 3.2%, oklch(22.88% 0.0923 259.79) 6.5%, oklch(24.64% 0.0986 259.64) 9.7%, oklch(26.60% 0.1047 259.31) 12.9%, oklch(28.73% 0.1111 258.95) 16.1%, oklch(31.01% 0.1179 258.58) 19.4%, oklch(33.42% 0.1248 258.20) 22.6%, oklch(35.93% 0.1319 257.81) 25.8%, oklch(38.50% 0.1390 257.41) 29.0%, oklch(41.12% 0.1460 257.00) 32.3%, oklch(43.76% 0.1529 256.60) 35.5%, oklch(46.39% 0.1596 256.20) 38.7%, oklch(48.98% 0.1660 255.81) 41.9%, oklch(51.50% 0.1722 255.43) 45.2%, oklch(53.94% 0.1780 255.06) 48.4%, oklch(56.30% 0.1836 254.72) 51.6%, oklch(58.78% 0.1893 254.35) 54.8%, oklch(61.38% 0.1952 253.98) 58.1%, oklch(64.07% 0.1917 253.58) 61.3%, oklch(66.82% 0.1802 253.18) 64.5%, oklch(69.61% 0.1636 252.78) 67.7%, oklch(72.39% 0.1473 252.38) 71.0%, oklch(75.13% 0.1315 251.99) 74.2%, oklch(77.82% 0.1164 251.61) 77.4%, oklch(80.40% 0.1020 251.25) 80.6%, oklch(82.86% 0.0885 250.90) 83.9%, oklch(85.16% 0.0761 250.57) 87.1%, oklch(87.26% 0.0649 250.27) 90.3%, oklch(89.15% 0.0550 250.00) 93.5%, oklch(90.78% 0.0465 249.77) 96.8%, oklch(92.13% 0.0395 249.58) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.08 | 260.2 |
| 2 | 0.551 | 0.209 | 254.9 |
| 3 | 0.921 | 0.061 | 249.6 |

## In these collections

- [Heatmap gradients](https://grabient.com/heatmap-gradients)
- [Monochrome blue gradients](https://grabient.com/monochrome-blue-gradients)

## Other forms

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