# Blue color palette

The Blue color palette brings together dark blue and blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Monochrome navy and blue radial gradient
- Seed: `kWOiW8Q5--burwCuKsCHx1Ag`
- Page: https://grabient.com/kWOiW8Q5--burwCuKsCHx1Ag?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: light center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#101b34` | `oklch(22.83% 0.0510 264.37)` | Trapped Darkness | white, 17 to 1 |
| 2 | `#15223d` | `oklch(25.53% 0.0539 263.25)` | Cool Balaclavas Are Forever | white, 15.8 to 1 |
| 3 | `#1c2c49` | `oklch(29.41% 0.0578 261.64)` | Rurikon Blue | white, 13.9 to 1 |
| 4 | `#243858` | `oklch(34.05% 0.0624 259.71)` | Navy Peony | white, 11.7 to 1 |
| 5 | `#2d4669` | `oklch(39.01% 0.0675 257.64)` | Commodore | white, 9.6 to 1 |
| 6 | `#36537a` | `oklch(43.87% 0.0728 255.62)` | Bunting Blue | white, 7.8 to 1 |
| 7 | `#3e6089` | `oklch(48.18% 0.0782 253.81)` | Functional Blue | white, 6.4 to 1 |
| 8 | `#436a96` | `oklch(51.53% 0.0833 252.39)` | Queen Blue | white, 5.6 to 1 |
| 9 | `#45709f` | `oklch(53.50% 0.0879 251.54)` | Naval | white, 5.1 to 1 |
| 10 | `#4473a4` | `oklch(54.26% 0.0927 251.16)` | Decoration Blue | white, 4.9 to 1 |
| 11 | `#4172a6` | `oklch(54.13% 0.0977 251.13)` | Flat Blue | white, 5 to 1 |
| 12 | `#3c70a6` | `oklch(53.32% 0.1027 251.37)` | Mega Blue | white, 5.1 to 1 |
| 13 | `#366ca5` | `oklch(52.04% 0.1075 251.81)` | Mega Blue | white, 5.4 to 1 |
| 14 | `#2f67a2` | `oklch(50.49% 0.1120 252.37)` | Distant Blue | white, 5.8 to 1 |
| 15 | `#29629f` | `oklch(48.90% 0.1158 252.98)` | Zydeco Blue | white, 6.3 to 1 |
| 16 | `#245d9d` | `oklch(47.45% 0.1188 253.55)` | Drakenhof Nightshade | white, 6.7 to 1 |
| 17 | `#20599a` | `oklch(46.29% 0.1208 254.06)` | Suddenly Sapphire | white, 7 to 1 |
| 18 | `#1d5697` | `oklch(45.08% 0.1221 254.63)` | Florentine Lapis | white, 7.4 to 1 |
| 19 | `#1a5194` | `oklch(43.78% 0.1229 255.28)` | Nautical Blue | white, 7.9 to 1 |
| 20 | `#174d8f` | `oklch(42.41% 0.1230 255.98)` | Dancing Sea | white, 8.3 to 1 |
| 21 | `#15498b` | `oklch(40.98% 0.1225 256.71)` | Lady of the Night | white, 8.9 to 1 |
| 22 | `#144486` | `oklch(39.52% 0.1215 257.46)` | Poster Blue | white, 9.5 to 1 |
| 23 | `#124081` | `oklch(38.05% 0.1199 258.20)` | Bracing Blue | white, 10.1 to 1 |
| 24 | `#113c7b` | `oklch(36.58% 0.1178 258.92)` | Azure Dragon | white, 10.7 to 1 |
| 25 | `#113775` | `oklch(35.07% 0.1147 259.62)` | Azure Dragon | white, 11.4 to 1 |
| 26 | `#10336e` | `oklch(33.40% 0.1103 260.39)` | Atlantic Navy | white, 12.2 to 1 |
| 27 | `#102e66` | `oklch(31.64% 0.1050 261.18)` | Cool Black | white, 13 to 1 |
| 28 | `#0f2a5e` | `oklch(29.87% 0.0991 261.97)` | Blue Leviathan | white, 13.8 to 1 |
| 29 | `#0e2656` | `oklch(28.18% 0.0932 262.71)` | Fibonacci Blue | white, 14.6 to 1 |
| 30 | `#0e2250` | `oklch(26.65% 0.0877 263.39)` | Dark Soul | white, 15.4 to 1 |
| 31 | `#0d1f4a` | `oklch(25.36% 0.0832 263.95)` | Oxford Blue | white, 15.9 to 1 |
| 32 | `#0c1d46` | `oklch(24.41% 0.0799 264.38)` | Oxford Blue | white, 16.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #101b34 0.0%, #15223d 3.2%, #1c2c49 6.5%, #243858 9.7%, #2d4669 12.9%, #36537a 16.1%, #3e6089 19.4%, #436a96 22.6%, #45709f 25.8%, #4473a4 29.0%, #4172a6 32.3%, #3c70a6 35.5%, #366ca5 38.7%, #2f67a2 41.9%, #29629f 45.2%, #245d9d 48.4%, #20599a 51.6%, #1d5697 54.8%, #1a5194 58.1%, #174d8f 61.3%, #15498b 64.5%, #144486 67.7%, #124081 71.0%, #113c7b 74.2%, #113775 77.4%, #10336e 80.6%, #102e66 83.9%, #0f2a5e 87.1%, #0e2656 90.3%, #0e2250 93.5%, #0d1f4a 96.8%, #0c1d46 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(22.83% 0.0510 264.37) 0.0%, oklch(25.53% 0.0539 263.25) 3.2%, oklch(29.41% 0.0578 261.64) 6.5%, oklch(34.05% 0.0624 259.71) 9.7%, oklch(39.01% 0.0675 257.64) 12.9%, oklch(43.87% 0.0728 255.62) 16.1%, oklch(48.18% 0.0782 253.81) 19.4%, oklch(51.53% 0.0833 252.39) 22.6%, oklch(53.50% 0.0879 251.54) 25.8%, oklch(54.26% 0.0927 251.16) 29.0%, oklch(54.13% 0.0977 251.13) 32.3%, oklch(53.32% 0.1027 251.37) 35.5%, oklch(52.04% 0.1075 251.81) 38.7%, oklch(50.49% 0.1120 252.37) 41.9%, oklch(48.90% 0.1158 252.98) 45.2%, oklch(47.45% 0.1188 253.55) 48.4%, oklch(46.29% 0.1208 254.06) 51.6%, oklch(45.08% 0.1221 254.63) 54.8%, oklch(43.78% 0.1229 255.28) 58.1%, oklch(42.41% 0.1230 255.98) 61.3%, oklch(40.98% 0.1225 256.71) 64.5%, oklch(39.52% 0.1215 257.46) 67.7%, oklch(38.05% 0.1199 258.20) 71.0%, oklch(36.58% 0.1178 258.92) 74.2%, oklch(35.07% 0.1147 259.62) 77.4%, oklch(33.40% 0.1103 260.39) 80.6%, oklch(31.64% 0.1050 261.18) 83.9%, oklch(29.87% 0.0991 261.97) 87.1%, oklch(28.18% 0.0932 262.71) 90.3%, oklch(26.65% 0.0877 263.39) 93.5%, oklch(25.36% 0.0832 263.95) 96.8%, oklch(24.41% 0.0799 264.38) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.051 | 264.4 |
| 2 | 0.531 | 0.087 | 251.7 |
| 3 | 0.469 | 0.12 | 253.8 |
| 4 | 0.362 | 0.117 | 259.1 |
| 5 | 0.244 | 0.08 | 264.4 |

## In these collections

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

## Other forms

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