# Complementary navy, gray and beige linear gradient

Complementary navy, gray and beige linear gradient with 32 colors: #001354, #001662, #011975, #0c287b, #1b3582, #294389, #36508f, #425c95, #4c679a, #56729f, #617da3, #6c88a7, #7892aa, #839cae, #8fa5b2, #99adb6, #a2b5ba, #aabcbf, #b1c4c3, #b7cac6, #bdd1c7, #c4d6c8, #cbdbc8, #d2dec8, #d8e2c9, #dde4ca, #e1e7ca, #e4e9ca, #e6eaca, #e8ecca, #e9edc9, #eaeec9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWO327QKC_98IuzxDDTdxG94`
- Page: https://grabient.com/kWO327QKC_98IuzxDDTdxG94?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light, pastel
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 14.3 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 | `#001354` | `oklch(23.25% 0.1190 263.15)` | Interstellar Blue | white, 17.1 to 1 |
| 2 | `#001662` | `oklch(25.48% 0.1341 263.39)` | Atlantic Depths | white, 16.2 to 1 |
| 3 | `#011975` | `oklch(28.47% 0.1564 263.96)` | Major Tom | white, 14.9 to 1 |
| 4 | `#0c287b` | `oklch(32.06% 0.1455 264.81)` | Catalina Blue | white, 13.1 to 1 |
| 5 | `#1b3582` | `oklch(36.02% 0.1335 265.56)` | Bavarian Blue | white, 11.1 to 1 |
| 6 | `#294389` | `oklch(40.15% 0.1210 265.93)` | Blue Oblivion | white, 9.3 to 1 |
| 7 | `#36508f` | `oklch(44.26% 0.1087 265.69)` | Chinese Blue | white, 7.8 to 1 |
| 8 | `#425c95` | `oklch(48.14% 0.0973 264.55)` | Integra | white, 6.5 to 1 |
| 9 | `#4c679a` | `oklch(51.62% 0.0871 262.31)` | Blue Odyssey | white, 5.6 to 1 |
| 10 | `#56729f` | `oklch(54.97% 0.0771 259.36)` | Cobalt Flame | white, 4.8 to 1 |
| 11 | `#617da3` | `oklch(58.31% 0.0669 255.86)` | Smoky Violet | black, 4.9 to 1 |
| 12 | `#6c88a7` | `oklch(61.61% 0.0568 251.72)` | Pale Flower | black, 5.7 to 1 |
| 13 | `#7892aa` | `oklch(64.82% 0.0472 246.85)` | Identity | black, 6.4 to 1 |
| 14 | `#839cae` | `oklch(67.91% 0.0386 241.17)` | Tsunami | black, 7.3 to 1 |
| 15 | `#8fa5b2` | `oklch(70.83% 0.0312 234.58)` | Blue Skylights | black, 8.1 to 1 |
| 16 | `#99adb6` | `oklch(73.54% 0.0255 227.00)` | Smoke on the Water | black, 9 to 1 |
| 17 | `#a2b5ba` | `oklch(76.01% 0.0219 218.12)` | Shark Loop | black, 9.8 to 1 |
| 18 | `#aabcbf` | `oklch(78.31% 0.0204 206.84)` | Grey Grain | black, 10.6 to 1 |
| 19 | `#b1c4c3` | `oklch(80.44% 0.0207 193.74)` | Jungle Mist | black, 11.5 to 1 |
| 20 | `#b7cac6` | `oklch(82.40% 0.0223 179.68)` | Sea Sprite | black, 12.3 to 1 |
| 21 | `#bdd1c7` | `oklch(84.20% 0.0248 165.50)` | Moon Glass | black, 13 to 1 |
| 22 | `#c4d6c8` | `oklch(85.85% 0.0276 152.04)` | New Moss | black, 13.7 to 1 |
| 23 | `#cbdbc8` | `oklch(87.33% 0.0304 140.14)` | Mystified | black, 14.4 to 1 |
| 24 | `#d2dec8` | `oklch(88.67% 0.0326 130.66)` | Supreme Green | black, 15 to 1 |
| 25 | `#d8e2c9` | `oklch(89.83% 0.0344 124.01)` | Lacewing | black, 15.6 to 1 |
| 26 | `#dde4ca` | `oklch(90.78% 0.0364 119.39)` | Misty Hillside | black, 16 to 1 |
| 27 | `#e1e7ca` | `oklch(91.54% 0.0387 116.38)` | Origami Clover | black, 16.4 to 1 |
| 28 | `#e4e9ca` | `oklch(92.16% 0.0410 114.59)` | Sylvan Green | black, 16.7 to 1 |
| 29 | `#e6eaca` | `oklch(92.65% 0.0432 113.63)` | Sylvan Green | black, 17 to 1 |
| 30 | `#e8ecca` | `oklch(93.05% 0.0453 113.11)` | Honeydew Melon | black, 17.2 to 1 |
| 31 | `#e9edc9` | `oklch(93.39% 0.0470 112.65)` | Honey Do | black, 17.4 to 1 |
| 32 | `#eaeec9` | `oklch(93.70% 0.0482 111.85)` | Honey Do | black, 17.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #001354 0.0%, #001662 3.2%, #011975 6.5%, #0c287b 9.7%, #1b3582 12.9%, #294389 16.1%, #36508f 19.4%, #425c95 22.6%, #4c679a 25.8%, #56729f 29.0%, #617da3 32.3%, #6c88a7 35.5%, #7892aa 38.7%, #839cae 41.9%, #8fa5b2 45.2%, #99adb6 48.4%, #a2b5ba 51.6%, #aabcbf 54.8%, #b1c4c3 58.1%, #b7cac6 61.3%, #bdd1c7 64.5%, #c4d6c8 67.7%, #cbdbc8 71.0%, #d2dec8 74.2%, #d8e2c9 77.4%, #dde4ca 80.6%, #e1e7ca 83.9%, #e4e9ca 87.1%, #e6eaca 90.3%, #e8ecca 93.5%, #e9edc9 96.8%, #eaeec9 100.0%);
background: linear-gradient(90deg in oklch, oklch(23.25% 0.1190 263.15) 0.0%, oklch(25.48% 0.1341 263.39) 3.2%, oklch(28.47% 0.1564 263.96) 6.5%, oklch(32.06% 0.1455 264.81) 9.7%, oklch(36.02% 0.1335 265.56) 12.9%, oklch(40.15% 0.1210 265.93) 16.1%, oklch(44.26% 0.1087 265.69) 19.4%, oklch(48.14% 0.0973 264.55) 22.6%, oklch(51.62% 0.0871 262.31) 25.8%, oklch(54.97% 0.0771 259.36) 29.0%, oklch(58.31% 0.0669 255.86) 32.3%, oklch(61.61% 0.0568 251.72) 35.5%, oklch(64.82% 0.0472 246.85) 38.7%, oklch(67.91% 0.0386 241.17) 41.9%, oklch(70.83% 0.0312 234.58) 45.2%, oklch(73.54% 0.0255 227.00) 48.4%, oklch(76.01% 0.0219 218.12) 51.6%, oklch(78.31% 0.0204 206.84) 54.8%, oklch(80.44% 0.0207 193.74) 58.1%, oklch(82.40% 0.0223 179.68) 61.3%, oklch(84.20% 0.0248 165.50) 64.5%, oklch(85.85% 0.0276 152.04) 67.7%, oklch(87.33% 0.0304 140.14) 71.0%, oklch(88.67% 0.0326 130.66) 74.2%, oklch(89.83% 0.0344 124.01) 77.4%, oklch(90.78% 0.0364 119.39) 80.6%, oklch(91.54% 0.0387 116.38) 83.9%, oklch(92.16% 0.0410 114.59) 87.1%, oklch(92.65% 0.0432 113.63) 90.3%, oklch(93.05% 0.0453 113.11) 93.5%, oklch(93.39% 0.0470 112.65) 96.8%, oklch(93.70% 0.0482 111.85) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.232 | 0.172 | 263 |
| 2 | 0.508 | 0.09 | 263 |
| 3 | 0.748 | 0.023 | 222.8 |
| 4 | 0.89 | 0.033 | 128.8 |
| 5 | 0.937 | 0.048 | 111.9 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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