# Blue and gray color palette

Monochrome blue, navy and gray linear gradient with 32 colors: #717b99, #6c7794, #65708e, #5c6987, #546180, #4c5a79, #455473, #3f4e6d, #394967, #324361, #2c3e5b, #263754, #1f304c, #182944, #12223c, #0e1e37, #0b1d35, #0b1f36, #0d233a, #0f283e, #122e42, #163346, #1a394a, #203f4f, #264653, #2d4c58, #33535b, #3b5a5f, #456262, #4f6965, #586e68, #5f736b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome blue, navy and gray linear gradient
- Seed: `kalSLAOxO_a0Uv0dkz-JpI97UOvTECbpA`
- Page: https://grabient.com/kalSLAOxO_a0Uv0dkz-JpI97UOvTECbpA?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark center, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#717b99` | `oklch(58.66% 0.0469 270.00)` | Quantum Blue | black, 5 to 1 |
| 2 | `#6c7794` | `oklch(57.05% 0.0478 269.46)` | Legal Eagle | black, 4.6 to 1 |
| 3 | `#65708e` | `oklch(54.77% 0.0492 268.72)` | Deep Larkspur | white, 4.9 to 1 |
| 4 | `#5c6987` | `oklch(52.11% 0.0508 267.84)` | Grape Haze | white, 5.5 to 1 |
| 5 | `#546180` | `oklch(49.37% 0.0523 266.88)` | Award Night | white, 6.1 to 1 |
| 6 | `#4c5a79` | `oklch(46.84% 0.0536 265.93)` | Blue Review | white, 6.9 to 1 |
| 7 | `#455473` | `oklch(44.62% 0.0545 264.96)` | Signature Blue | white, 7.5 to 1 |
| 8 | `#3f4e6d` | `oklch(42.51% 0.0553 263.89)` | Ensign Blue | white, 8.3 to 1 |
| 9 | `#394967` | `oklch(40.43% 0.0560 262.79)` | Bonne Nuit | white, 9 to 1 |
| 10 | `#324361` | `oklch(38.33% 0.0564 261.73)` | Black Turmeric | white, 9.9 to 1 |
| 11 | `#2c3e5b` | `oklch(36.18% 0.0565 260.77)` | Academic Blue | white, 10.8 to 1 |
| 12 | `#263754` | `oklch(33.78% 0.0563 260.08)` | Mediaeval Blue | white, 11.8 to 1 |
| 13 | `#1f304c` | `oklch(30.90% 0.0556 259.79)` | Manganese Black | white, 13.2 to 1 |
| 14 | `#182944` | `oklch(27.96% 0.0547 259.61)` | Eternal Darkness | white, 14.6 to 1 |
| 15 | `#12223c` | `oklch(25.40% 0.0537 259.18)` | Cool Balaclavas Are Forever | white, 15.8 to 1 |
| 16 | `#0e1e37` | `oklch(23.65% 0.0527 258.16)` | Trapped Darkness | white, 16.6 to 1 |
| 17 | `#0b1d35` | `oklch(23.13% 0.0521 256.25)` | Trapped Darkness | white, 16.8 to 1 |
| 18 | `#0b1f36` | `oklch(23.75% 0.0517 253.60)` | Trapped Darkness | white, 16.5 to 1 |
| 19 | `#0d233a` | `oklch(25.15% 0.0514 250.41)` | Celestial Canvas | white, 15.9 to 1 |
| 20 | `#0f283e` | `oklch(27.03% 0.0510 246.82)` | Murky Depths | white, 15 to 1 |
| 21 | `#122e42` | `oklch(29.05% 0.0503 243.00)` | NATO Blue | white, 14 to 1 |
| 22 | `#163346` | `oklch(30.93% 0.0492 239.14)` | NATO Blue | white, 13.1 to 1 |
| 23 | `#1a394a` | `oklch(32.94% 0.0477 235.46)` | Subterranean River | white, 12.1 to 1 |
| 24 | `#203f4f` | `oklch(35.16% 0.0459 231.70)` | Depths of the Nile | white, 11.1 to 1 |
| 25 | `#264653` | `oklch(37.48% 0.0440 227.46)` | Rainstorm | white, 10.1 to 1 |
| 26 | `#2d4c58` | `oklch(39.82% 0.0418 222.36)` | Celtic Rush | white, 9.1 to 1 |
| 27 | `#33535b` | `oklch(42.11% 0.0396 215.97)` | Cold Sea Currents | white, 8.2 to 1 |
| 28 | `#3b5a5f` | `oklch(44.61% 0.0369 207.13)` | Otter Creek | white, 7.4 to 1 |
| 29 | `#456262` | `oklch(47.26% 0.0338 196.51)` | Brochantite Green | white, 6.6 to 1 |
| 30 | `#4f6965` | `oklch(49.81% 0.0307 185.68)` | Rookwood Sash Green | white, 5.9 to 1 |
| 31 | `#586e68` | `oklch(51.99% 0.0280 176.19)` | Aventurine | white, 5.4 to 1 |
| 32 | `#5f736b` | `oklch(53.54% 0.0262 169.61)` | Cameroon Green | white, 5 to 1 |

