# Navy hardware to khaki field gradient

Inky navy moves through steel blue and weathered blue-gray before warming into muted khaki and dry sand. The long diagonal ramp balances cool metal hardware with worn field fabric, using medium contrast and restrained color. It works for adventure branding, outdoor editorial design, a travel hero background, or practical apparel graphics.

- Also called: Complementary navy, gray and tan linear gradient
- Seed: `kWSBG2tpG-8kLvtcEi-6xa-A`
- Page: https://grabient.com/kWSBG2tpG-8kLvtcEi-6xa-A?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.8 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 | `#222a35` | `oklch(28.35% 0.0234 256.64)` | Sky Captain | white, 14.4 to 1 |
| 2 | `#242d39` | `oklch(29.51% 0.0257 255.97)` | Chimney Sweep | white, 13.8 to 1 |
| 3 | `#27313f` | `oklch(31.07% 0.0291 255.09)` | Blue-Black | white, 13.1 to 1 |
| 4 | `#293646` | `oklch(32.93% 0.0331 254.03)` | Tahitian Pearl | white, 12.2 to 1 |
| 5 | `#2c3c4e` | `oklch(34.98% 0.0374 252.86)` | Blue Fantastic | white, 11.2 to 1 |
| 6 | `#304256` | `oklch(37.15% 0.0415 251.61)` | Pi | white, 10.3 to 1 |
| 7 | `#33485d` | `oklch(39.34% 0.0449 250.33)` | Compass Blue | white, 9.4 to 1 |
| 8 | `#374e64` | `oklch(41.44% 0.0474 249.08)` | Rain Boots | white, 8.6 to 1 |
| 9 | `#3b536a` | `oklch(43.38% 0.0483 247.96)` | Plaudit | white, 7.9 to 1 |
| 10 | `#41596f` | `oklch(45.26% 0.0475 248.11)` | Infinite Deep Sea | white, 7.3 to 1 |
| 11 | `#475e74` | `oklch(47.13% 0.0454 249.33)` | Mountain River | white, 6.7 to 1 |
| 12 | `#4f6278` | `oklch(49.00% 0.0425 250.80)` | Loyalty | white, 6.2 to 1 |
| 13 | `#56687c` | `oklch(50.87% 0.0391 251.71)` | Fern Flower | white, 5.7 to 1 |
| 14 | `#5c6d80` | `oklch(52.75% 0.0359 251.25)` | China Blue | white, 5.3 to 1 |
| 15 | `#627384` | `oklch(54.64% 0.0333 248.58)` | Flintstone | white, 4.9 to 1 |
| 16 | `#667988` | `oklch(56.53% 0.0319 242.90)` | Metal Grey | black, 4.6 to 1 |
| 17 | `#697f8c` | `oklch(58.44% 0.0319 233.19)` | Citadel | black, 5 to 1 |
| 18 | `#6c878f` | `oklch(60.40% 0.0331 218.30)` | Shoreline | black, 5.4 to 1 |
| 19 | `#6f8e8f` | `oklch(62.39% 0.0351 199.54)` | Mineral Blue | black, 5.9 to 1 |
| 20 | `#75958d` | `oklch(64.39% 0.0378 178.52)` | Yucca | black, 6.4 to 1 |
| 21 | `#809b89` | `oklch(66.37% 0.0407 156.85)` | Parisian Patina | black, 6.9 to 1 |
| 22 | `#8da085` | `oklch(68.32% 0.0438 136.12)` | Fresh Sod | black, 7.4 to 1 |
| 23 | `#9ca383` | `oklch(70.20% 0.0467 117.96)` | Zebra Grass | black, 8 to 1 |
| 24 | `#a9a783` | `oklch(72.01% 0.0491 103.96)` | Neutral Green | black, 8.5 to 1 |
| 25 | `#b4aa86` | `oklch(73.76% 0.0511 94.90)` | Bayberry Wax | black, 9 to 1 |
| 26 | `#bdaf8a` | `oklch(75.55% 0.0530 89.18)` | Owl Manner Malt | black, 9.6 to 1 |
| 27 | `#c5b38e` | `oklch(77.34% 0.0549 86.06)` | Earthy Cane | black, 10.2 to 1 |
| 28 | `#ccb992` | `oklch(79.07% 0.0567 84.84)` | Veranda Hills | black, 10.8 to 1 |
| 29 | `#d1be95` | `oklch(80.68% 0.0584 84.85)` | Subtle Suede | black, 11.4 to 1 |
| 30 | `#d6c299` | `oklch(82.12% 0.0598 85.41)` | Grain Mill | black, 12 to 1 |
| 31 | `#dac69b` | `oklch(83.33% 0.0611 85.84)` | Straw Basket | black, 12.5 to 1 |
| 32 | `#dec99e` | `oklch(84.25% 0.0620 85.45)` | So Close | black, 12.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #222a35 0.0%, #242d39 3.2%, #27313f 6.5%, #293646 9.7%, #2c3c4e 12.9%, #304256 16.1%, #33485d 19.4%, #374e64 22.6%, #3b536a 25.8%, #41596f 29.0%, #475e74 32.3%, #4f6278 35.5%, #56687c 38.7%, #5c6d80 41.9%, #627384 45.2%, #667988 48.4%, #697f8c 51.6%, #6c878f 54.8%, #6f8e8f 58.1%, #75958d 61.3%, #809b89 64.5%, #8da085 67.7%, #9ca383 71.0%, #a9a783 74.2%, #b4aa86 77.4%, #bdaf8a 80.6%, #c5b38e 83.9%, #ccb992 87.1%, #d1be95 90.3%, #d6c299 93.5%, #dac69b 96.8%, #dec99e 100.0%);
background: linear-gradient(135deg in oklch, oklch(28.35% 0.0234 256.64) 0.0%, oklch(29.51% 0.0257 255.97) 3.2%, oklch(31.07% 0.0291 255.09) 6.5%, oklch(32.93% 0.0331 254.03) 9.7%, oklch(34.98% 0.0374 252.86) 12.9%, oklch(37.15% 0.0415 251.61) 16.1%, oklch(39.34% 0.0449 250.33) 19.4%, oklch(41.44% 0.0474 249.08) 22.6%, oklch(43.38% 0.0483 247.96) 25.8%, oklch(45.26% 0.0475 248.11) 29.0%, oklch(47.13% 0.0454 249.33) 32.3%, oklch(49.00% 0.0425 250.80) 35.5%, oklch(50.87% 0.0391 251.71) 38.7%, oklch(52.75% 0.0359 251.25) 41.9%, oklch(54.64% 0.0333 248.58) 45.2%, oklch(56.53% 0.0319 242.90) 48.4%, oklch(58.44% 0.0319 233.19) 51.6%, oklch(60.40% 0.0331 218.30) 54.8%, oklch(62.39% 0.0351 199.54) 58.1%, oklch(64.39% 0.0378 178.52) 61.3%, oklch(66.37% 0.0407 156.85) 64.5%, oklch(68.32% 0.0438 136.12) 67.7%, oklch(70.20% 0.0467 117.96) 71.0%, oklch(72.01% 0.0491 103.96) 74.2%, oklch(73.76% 0.0511 94.90) 77.4%, oklch(75.55% 0.0530 89.18) 80.6%, oklch(77.34% 0.0549 86.06) 83.9%, oklch(79.07% 0.0567 84.84) 87.1%, oklch(80.68% 0.0584 84.85) 90.3%, oklch(82.12% 0.0598 85.41) 93.5%, oklch(83.33% 0.0611 85.84) 96.8%, oklch(84.25% 0.0620 85.45) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.283 | 0.023 | 256.6 |
| 2 | 0.429 | 0.048 | 248.2 |
| 3 | 0.575 | 0.032 | 238.7 |
| 4 | 0.724 | 0.05 | 101.3 |
| 5 | 0.843 | 0.062 | 85.4 |

## In these collections

- [Khaki coded](https://grabient.com/khaki-coded)

## Other forms

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