# Khaki Field Twilight

From the center outward, the continuous gradient moves through deep aqua, deep teal, deep green, olive, gold, cream, gold, orange, gold, and orange. The lighter colors offer relief while the deeper colors support legible pale type and clear focal marks.

- Also called: Dark gray, gray and brown linear gradient
- Seed: `kWUA-mwZaxuOPvVcG7_wR07A`
- Page: https://grabient.com/kWUA-mwZaxuOPvVcG7_wR07A?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.7 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 | `#27333b` | `oklch(31.50% 0.0207 234.14)` | Blue-Black | white, 12.8 to 1 |
| 2 | `#28383f` | `oklch(33.06% 0.0244 223.78)` | Electromagnetic | white, 12.1 to 1 |
| 3 | `#283f43` | `oklch(35.09% 0.0299 209.18)` | Liquorice Green | white, 11.1 to 1 |
| 4 | `#294746` | `oklch(37.50% 0.0364 191.75)` | Platoon Green | white, 10 to 1 |
| 5 | `#2e5046` | `oklch(40.21% 0.0434 172.91)` | Highland Green | white, 8.9 to 1 |
| 6 | `#3a5844` | `oklch(43.14% 0.0501 154.05)` | O’Neal Green | white, 7.8 to 1 |
| 7 | `#4a6041` | `oklch(46.19% 0.0560 136.60)` | Acacia Green | white, 6.9 to 1 |
| 8 | `#5b6740` | `oklch(49.28% 0.0602 121.96)` | Golfer Green | white, 6 to 1 |
| 9 | `#6b6e43` | `oklch(52.35% 0.0623 111.46)` | Gulf Weed | white, 5.3 to 1 |
| 10 | `#7a764b` | `oklch(55.87% 0.0618 104.27)` | Tree Hugger | white, 4.6 to 1 |
| 11 | `#888157` | `oklch(59.84% 0.0593 99.38)` | Aged Eucalyptus | black, 5.3 to 1 |
| 12 | `#968d66` | `oklch(64.00% 0.0555 96.28)` | Tate Olive | black, 6.2 to 1 |
| 13 | `#a39975` | `oklch(68.10% 0.0513 94.50)` | Tallow | black, 7.3 to 1 |
| 14 | `#aea483` | `oklch(71.89% 0.0472 93.53)` | Woollen Vest | black, 8.4 to 1 |
| 15 | `#b8ae8f` | `oklch(75.12% 0.0441 92.89)` | Heathered Grey | black, 9.4 to 1 |
| 16 | `#bfb698` | `oklch(77.53% 0.0426 92.09)` | Distant Valley | black, 10.3 to 1 |
| 17 | `#c5ba9b` | `oklch(78.92% 0.0434 90.93)` | Beach Dune | black, 10.8 to 1 |
| 18 | `#c7bc9b` | `oklch(79.49% 0.0463 90.70)` | Fields Afar | black, 11 to 1 |
| 19 | `#c8bb97` | `oklch(79.40% 0.0505 91.29)` | Stone Guardians | black, 11 to 1 |
| 20 | `#c6b991` | `oklch(78.76% 0.0557 92.28)` | Earth Friendly | black, 10.7 to 1 |
| 21 | `#c3b68a` | `oklch(77.67% 0.0613 93.26)` | Modish Moss | black, 10.3 to 1 |
| 22 | `#c0b281` | `oklch(76.26% 0.0667 93.83)` | Ecru | black, 9.8 to 1 |
| 23 | `#bcac78` | `oklch(74.62% 0.0715 93.58)` | Chicory Green | black, 9.3 to 1 |
| 24 | `#b8a670` | `oklch(72.88% 0.0751 92.09)` | Horn of Plenty | black, 8.7 to 1 |
| 25 | `#b59f68` | `oklch(70.90% 0.0773 88.94)` | Grainfield | black, 8.1 to 1 |
| 26 | `#b0955f` | `oklch(68.26% 0.0788 84.15)` | Edgy Gold | black, 7.3 to 1 |
| 27 | `#aa8a56` | `oklch(65.17% 0.0796 78.22)` | Golden Quartz Ochre | black, 6.4 to 1 |
| 28 | `#a47e4e` | `oklch(61.86% 0.0799 71.70)` | Tosty Crust | black, 5.6 to 1 |
| 29 | `#9d7247` | `oklch(58.57% 0.0800 65.12)` | Aged Whisky | black, 4.9 to 1 |
| 30 | `#966742` | `oklch(55.54% 0.0799 58.99)` | Gilded Glamour | white, 4.8 to 1 |
| 31 | `#905f3e` | `oklch(53.00% 0.0798 53.87)` | Carmel | white, 5.4 to 1 |
| 32 | `#8b583b` | `oklch(51.18% 0.0799 50.27)` | Brushwood | white, 5.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #27333b 0.0%, #28383f 3.2%, #283f43 6.5%, #294746 9.7%, #2e5046 12.9%, #3a5844 16.1%, #4a6041 19.4%, #5b6740 22.6%, #6b6e43 25.8%, #7a764b 29.0%, #888157 32.3%, #968d66 35.5%, #a39975 38.7%, #aea483 41.9%, #b8ae8f 45.2%, #bfb698 48.4%, #c5ba9b 51.6%, #c7bc9b 54.8%, #c8bb97 58.1%, #c6b991 61.3%, #c3b68a 64.5%, #c0b281 67.7%, #bcac78 71.0%, #b8a670 74.2%, #b59f68 77.4%, #b0955f 80.6%, #aa8a56 83.9%, #a47e4e 87.1%, #9d7247 90.3%, #966742 93.5%, #905f3e 96.8%, #8b583b 100.0%);
background: linear-gradient(135deg in oklch, oklch(31.50% 0.0207 234.14) 0.0%, oklch(33.06% 0.0244 223.78) 3.2%, oklch(35.09% 0.0299 209.18) 6.5%, oklch(37.50% 0.0364 191.75) 9.7%, oklch(40.21% 0.0434 172.91) 12.9%, oklch(43.14% 0.0501 154.05) 16.1%, oklch(46.19% 0.0560 136.60) 19.4%, oklch(49.28% 0.0602 121.96) 22.6%, oklch(52.35% 0.0623 111.46) 25.8%, oklch(55.87% 0.0618 104.27) 29.0%, oklch(59.84% 0.0593 99.38) 32.3%, oklch(64.00% 0.0555 96.28) 35.5%, oklch(68.10% 0.0513 94.50) 38.7%, oklch(71.89% 0.0472 93.53) 41.9%, oklch(75.12% 0.0441 92.89) 45.2%, oklch(77.53% 0.0426 92.09) 48.4%, oklch(78.92% 0.0434 90.93) 51.6%, oklch(79.49% 0.0463 90.70) 54.8%, oklch(79.40% 0.0505 91.29) 58.1%, oklch(78.76% 0.0557 92.28) 61.3%, oklch(77.67% 0.0613 93.26) 64.5%, oklch(76.26% 0.0667 93.83) 67.7%, oklch(74.62% 0.0715 93.58) 71.0%, oklch(72.88% 0.0751 92.09) 74.2%, oklch(70.90% 0.0773 88.94) 77.4%, oklch(68.26% 0.0788 84.15) 80.6%, oklch(65.17% 0.0796 78.22) 83.9%, oklch(61.86% 0.0799 71.70) 87.1%, oklch(58.57% 0.0800 65.12) 90.3%, oklch(55.54% 0.0799 58.99) 93.5%, oklch(53.00% 0.0798 53.87) 96.8%, oklch(51.18% 0.0799 50.27) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.315 | 0.021 | 234.1 |
| 2 | 0.516 | 0.062 | 113.7 |
| 3 | 0.783 | 0.043 | 91.5 |
| 4 | 0.724 | 0.076 | 91.5 |
| 5 | 0.512 | 0.08 | 50.3 |

## In these collections

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

## Other forms

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