## CSS

```css
background: linear-gradient(225deg, #717b99 0.0%, #6c7794 3.2%, #65708e 6.5%, #5c6987 9.7%, #546180 12.9%, #4c5a79 16.1%, #455473 19.4%, #3f4e6d 22.6%, #394967 25.8%, #324361 29.0%, #2c3e5b 32.3%, #263754 35.5%, #1f304c 38.7%, #182944 41.9%, #12223c 45.2%, #0e1e37 48.4%, #0b1d35 51.6%, #0b1f36 54.8%, #0d233a 58.1%, #0f283e 61.3%, #122e42 64.5%, #163346 67.7%, #1a394a 71.0%, #203f4f 74.2%, #264653 77.4%, #2d4c58 80.6%, #33535b 83.9%, #3b5a5f 87.1%, #456262 90.3%, #4f6965 93.5%, #586e68 96.8%, #5f736b 100.0%);
background: linear-gradient(225deg in oklch, oklch(58.66% 0.0469 270.00) 0.0%, oklch(57.05% 0.0478 269.46) 3.2%, oklch(54.77% 0.0492 268.72) 6.5%, oklch(52.11% 0.0508 267.84) 9.7%, oklch(49.37% 0.0523 266.88) 12.9%, oklch(46.84% 0.0536 265.93) 16.1%, oklch(44.62% 0.0545 264.96) 19.4%, oklch(42.51% 0.0553 263.89) 22.6%, oklch(40.43% 0.0560 262.79) 25.8%, oklch(38.33% 0.0564 261.73) 29.0%, oklch(36.18% 0.0565 260.77) 32.3%, oklch(33.78% 0.0563 260.08) 35.5%, oklch(30.90% 0.0556 259.79) 38.7%, oklch(27.96% 0.0547 259.61) 41.9%, oklch(25.40% 0.0537 259.18) 45.2%, oklch(23.65% 0.0527 258.16) 48.4%, oklch(23.13% 0.0521 256.25) 51.6%, oklch(23.75% 0.0517 253.60) 54.8%, oklch(25.15% 0.0514 250.41) 58.1%, oklch(27.03% 0.0510 246.82) 61.3%, oklch(29.05% 0.0503 243.00) 64.5%, oklch(30.93% 0.0492 239.14) 67.7%, oklch(32.94% 0.0477 235.46) 71.0%, oklch(35.16% 0.0459 231.70) 74.2%, oklch(37.48% 0.0440 227.46) 77.4%, oklch(39.82% 0.0418 222.36) 80.6%, oklch(42.11% 0.0396 215.97) 83.9%, oklch(44.61% 0.0369 207.13) 87.1%, oklch(47.26% 0.0338 196.51) 90.3%, oklch(49.81% 0.0307 185.68) 93.5%, oklch(51.99% 0.0280 176.19) 96.8%, oklch(53.54% 0.0262 169.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.587 | 0.047 | 270 |
| 2 | 0.465 | 0.054 | 265.8 |
| 3 | 0.354 | 0.056 | 260.5 |
| 4 | 0.232 | 0.052 | 257.3 |
| 5 | 0.303 | 0.05 | 240.4 |
| 6 | 0.417 | 0.04 | 217.2 |
| 7 | 0.535 | 0.026 | 169.6 |

## In these collections

- [Blue gradients](https://grabient.com/blue-gradients)
- [Navy](https://grabient.com/navy)

## Other forms

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