# Steel Blue Reflected Light

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

- Also called: Navy, gray, light blue and blue linear gradient
- Seed: `kUMii68gw8CUhQ_GNj5g`
- Page: https://grabient.com/kUMii68gw8CUhQ_GNj5g?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#07142e` | `oklch(19.69% 0.0551 262.27)` | Squid’s Ink | white, 18.2 to 1 |
| 2 | `#101f39` | `oklch(24.25% 0.0535 260.11)` | Nightwalker | white, 16.3 to 1 |
| 3 | `#1f3049` | `oklch(30.81% 0.0510 256.98)` | Manganese Black | white, 13.2 to 1 |
| 4 | `#32465e` | `oklch(38.82% 0.0479 253.16)` | Spelunking | white, 9.6 to 1 |
| 5 | `#495f75` | `oklch(47.72% 0.0445 248.91)` | Mountain River | white, 6.5 to 1 |
| 6 | `#637a8e` | `oklch(56.98% 0.0410 244.50)` | Canyon Blue | black, 4.7 to 1 |
| 7 | `#7e96a8` | `oklch(66.04% 0.0378 240.21)` | Storm Petrel | black, 6.8 to 1 |
| 8 | `#98b0c0` | `oklch(74.36% 0.0350 236.30)` | Cloudless Day | black, 9.2 to 1 |
| 9 | `#aec6d4` | `oklch(81.40% 0.0331 233.04)` | Twinkle | black, 11.8 to 1 |
| 10 | `#bfd7e4` | `oklch(86.61% 0.0322 230.71)` | Bridgewater Bay | black, 14 to 1 |
| 11 | `#c7e1ee` | `oklch(89.44% 0.0326 229.57)` | Pale Frost | black, 15.4 to 1 |
| 12 | `#c6e1ef` | `oklch(89.37% 0.0345 229.90)` | Pale Frost | black, 15.3 to 1 |
| 13 | `#bbd8e7` | `oklch(86.45% 0.0379 231.69)` | Watercolour Sky | black, 14 to 1 |
| 14 | `#a8c7da` | `oklch(81.26% 0.0423 234.65)` | Sonata | black, 11.8 to 1 |
| 15 | `#91b1c7` | `oklch(74.38% 0.0477 238.48)` | Porcelain Vase | black, 9.3 to 1 |
| 16 | `#7798b2` | `oklch(66.41% 0.0538 242.86)` | Splendid Blue | black, 6.9 to 1 |
| 17 | `#5d7e9c` | `oklch(57.94% 0.0603 247.48)` | Goddess of the Nile | black, 4.9 to 1 |
| 18 | `#456487` | `oklch(49.56% 0.0672 252.05)` | French Mirage Blue | white, 6 to 1 |
| 19 | `#314e75` | `oklch(41.86% 0.0740 256.25)` | Airforce | white, 8.5 to 1 |
| 20 | `#213b65` | `oklch(35.43% 0.0807 259.78)` | Navy Peony | white, 11.1 to 1 |
| 21 | `#162e5b` | `oklch(30.85% 0.0871 262.32)` | Ambassador Blue | white, 13.3 to 1 |
| 22 | `#112758` | `oklch(28.68% 0.0928 263.61)` | Fibonacci Blue | white, 14.4 to 1 |
| 23 | `#0f255a` | `oklch(28.44% 0.0988 263.87)` | Fibonacci Blue | white, 14.6 to 1 |
| 24 | `#0f2860` | `oklch(29.65% 0.1052 263.36)` | Blue Leviathan | white, 14 to 1 |
| 25 | `#102e6b` | `oklch(32.02% 0.1117 262.23)` | Deep Sea Dream | white, 12.9 to 1 |
| 26 | `#123777` | `oklch(35.23% 0.1182 260.64)` | Azure Dragon | white, 11.3 to 1 |
| 27 | `#144286` | `oklch(38.99% 0.1245 258.77)` | Pacific Depths | white, 9.7 to 1 |
| 28 | `#164e95` | `oklch(42.97% 0.1306 256.76)` | Yale Blue | white, 8.2 to 1 |
| 29 | `#175aa4` | `oklch(46.88% 0.1362 254.79)` | Miracle at Wrigley | white, 6.9 to 1 |
| 30 | `#1865b2` | `oklch(50.42% 0.1413 253.00)` | Ephren Blue | white, 5.9 to 1 |
| 31 | `#186ebd` | `oklch(53.26% 0.1455 251.56)` | Beautiful Blue | white, 5.2 to 1 |
| 32 | `#1774c5` | `oklch(55.12% 0.1488 250.64)` | Science Blue | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #07142e 0.0%, #101f39 3.2%, #1f3049 6.5%, #32465e 9.7%, #495f75 12.9%, #637a8e 16.1%, #7e96a8 19.4%, #98b0c0 22.6%, #aec6d4 25.8%, #bfd7e4 29.0%, #c7e1ee 32.3%, #c6e1ef 35.5%, #bbd8e7 38.7%, #a8c7da 41.9%, #91b1c7 45.2%, #7798b2 48.4%, #5d7e9c 51.6%, #456487 54.8%, #314e75 58.1%, #213b65 61.3%, #162e5b 64.5%, #112758 67.7%, #0f255a 71.0%, #0f2860 74.2%, #102e6b 77.4%, #123777 80.6%, #144286 83.9%, #164e95 87.1%, #175aa4 90.3%, #1865b2 93.5%, #186ebd 96.8%, #1774c5 100.0%);
background: linear-gradient(180deg in oklch, oklch(19.69% 0.0551 262.27) 0.0%, oklch(24.25% 0.0535 260.11) 3.2%, oklch(30.81% 0.0510 256.98) 6.5%, oklch(38.82% 0.0479 253.16) 9.7%, oklch(47.72% 0.0445 248.91) 12.9%, oklch(56.98% 0.0410 244.50) 16.1%, oklch(66.04% 0.0378 240.21) 19.4%, oklch(74.36% 0.0350 236.30) 22.6%, oklch(81.40% 0.0331 233.04) 25.8%, oklch(86.61% 0.0322 230.71) 29.0%, oklch(89.44% 0.0326 229.57) 32.3%, oklch(89.37% 0.0345 229.90) 35.5%, oklch(86.45% 0.0379 231.69) 38.7%, oklch(81.26% 0.0423 234.65) 41.9%, oklch(74.38% 0.0477 238.48) 45.2%, oklch(66.41% 0.0538 242.86) 48.4%, oklch(57.94% 0.0603 247.48) 51.6%, oklch(49.56% 0.0672 252.05) 54.8%, oklch(41.86% 0.0740 256.25) 58.1%, oklch(35.43% 0.0807 259.78) 61.3%, oklch(30.85% 0.0871 262.32) 64.5%, oklch(28.68% 0.0928 263.61) 67.7%, oklch(28.44% 0.0988 263.87) 71.0%, oklch(29.65% 0.1052 263.36) 74.2%, oklch(32.02% 0.1117 262.23) 77.4%, oklch(35.23% 0.1182 260.64) 80.6%, oklch(38.99% 0.1245 258.77) 83.9%, oklch(42.97% 0.1306 256.76) 87.1%, oklch(46.88% 0.1362 254.79) 90.3%, oklch(50.42% 0.1413 253.00) 93.5%, oklch(53.26% 0.1455 251.56) 96.8%, oklch(55.12% 0.1488 250.64) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.197 | 0.055 | 262.3 |
| 2 | 0.898 | 0.033 | 229.5 |
| 3 | 0.291 | 0.091 | 263.3 |
| 4 | 0.551 | 0.149 | 250.6 |

## In these collections

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

## Other forms

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