# Navy, silver and tan color palette

The Navy, silver and tan color palette brings together dark blue, blue, gray, off-white, and orange. The colors span a very broad lightness range, combining restrained 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 off-white.

- Also called: Complementary navy, gray and brown linear gradient
- Seed: `kaNha_KQ-_b8Mv5Yhb2dQKwNyUPW3jb5g`
- Page: https://grabient.com/kaNha_KQ-_b8Mv5Yhb2dQKwNyUPW3jb5g?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, neutral
- Hues: complementary
- Contrast of its darkest and lightest colors: 13.9 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 | `#131827` | `oklch(21.26% 0.0303 268.59)` | Sambucus | white, 17.6 to 1 |
| 2 | `#151b2b` | `oklch(22.60% 0.0322 268.03)` | Sambucus | white, 17 to 1 |
| 3 | `#192031` | `oklch(24.44% 0.0352 267.22)` | Hēi Sè Black | white, 16.2 to 1 |
| 4 | `#1d2538` | `oklch(26.65% 0.0383 266.28)` | Midnight Express | white, 15.2 to 1 |
| 5 | `#222b40` | `oklch(29.15% 0.0411 265.33)` | Spinel Stone Black | white, 14 to 1 |
| 6 | `#273248` | `oklch(31.83% 0.0426 264.49)` | Ahoy | white, 12.8 to 1 |
| 7 | `#2e3a50` | `oklch(34.69% 0.0427 263.98)` | Biscay | white, 11.4 to 1 |
| 8 | `#374259` | `oklch(37.85% 0.0418 263.85)` | Soulful | white, 10 to 1 |
| 9 | `#404b61` | `oklch(41.24% 0.0401 263.72)` | Luna Pier | white, 8.7 to 1 |
| 10 | `#4a556a` | `oklch(44.78% 0.0379 263.19)` | Snoop | white, 7.5 to 1 |
| 11 | `#545f73` | `oklch(48.40% 0.0353 261.88)` | Da Blues | white, 6.4 to 1 |
| 12 | `#5e6a7c` | `oklch(52.05% 0.0324 260.25)` | Spinning Blue | white, 5.4 to 1 |
| 13 | `#6a7585` | `oklch(55.80% 0.0287 259.96)` | Cypress Grey Blue | white, 4.6 to 1 |
| 14 | `#77808e` | `oklch(59.65% 0.0244 259.14)` | Blue Mood | black, 5.2 to 1 |
| 15 | `#838c97` | `oklch(63.60% 0.0203 255.72)` | River Tour | black, 6.1 to 1 |
| 16 | `#8f98a1` | `oklch(67.64% 0.0166 247.60)` | Thunderstorm | black, 7.2 to 1 |
| 17 | `#9ca6ac` | `oklch(71.94% 0.0137 232.22)` | Celestra Grey | black, 8.4 to 1 |
| 18 | `#aeb7b8` | `oklch(77.28% 0.0103 207.38)` | Autumn Fog | black, 10.2 to 1 |
| 19 | `#c2c8c7` | `oklch(82.91% 0.0070 177.21)` | Solitary State | black, 12.4 to 1 |
| 20 | `#d5d8d5` | `oklch(87.89% 0.0050 146.61)` | Windchill | black, 14.6 to 1 |
| 21 | `#e1e3df` | `oklch(91.26% 0.0051 120.49)` | Beryl Pearl | black, 16.2 to 1 |
| 22 | `#e6e5df` | `oklch(92.08% 0.0085 103.43)` | Puffy Pillow | black, 16.6 to 1 |
| 23 | `#e3dfd3` | `oklch(90.35% 0.0170 94.35)` | Oyster Haze | black, 15.7 to 1 |
| 24 | `#dbd3bf` | `oklch(86.80% 0.0285 90.34)` | Silica | black, 14 to 1 |
| 25 | `#cfc4a7` | `oklch(82.10% 0.0406 89.16)` | Cyrus Grass | black, 12 to 1 |
| 26 | `#c1b390` | `oklch(76.96% 0.0505 88.54)` | Trailblazer | black, 10.1 to 1 |
| 27 | `#b4a37d` | `oklch(72.03% 0.0555 86.29)` | Paper Sack | black, 8.4 to 1 |
| 28 | `#a4916d` | `oklch(66.35% 0.0552 83.15)` | Natural Bridge | black, 6.8 to 1 |
| 29 | `#907d5d` | `oklch(59.83% 0.0514 80.27)` | Prairie Grove | black, 5.2 to 1 |
| 30 | `#7c6a4f` | `oklch(53.31% 0.0459 77.75)` | Greyish Brown | white, 5.2 to 1 |
| 31 | `#6a5a43` | `oklch(47.65% 0.0405 75.68)` | Cummings Oak | white, 6.6 to 1 |
| 32 | `#5e4f3b` | `oklch(43.70% 0.0372 74.15)` | Oak Plank | white, 7.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #131827 0.0%, #151b2b 3.2%, #192031 6.5%, #1d2538 9.7%, #222b40 12.9%, #273248 16.1%, #2e3a50 19.4%, #374259 22.6%, #404b61 25.8%, #4a556a 29.0%, #545f73 32.3%, #5e6a7c 35.5%, #6a7585 38.7%, #77808e 41.9%, #838c97 45.2%, #8f98a1 48.4%, #9ca6ac 51.6%, #aeb7b8 54.8%, #c2c8c7 58.1%, #d5d8d5 61.3%, #e1e3df 64.5%, #e6e5df 67.7%, #e3dfd3 71.0%, #dbd3bf 74.2%, #cfc4a7 77.4%, #c1b390 80.6%, #b4a37d 83.9%, #a4916d 87.1%, #907d5d 90.3%, #7c6a4f 93.5%, #6a5a43 96.8%, #5e4f3b 100.0%);
background: linear-gradient(135deg in oklch, oklch(21.26% 0.0303 268.59) 0.0%, oklch(22.60% 0.0322 268.03) 3.2%, oklch(24.44% 0.0352 267.22) 6.5%, oklch(26.65% 0.0383 266.28) 9.7%, oklch(29.15% 0.0411 265.33) 12.9%, oklch(31.83% 0.0426 264.49) 16.1%, oklch(34.69% 0.0427 263.98) 19.4%, oklch(37.85% 0.0418 263.85) 22.6%, oklch(41.24% 0.0401 263.72) 25.8%, oklch(44.78% 0.0379 263.19) 29.0%, oklch(48.40% 0.0353 261.88) 32.3%, oklch(52.05% 0.0324 260.25) 35.5%, oklch(55.80% 0.0287 259.96) 38.7%, oklch(59.65% 0.0244 259.14) 41.9%, oklch(63.60% 0.0203 255.72) 45.2%, oklch(67.64% 0.0166 247.60) 48.4%, oklch(71.94% 0.0137 232.22) 51.6%, oklch(77.28% 0.0103 207.38) 54.8%, oklch(82.91% 0.0070 177.21) 58.1%, oklch(87.89% 0.0050 146.61) 61.3%, oklch(91.26% 0.0051 120.49) 64.5%, oklch(92.08% 0.0085 103.43) 67.7%, oklch(90.35% 0.0170 94.35) 71.0%, oklch(86.80% 0.0285 90.34) 74.2%, oklch(82.10% 0.0406 89.16) 77.4%, oklch(76.96% 0.0505 88.54) 80.6%, oklch(72.03% 0.0555 86.29) 83.9%, oklch(66.35% 0.0552 83.15) 87.1%, oklch(59.83% 0.0514 80.27) 90.3%, oklch(53.31% 0.0459 77.75) 93.5%, oklch(47.65% 0.0405 75.68) 96.8%, oklch(43.70% 0.0372 74.15) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.03 | 268.6 |
| 2 | 0.323 | 0.043 | 264.4 |
| 3 | 0.496 | 0.034 | 261.2 |
| 4 | 0.697 | 0.015 | 241.1 |
| 5 | 0.921 | 0.007 | 108 |
| 6 | 0.728 | 0.055 | 86.8 |
| 7 | 0.437 | 0.037 | 74.2 |

## In these collections

- [Silver gradients](https://grabient.com/silver-gradients)
- [Metallic gradients](https://grabient.com/metallic-gradients)
- [Zoom background gradients](https://grabient.com/zoom-background-gradients)
- [Chrome gradients](https://grabient.com/chrome-gradients)

## Other forms

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