# Blue color palette

The Blue color palette brings together dark blue, blue, teal, and light teal. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits travel posters and environmental mood boards. Its darkest tone is dark blue, and its lightest tone is light teal.

- Also called: Vivid navy, blue and light blue linear swatches
- Seed: `kYL2C8LM0_8bVv5buD3ca27HclPy`
- Page: https://grabient.com/kYL2C8LM0_8bVv5buD3ca27HclPy?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.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 | `#00004a` | `oklch(18.57% 0.1282 264.40)` | Endless Galaxy | white, 19 to 1 |
| 2 | `#01026a` | `oklch(24.02% 0.1628 264.54)` | Alone in the Dark | white, 17.2 to 1 |
| 3 | `#021296` | `oklch(31.86% 0.2012 264.56)` | Space Exploration | white, 13.7 to 1 |
| 4 | `#032cbd` | `oklch(39.97% 0.2245 264.15)` | Blue Screen of Death | white, 9.9 to 1 |
| 5 | `#0c4ae3` | `oklch(48.83% 0.2377 263.47)` | Merchant Marine Blue | white, 6.7 to 1 |
| 6 | `#066afd` | `oklch(57.03% 0.2324 260.30)` | Heroic Blue | white, 4.6 to 1 |
| 7 | `#1a8bff` | `oklch(63.98% 0.1966 254.60)` | Pool Water | black, 6.1 to 1 |
| 8 | `#34a8fd` | `oklch(70.65% 0.1596 245.60)` | Xed | black, 8.1 to 1 |
| 9 | `#3fc8ff` | `oklch(78.24% 0.1381 229.93)` | Thor’s Thunder | black, 10.8 to 1 |
| 10 | `#54e7ff` | `oklch(85.93% 0.1268 210.42)` | Shimmering Expanse Cyan | black, 14.2 to 1 |
| 11 | `#6ef9ff` | `oklch(90.89% 0.1208 198.87)` | Electric Blue | black, 16.7 to 1 |
| 12 | `#87feff` | `oklch(92.86% 0.1077 196.10)` | Glitter Shower | black, 17.6 to 1 |
| 13 | `#97ffff` | `oklch(93.70% 0.0970 195.68)` | Glitchy Shader Blue | black, 18 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00004a 0.000% 7.692%, #01026a 7.692% 15.385%, #021296 15.385% 23.077%, #032cbd 23.077% 30.769%, #0c4ae3 30.769% 38.462%, #066afd 38.462% 46.154%, #1a8bff 46.154% 53.846%, #34a8fd 53.846% 61.538%, #3fc8ff 61.538% 69.231%, #54e7ff 69.231% 76.923%, #6ef9ff 76.923% 84.615%, #87feff 84.615% 92.308%, #97ffff 92.308% 100.000%);
background: linear-gradient(90deg, oklch(18.57% 0.1282 264.40) 0.000% 7.692%, oklch(24.02% 0.1628 264.54) 7.692% 15.385%, oklch(31.86% 0.2012 264.56) 15.385% 23.077%, oklch(39.97% 0.2245 264.15) 23.077% 30.769%, oklch(48.83% 0.2377 263.47) 30.769% 38.462%, oklch(57.03% 0.2324 260.30) 38.462% 46.154%, oklch(63.98% 0.1966 254.60) 46.154% 53.846%, oklch(70.65% 0.1596 245.60) 53.846% 61.538%, oklch(78.24% 0.1381 229.93) 61.538% 69.231%, oklch(85.93% 0.1268 210.42) 69.231% 76.923%, oklch(90.89% 0.1208 198.87) 76.923% 84.615%, oklch(92.86% 0.1077 196.10) 84.615% 92.308%, oklch(93.70% 0.0970 195.68) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.185 | 0.132 | 264.4 |
| 2 | 0.35 | 0.212 | 264.4 |
| 3 | 0.555 | 0.236 | 261.2 |
| 4 | 0.72 | 0.154 | 243.2 |
| 5 | 0.894 | 0.125 | 202 |
| 6 | 0.937 | 0.102 | 195.7 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)
- [Beach gradients](https://grabient.com/beach-gradients)
- [Navy and teal gradients](https://grabient.com/navy-and-teal-gradients)

## Other forms

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