# Blue color palette

The Blue color palette brings together blue and dark blue. The colors span a moderate 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 blue.

- Also called: Monochrome blue to navy linear gradient
- Seed: `kSh0mtrKDAZcOwG`
- Page: https://grabient.com/kSh0mtrKDAZcOwG?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark, vivid, dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.6 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 | `#3172a2` | `oklch(53.15% 0.1006 243.98)` | Vallarta Blue | white, 5.1 to 1 |
| 2 | `#2f70a0` | `oklch(52.49% 0.1003 244.14)` | Deep Water | white, 5.3 to 1 |
| 3 | `#2d6d9d` | `oklch(51.69% 0.1000 244.32)` | Lochmara | white, 5.5 to 1 |
| 4 | `#2b6a9a` | `oklch(50.77% 0.0997 244.54)` | Blues | white, 5.7 to 1 |
| 5 | `#286797` | `oklch(49.73% 0.0995 244.77)` | Starry Night | white, 6 to 1 |
| 6 | `#256493` | `oklch(48.61% 0.0992 245.04)` | Starry Night | white, 6.3 to 1 |
| 7 | `#226090` | `oklch(47.40% 0.0989 245.31)` | Lapis Lazuli Blue | white, 6.6 to 1 |
| 8 | `#1f5d8c` | `oklch(46.13% 0.0985 245.61)` | Sapphire Lace | white, 7 to 1 |
| 9 | `#1c5987` | `oklch(44.82% 0.0981 245.91)` | Stunning Sapphire | white, 7.4 to 1 |
| 10 | `#185583` | `oklch(43.48% 0.0975 246.22)` | Beyond the Sea | white, 7.8 to 1 |
| 11 | `#15517f` | `oklch(42.11% 0.0968 246.54)` | Toy Submarine Blue | white, 8.3 to 1 |
| 12 | `#114d7a` | `oklch(40.75% 0.0959 246.86)` | Seashell Cove | white, 8.8 to 1 |
| 13 | `#0e4976` | `oklch(39.41% 0.0949 247.17)` | Linear | white, 9.4 to 1 |
| 14 | `#0b4571` | `oklch(38.09% 0.0937 247.48)` | Medici Blue | white, 9.9 to 1 |
| 15 | `#09426d` | `oklch(36.82% 0.0922 247.78)` | Epic Adventure | white, 10.4 to 1 |
| 16 | `#073e69` | `oklch(35.61% 0.0905 248.07)` | Dark Imperial Blue | white, 11 to 1 |
| 17 | `#063b64` | `oklch(34.47% 0.0885 248.35)` | Ateneo Blue | white, 11.5 to 1 |
| 18 | `#053860` | `oklch(33.28% 0.0861 248.64)` | Marine Blue | white, 12 to 1 |
| 19 | `#05355b` | `oklch(32.06% 0.0832 248.94)` | Incremental Blue | white, 12.6 to 1 |
| 20 | `#053156` | `oklch(30.80% 0.0800 249.25)` | Night Dive | white, 13.2 to 1 |
| 21 | `#052e51` | `oklch(29.53% 0.0765 249.56)` | Indigo Black | white, 13.8 to 1 |
| 22 | `#052b4c` | `oklch(28.26% 0.0728 249.88)` | Royal Blue Metallic | white, 14.4 to 1 |
| 23 | `#052846` | `oklch(26.99% 0.0690 250.20)` | Dark Eclipse | white, 15 to 1 |
| 24 | `#052441` | `oklch(25.75% 0.0651 250.51)` | Rhapsody in Blue | white, 15.6 to 1 |
| 25 | `#06213c` | `oklch(24.54% 0.0612 250.82)` | Midnight Mirage | white, 16.2 to 1 |
| 26 | `#061f38` | `oklch(23.38% 0.0573 251.11)` | Cyanophobia | white, 16.7 to 1 |
| 27 | `#051c33` | `oklch(22.28% 0.0537 251.39)` | Cyanophobia | white, 17.1 to 1 |
| 28 | `#051a2f` | `oklch(21.25% 0.0502 251.65)` | Oxford by Night | white, 17.6 to 1 |
| 29 | `#05172b` | `oklch(20.30% 0.0470 251.89)` | Oxford by Night | white, 17.9 to 1 |
| 30 | `#051528` | `oklch(19.46% 0.0442 252.10)` | Creeping Death | white, 18.3 to 1 |
| 31 | `#051425` | `oklch(18.72% 0.0418 252.29)` | Creeping Death | white, 18.5 to 1 |
| 32 | `#041223` | `oklch(18.11% 0.0400 252.44)` | Kuretake Black Manga | white, 18.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #3172a2 0.0%, #2f70a0 3.2%, #2d6d9d 6.5%, #2b6a9a 9.7%, #286797 12.9%, #256493 16.1%, #226090 19.4%, #1f5d8c 22.6%, #1c5987 25.8%, #185583 29.0%, #15517f 32.3%, #114d7a 35.5%, #0e4976 38.7%, #0b4571 41.9%, #09426d 45.2%, #073e69 48.4%, #063b64 51.6%, #053860 54.8%, #05355b 58.1%, #053156 61.3%, #052e51 64.5%, #052b4c 67.7%, #052846 71.0%, #052441 74.2%, #06213c 77.4%, #061f38 80.6%, #051c33 83.9%, #051a2f 87.1%, #05172b 90.3%, #051528 93.5%, #051425 96.8%, #041223 100.0%);
background: linear-gradient(180deg in oklch, oklch(53.15% 0.1006 243.98) 0.0%, oklch(52.49% 0.1003 244.14) 3.2%, oklch(51.69% 0.1000 244.32) 6.5%, oklch(50.77% 0.0997 244.54) 9.7%, oklch(49.73% 0.0995 244.77) 12.9%, oklch(48.61% 0.0992 245.04) 16.1%, oklch(47.40% 0.0989 245.31) 19.4%, oklch(46.13% 0.0985 245.61) 22.6%, oklch(44.82% 0.0981 245.91) 25.8%, oklch(43.48% 0.0975 246.22) 29.0%, oklch(42.11% 0.0968 246.54) 32.3%, oklch(40.75% 0.0959 246.86) 35.5%, oklch(39.41% 0.0949 247.17) 38.7%, oklch(38.09% 0.0937 247.48) 41.9%, oklch(36.82% 0.0922 247.78) 45.2%, oklch(35.61% 0.0905 248.07) 48.4%, oklch(34.47% 0.0885 248.35) 51.6%, oklch(33.28% 0.0861 248.64) 54.8%, oklch(32.06% 0.0832 248.94) 58.1%, oklch(30.80% 0.0800 249.25) 61.3%, oklch(29.53% 0.0765 249.56) 64.5%, oklch(28.26% 0.0728 249.88) 67.7%, oklch(26.99% 0.0690 250.20) 71.0%, oklch(25.75% 0.0651 250.51) 74.2%, oklch(24.54% 0.0612 250.82) 77.4%, oklch(23.38% 0.0573 251.11) 80.6%, oklch(22.28% 0.0537 251.39) 83.9%, oklch(21.25% 0.0502 251.65) 87.1%, oklch(20.30% 0.0470 251.89) 90.3%, oklch(19.46% 0.0442 252.10) 93.5%, oklch(18.72% 0.0418 252.29) 96.8%, oklch(18.11% 0.0400 252.44) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.101 | 244 |
| 2 | 0.35 | 0.09 | 248.2 |
| 3 | 0.181 | 0.04 | 252.4 |

## In these collections

- [Navy swatches](https://grabient.com/navy-swatches)
- [Monochrome blue gradients](https://grabient.com/monochrome-blue-gradients)

## Other forms

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