# Khaki Field Canopy

Across the frame, the continuous gradient moves through orange, deep green, deep green, muted gray, and gold. The lighter colors offer relief while the deeper colors support legible pale type and clear focal marks.

- Also called: Brown, dark gray, dark green and gray linear gradient
- Seed: `kWdiIvKAfTzgUtVjj7mTBfAo`
- Page: https://grabient.com/kWdiIvKAfTzgUtVjj7mTBfAo?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: muted
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.5 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 | `#6c543d` | `oklch(46.46% 0.0469 66.09)` | Caraway Brown | white, 7 to 1 |
| 2 | `#625339` | `oklch(45.06% 0.0443 81.42)` | Longboat | white, 7.4 to 1 |
| 3 | `#535137` | `oklch(42.98% 0.0404 103.89)` | Amazon Depths | white, 8 to 1 |
| 4 | `#424d39` | `oklch(40.49% 0.0358 130.76)` | Hōjicha | white, 8.9 to 1 |
| 5 | `#34473c` | `oklch(37.86% 0.0309 159.28)` | Government Green | white, 9.9 to 1 |
| 6 | `#2c403e` | `oklch(35.38% 0.0264 186.71)` | Liquorice Green | white, 10.9 to 1 |
| 7 | `#283a3d` | `oklch(33.30% 0.0229 210.31)` | Far Away Grey | white, 11.9 to 1 |
| 8 | `#28353b` | `oklch(31.92% 0.0209 227.32)` | Dracula Orchid | white, 12.6 to 1 |
| 9 | `#27333b` | `oklch(31.48% 0.0209 235.10)` | Blue-Black | white, 12.8 to 1 |
| 10 | `#26343c` | `oklch(31.73% 0.0235 233.86)` | Petrol Slumber | white, 12.7 to 1 |
| 11 | `#24373f` | `oklch(32.49% 0.0280 225.82)` | Petrol Slumber | white, 12.3 to 1 |
| 12 | `#213c42` | `oklch(33.73% 0.0338 212.84)` | Sunken Harbour | white, 11.7 to 1 |
| 13 | `#204243` | `oklch(35.39% 0.0402 196.84)` | Pine Hollow | white, 10.9 to 1 |
| 14 | `#224942` | `oklch(37.46% 0.0464 179.70)` | Dancing Crocodiles | white, 9.9 to 1 |
| 15 | `#2b503f` | `oklch(39.88% 0.0517 163.31)` | Hunt Club | white, 9 to 1 |
| 16 | `#38573e` | `oklch(42.62% 0.0555 149.58)` | O’Neal Green | white, 8 to 1 |
| 17 | `#475f41` | `oklch(45.80% 0.0569 139.68)` | Bavarian | white, 7 to 1 |
| 18 | `#596a48` | `oklch(50.16% 0.0564 130.69)` | Silverbeet | white, 5.8 to 1 |
| 19 | `#6d7854` | `oklch(55.40% 0.0545 122.13)` | Kariyasu Green | white, 4.6 to 1 |
| 20 | `#828763` | `oklch(61.04% 0.0516 114.15)` | Green Bush | black, 5.6 to 1 |
| 21 | `#979774` | `oklch(66.61% 0.0485 106.91)` | Silk Road | black, 6.9 to 1 |
| 22 | `#a9a584` | `oklch(71.61% 0.0456 100.57)` | Neutral Green | black, 8.3 to 1 |
| 23 | `#b8b091` | `oklch(75.58% 0.0434 95.28)` | Heathered Grey | black, 9.6 to 1 |
| 24 | `#c1b799` | `oklch(78.03% 0.0426 91.21)` | Distant Valley | black, 10.5 to 1 |
| 25 | `#c4b89a` | `oklch(78.56% 0.0435 88.66)` | Distant Valley | black, 10.7 to 1 |
| 26 | `#c2b495` | `oklch(77.37% 0.0457 87.88)` | Palisade | black, 10.2 to 1 |
| 27 | `#baad8b` | `oklch(74.92% 0.0488 88.46)` | Pavlova | black, 9.4 to 1 |
| 28 | `#b0a37e` | `oklch(71.67% 0.0524 89.97)` | Woollen Vest | black, 8.3 to 1 |
| 29 | `#a59871` | `oklch(68.08% 0.0562 91.98)` | Tallow | black, 7.3 to 1 |
| 30 | `#9a8e64` | `oklch(64.61% 0.0598 94.07)` | Tate Olive | black, 6.4 to 1 |
| 31 | `#908559` | `oklch(61.71% 0.0627 95.79)` | Mountain Olive | black, 5.7 to 1 |
| 32 | `#8b8053` | `oklch(59.84% 0.0648 96.74)` | Aged Eucalyptus | black, 5.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #6c543d 0.0%, #625339 3.2%, #535137 6.5%, #424d39 9.7%, #34473c 12.9%, #2c403e 16.1%, #283a3d 19.4%, #28353b 22.6%, #27333b 25.8%, #26343c 29.0%, #24373f 32.3%, #213c42 35.5%, #204243 38.7%, #224942 41.9%, #2b503f 45.2%, #38573e 48.4%, #475f41 51.6%, #596a48 54.8%, #6d7854 58.1%, #828763 61.3%, #979774 64.5%, #a9a584 67.7%, #b8b091 71.0%, #c1b799 74.2%, #c4b89a 77.4%, #c2b495 80.6%, #baad8b 83.9%, #b0a37e 87.1%, #a59871 90.3%, #9a8e64 93.5%, #908559 96.8%, #8b8053 100.0%);
background: linear-gradient(90deg in oklch, oklch(46.46% 0.0469 66.09) 0.0%, oklch(45.06% 0.0443 81.42) 3.2%, oklch(42.98% 0.0404 103.89) 6.5%, oklch(40.49% 0.0358 130.76) 9.7%, oklch(37.86% 0.0309 159.28) 12.9%, oklch(35.38% 0.0264 186.71) 16.1%, oklch(33.30% 0.0229 210.31) 19.4%, oklch(31.92% 0.0209 227.32) 22.6%, oklch(31.48% 0.0209 235.10) 25.8%, oklch(31.73% 0.0235 233.86) 29.0%, oklch(32.49% 0.0280 225.82) 32.3%, oklch(33.73% 0.0338 212.84) 35.5%, oklch(35.39% 0.0402 196.84) 38.7%, oklch(37.46% 0.0464 179.70) 41.9%, oklch(39.88% 0.0517 163.31) 45.2%, oklch(42.62% 0.0555 149.58) 48.4%, oklch(45.80% 0.0569 139.68) 51.6%, oklch(50.16% 0.0564 130.69) 54.8%, oklch(55.40% 0.0545 122.13) 58.1%, oklch(61.04% 0.0516 114.15) 61.3%, oklch(66.61% 0.0485 106.91) 64.5%, oklch(71.61% 0.0456 100.57) 67.7%, oklch(75.58% 0.0434 95.28) 71.0%, oklch(78.03% 0.0426 91.21) 74.2%, oklch(78.56% 0.0435 88.66) 77.4%, oklch(77.37% 0.0457 87.88) 80.6%, oklch(74.92% 0.0488 88.46) 83.9%, oklch(71.67% 0.0524 89.97) 87.1%, oklch(68.08% 0.0562 91.98) 90.3%, oklch(64.61% 0.0598 94.07) 93.5%, oklch(61.71% 0.0627 95.79) 96.8%, oklch(59.84% 0.0648 96.74) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.465 | 0.047 | 66.1 |
| 2 | 0.315 | 0.021 | 234.1 |
| 3 | 0.441 | 0.056 | 144.3 |
| 4 | 0.783 | 0.043 | 90.4 |
| 5 | 0.598 | 0.065 | 96.7 |

## In these collections

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

## Other forms

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