# Blue color palette

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

- Also called: Monochrome navy to light blue linear gradient
- Seed: `kWMym5JZ0_TSgv1PnL87o0_o`
- Page: https://grabient.com/kWMym5JZ0_TSgv1PnL87o0_o?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.3 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 | `#06152f` | `oklch(20.08% 0.0565 260.16)` | Squid’s Ink | white, 18.1 to 1 |
| 2 | `#071732` | `oklch(20.82% 0.0585 259.73)` | Liberty Blue | white, 17.8 to 1 |
| 3 | `#071936` | `oklch(21.79% 0.0612 259.17)` | Naval Night | white, 17.4 to 1 |
| 4 | `#081c3a` | `oklch(22.94% 0.0645 258.50)` | Naval Night | white, 16.9 to 1 |
| 5 | `#081f3f` | `oklch(24.23% 0.0681 257.75)` | Midnight Mirage | white, 16.4 to 1 |
| 6 | `#092245` | `oklch(25.62% 0.0717 256.96)` | Dark Eclipse | white, 15.7 to 1 |
| 7 | `#0a264a` | `oklch(27.05% 0.0751 256.17)` | Dark Eclipse | white, 15.1 to 1 |
| 8 | `#0b2a50` | `oklch(28.48% 0.0781 255.41)` | Dark Tyrian Blue | white, 14.4 to 1 |
| 9 | `#0c2d54` | `oklch(29.87% 0.0805 254.70)` | Dark Tyrian Blue | white, 13.7 to 1 |
| 10 | `#0d3159` | `oklch(31.20% 0.0825 254.03)` | Ambassador Blue | white, 13.1 to 1 |
| 11 | `#0f355e` | `oklch(32.50% 0.0843 253.37)` | Incremental Blue | white, 12.4 to 1 |
| 12 | `#103862` | `oklch(33.83% 0.0860 252.71)` | Lost in Space | white, 11.8 to 1 |
| 13 | `#123c67` | `oklch(35.23% 0.0874 252.05)` | Ateneo Blue | white, 11.2 to 1 |
| 14 | `#15416c` | `oklch(36.75% 0.0885 251.37)` | Epic Adventure | white, 10.5 to 1 |
| 15 | `#184571` | `oklch(38.42% 0.0892 250.68)` | Fish Net Blue | white, 9.8 to 1 |
| 16 | `#1c4b77` | `oklch(40.31% 0.0896 249.96)` | Seashell Cove | white, 9 to 1 |
| 17 | `#21517d` | `oklch(42.44% 0.0895 249.20)` | Blueberry Twist | white, 8.2 to 1 |
| 18 | `#275884` | `oklch(44.81% 0.0892 248.36)` | Mordian Blue | white, 7.4 to 1 |
| 19 | `#2e608b` | `oklch(47.39% 0.0887 247.47)` | Bay Site | white, 6.6 to 1 |
| 20 | `#366893` | `oklch(50.12% 0.0878 246.56)` | Too Blue | white, 5.9 to 1 |
| 21 | `#3e709b` | `oklch(52.98% 0.0865 245.66)` | National Anthem | white, 5.2 to 1 |
| 22 | `#4779a3` | `oklch(55.91% 0.0847 244.81)` | Billycart Blue | white, 4.6 to 1 |
| 23 | `#5082ab` | `oklch(58.89% 0.0823 244.04)` | Ship’s Harbour | black, 5.1 to 1 |
| 24 | `#5a8bb2` | `oklch(61.86% 0.0794 243.39)` | Alpha Blue | black, 5.7 to 1 |
| 25 | `#6595ba` | `oklch(64.94% 0.0755 242.87)` | Blue Marble | black, 6.5 to 1 |
| 26 | `#739fc2` | `oklch(68.38% 0.0702 242.44)` | Key West Zenith | black, 7.4 to 1 |
| 27 | `#81aaca` | `oklch(72.02% 0.0640 242.10)` | Calm Day | black, 8.5 to 1 |
| 28 | `#90b5d2` | `oklch(75.68% 0.0573 241.83)` | Innocent Blue | black, 9.7 to 1 |
| 29 | `#9fc0d9` | `oklch(79.19% 0.0507 241.61)` | Bluette | black, 11 to 1 |
| 30 | `#adcae0` | `oklch(82.36% 0.0446 241.43)` | Wind Blue | black, 12.2 to 1 |
| 31 | `#b8d2e6` | `oklch(85.03% 0.0395 241.27)` | Tiny Mr Frosty | black, 13.3 to 1 |
| 32 | `#c0d8ea` | `oklch(87.01% 0.0358 241.13)` | Light Blue Veil | black, 14.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #06152f 0.0%, #071732 3.2%, #071936 6.5%, #081c3a 9.7%, #081f3f 12.9%, #092245 16.1%, #0a264a 19.4%, #0b2a50 22.6%, #0c2d54 25.8%, #0d3159 29.0%, #0f355e 32.3%, #103862 35.5%, #123c67 38.7%, #15416c 41.9%, #184571 45.2%, #1c4b77 48.4%, #21517d 51.6%, #275884 54.8%, #2e608b 58.1%, #366893 61.3%, #3e709b 64.5%, #4779a3 67.7%, #5082ab 71.0%, #5a8bb2 74.2%, #6595ba 77.4%, #739fc2 80.6%, #81aaca 83.9%, #90b5d2 87.1%, #9fc0d9 90.3%, #adcae0 93.5%, #b8d2e6 96.8%, #c0d8ea 100.0%);
background: linear-gradient(135deg in oklch, oklch(20.08% 0.0565 260.16) 0.0%, oklch(20.82% 0.0585 259.73) 3.2%, oklch(21.79% 0.0612 259.17) 6.5%, oklch(22.94% 0.0645 258.50) 9.7%, oklch(24.23% 0.0681 257.75) 12.9%, oklch(25.62% 0.0717 256.96) 16.1%, oklch(27.05% 0.0751 256.17) 19.4%, oklch(28.48% 0.0781 255.41) 22.6%, oklch(29.87% 0.0805 254.70) 25.8%, oklch(31.20% 0.0825 254.03) 29.0%, oklch(32.50% 0.0843 253.37) 32.3%, oklch(33.83% 0.0860 252.71) 35.5%, oklch(35.23% 0.0874 252.05) 38.7%, oklch(36.75% 0.0885 251.37) 41.9%, oklch(38.42% 0.0892 250.68) 45.2%, oklch(40.31% 0.0896 249.96) 48.4%, oklch(42.44% 0.0895 249.20) 51.6%, oklch(44.81% 0.0892 248.36) 54.8%, oklch(47.39% 0.0887 247.47) 58.1%, oklch(50.12% 0.0878 246.56) 61.3%, oklch(52.98% 0.0865 245.66) 64.5%, oklch(55.91% 0.0847 244.81) 67.7%, oklch(58.89% 0.0823 244.04) 71.0%, oklch(61.86% 0.0794 243.39) 74.2%, oklch(64.94% 0.0755 242.87) 77.4%, oklch(68.38% 0.0702 242.44) 80.6%, oklch(72.02% 0.0640 242.10) 83.9%, oklch(75.68% 0.0573 241.83) 87.1%, oklch(79.19% 0.0507 241.61) 90.3%, oklch(82.36% 0.0446 241.43) 93.5%, oklch(85.03% 0.0395 241.27) 96.8%, oklch(87.01% 0.0358 241.13) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.056 | 260.2 |
| 2 | 0.295 | 0.08 | 254.9 |
| 3 | 0.413 | 0.09 | 249.6 |
| 4 | 0.626 | 0.079 | 243.2 |
| 5 | 0.87 | 0.036 | 241.1 |

## In these collections

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

## Other forms

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