# Blue color palette

The Blue color palette brings together dark blue, blue, purple, light gray, and dark gray. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is light gray.

- Also called: Analogous navy, purple and gray linear gradient
- Seed: `kYNh7BLBc_r-Vw3tBbr0Q0-6eHQi`
- Page: https://grabient.com/kYNh7BLBc_r-Vw3tBbr0Q0-6eHQi?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.5 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 | `#12172c` | `oklch(21.26% 0.0413 271.41)` | Sambucus | white, 17.6 to 1 |
| 2 | `#141b31` | `oklch(22.64% 0.0439 270.84)` | Dark Knight | white, 17.1 to 1 |
| 3 | `#171f37` | `oklch(24.52% 0.0477 269.76)` | Sombre Night | white, 16.2 to 1 |
| 4 | `#1b243f` | `oklch(26.76% 0.0522 268.60)` | Cool Balaclavas Are Forever | white, 15.2 to 1 |
| 5 | `#202a48` | `oklch(29.21% 0.0566 267.79)` | Fainting Light | white, 14.1 to 1 |
| 6 | `#253151` | `oklch(31.73% 0.0604 267.74)` | Blue Lobelia | white, 12.9 to 1 |
| 7 | `#2b3659` | `oklch(34.18% 0.0631 268.88)` | Midnight Escapade | white, 11.7 to 1 |
| 8 | `#323c60` | `oklch(36.38% 0.0644 272.08)` | Bay of Many | white, 10.8 to 1 |
| 9 | `#3b3f66` | `oklch(38.35% 0.0653 277.71)` | Raven Night | white, 10 to 1 |
| 10 | `#45436b` | `oklch(40.30% 0.0655 284.52)` | Palace Arms | white, 9.2 to 1 |
| 11 | `#4f486f` | `oklch(42.48% 0.0650 291.20)` | Evening Fizz | white, 8.4 to 1 |
| 12 | `#594e75` | `oklch(45.11% 0.0634 296.44)` | Perpetual Purple | white, 7.5 to 1 |
| 13 | `#63577d` | `oklch(48.43% 0.0607 298.94)` | Psychic | white, 6.5 to 1 |
| 14 | `#6f6588` | `oklch(52.90% 0.0563 297.48)` | Posy Purple | white, 5.4 to 1 |
| 15 | `#7e7999` | `oklch(59.22% 0.0491 292.24)` | Grape Jam | black, 5 to 1 |
| 16 | `#9091ac` | `oklch(66.53% 0.0403 284.51)` | Monarchy | black, 6.8 to 1 |
| 17 | `#a4a9be` | `oklch(73.85% 0.0311 275.62)` | Lilac Time | black, 9 to 1 |
| 18 | `#b8bece` | `oklch(80.19% 0.0229 266.89)` | Mistral | black, 11.3 to 1 |
| 19 | `#c6cdd8` | `oklch(84.56% 0.0170 259.67)` | Link Water | black, 13 to 1 |
| 20 | `#cbd2db` | `oklch(86.06% 0.0147 255.06)` | Steam Bath | black, 13.7 to 1 |
| 21 | `#c6cfd8` | `oklch(84.97% 0.0162 251.87)` | Light Pre School | black, 13.2 to 1 |
| 22 | `#bbc5d1` | `oklch(81.99% 0.0202 249.62)` | Blue Dolphin | black, 12 to 1 |
| 23 | `#aab8c6` | `oklch(77.69% 0.0254 248.22)` | Blue Tribute | black, 10.4 to 1 |
| 24 | `#98a9b9` | `oklch(72.69% 0.0306 247.59)` | Cool Customer | black, 8.7 to 1 |
| 25 | `#8799ac` | `oklch(67.56% 0.0345 247.66)` | Urban Vibes | black, 7.1 to 1 |
| 26 | `#788b9e` | `oklch(62.87% 0.0358 248.37)` | Hilo Bay | black, 5.9 to 1 |
| 27 | `#6a7b8e` | `oklch(57.63% 0.0347 250.40)` | Blue Suede | black, 4.8 to 1 |
| 28 | `#5b697a` | `oklch(51.64% 0.0320 253.65)` | Spinning Blue | white, 5.5 to 1 |
| 29 | `#4d5767` | `oklch(45.45% 0.0285 257.54)` | Property | white, 7.2 to 1 |
| 30 | `#3f4754` | `oklch(39.60% 0.0247 261.48)` | Whispered Secret | white, 9.3 to 1 |
| 31 | `#343a45` | `oklch(34.64% 0.0214 264.89)` | Do Not Disturb | white, 11.4 to 1 |
| 32 | `#2c303b` | `oklch(31.10% 0.0193 267.18)` | Diamond Black | white, 13.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #12172c 0.0%, #141b31 3.2%, #171f37 6.5%, #1b243f 9.7%, #202a48 12.9%, #253151 16.1%, #2b3659 19.4%, #323c60 22.6%, #3b3f66 25.8%, #45436b 29.0%, #4f486f 32.3%, #594e75 35.5%, #63577d 38.7%, #6f6588 41.9%, #7e7999 45.2%, #9091ac 48.4%, #a4a9be 51.6%, #b8bece 54.8%, #c6cdd8 58.1%, #cbd2db 61.3%, #c6cfd8 64.5%, #bbc5d1 67.7%, #aab8c6 71.0%, #98a9b9 74.2%, #8799ac 77.4%, #788b9e 80.6%, #6a7b8e 83.9%, #5b697a 87.1%, #4d5767 90.3%, #3f4754 93.5%, #343a45 96.8%, #2c303b 100.0%);
background: linear-gradient(90deg in oklch, oklch(21.26% 0.0413 271.41) 0.0%, oklch(22.64% 0.0439 270.84) 3.2%, oklch(24.52% 0.0477 269.76) 6.5%, oklch(26.76% 0.0522 268.60) 9.7%, oklch(29.21% 0.0566 267.79) 12.9%, oklch(31.73% 0.0604 267.74) 16.1%, oklch(34.18% 0.0631 268.88) 19.4%, oklch(36.38% 0.0644 272.08) 22.6%, oklch(38.35% 0.0653 277.71) 25.8%, oklch(40.30% 0.0655 284.52) 29.0%, oklch(42.48% 0.0650 291.20) 32.3%, oklch(45.11% 0.0634 296.44) 35.5%, oklch(48.43% 0.0607 298.94) 38.7%, oklch(52.90% 0.0563 297.48) 41.9%, oklch(59.22% 0.0491 292.24) 45.2%, oklch(66.53% 0.0403 284.51) 48.4%, oklch(73.85% 0.0311 275.62) 51.6%, oklch(80.19% 0.0229 266.89) 54.8%, oklch(84.56% 0.0170 259.67) 58.1%, oklch(86.06% 0.0147 255.06) 61.3%, oklch(84.97% 0.0162 251.87) 64.5%, oklch(81.99% 0.0202 249.62) 67.7%, oklch(77.69% 0.0254 248.22) 71.0%, oklch(72.69% 0.0306 247.59) 74.2%, oklch(67.56% 0.0345 247.66) 77.4%, oklch(62.87% 0.0358 248.37) 80.6%, oklch(57.63% 0.0347 250.40) 83.9%, oklch(51.64% 0.0320 253.65) 87.1%, oklch(45.45% 0.0285 257.54) 90.3%, oklch(39.60% 0.0247 261.48) 93.5%, oklch(34.64% 0.0214 264.89) 96.8%, oklch(31.10% 0.0193 267.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.041 | 271.4 |
| 2 | 0.346 | 0.063 | 269.3 |
| 3 | 0.5 | 0.059 | 298.9 |
| 4 | 0.858 | 0.015 | 256.6 |
| 5 | 0.638 | 0.036 | 248.2 |
| 6 | 0.311 | 0.019 | 267.2 |

## In these collections

- [Silver gradients](https://grabient.com/silver-gradients)
- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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