# Navy to warm sand gradient

Complementary blue, gray and tan linear gradient with 14 colors: #253a70, #2b3e70, #354372, #464c74, #5a5a76, #6f697b, #877883, #9f8a89, #b29b8e, #c6ab94, #d8b798, #e2c19b, #e6c79e, #e8caa0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary blue, gray and tan linear gradient
- Seed: `kYXEa9NJrA0UJw9Yi8wZ5ZCOyXwO`
- Page: https://grabient.com/kYXEa9NJrA0UJw9Yi8wZ5ZCOyXwO?steps=14&angle=180
- Drawn as: linear gradient, 14 steps, 180 degrees
- Kinds: dark to light, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.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 | `#253a70` | `oklch(36.22% 0.0965 265.78)` | Blue Expanse | white, 10.9 to 1 |
| 2 | `#2b3e70` | `oklch(37.46% 0.0902 266.93)` | Mystification | white, 10.3 to 1 |
| 3 | `#354372` | `oklch(39.52% 0.0805 269.59)` | Space Missions | white, 9.5 to 1 |
| 4 | `#464c74` | `oklch(42.88% 0.0666 276.12)` | Purple Berry | white, 8.2 to 1 |
| 5 | `#5a5a76` | `oklch(47.72% 0.0456 284.70)` | Agate Violet | white, 6.6 to 1 |
| 6 | `#6f697b` | `oklch(53.23% 0.0281 301.06)` | Decadence | white, 5.2 to 1 |
| 7 | `#877883` | `oklch(59.00% 0.0232 335.07)` | Grey Ridge | black, 5 to 1 |
| 8 | `#9f8a89` | `oklch(65.14% 0.0266 20.77)` | Storm Red | black, 6.4 to 1 |
| 9 | `#b29b8e` | `oklch(70.73% 0.0332 52.67)` | Bidwell Brown | black, 8 to 1 |
| 10 | `#c6ab94` | `oklch(75.82% 0.0449 63.41)` | Fox Hill | black, 9.6 to 1 |
| 11 | `#d8b798` | `oklch(80.15% 0.0573 65.96)` | Canewood | black, 11.1 to 1 |
| 12 | `#e2c19b` | `oklch(83.02% 0.0634 70.31)` | Tostada | black, 12.3 to 1 |
| 13 | `#e6c79e` | `oklch(84.56% 0.0646 73.76)` | Jasper Cane | black, 13 to 1 |
| 14 | `#e8caa0` | `oklch(85.43% 0.0648 75.92)` | Compatible Cream | black, 13.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #253a70 0.0%, #2b3e70 7.7%, #354372 15.4%, #464c74 23.1%, #5a5a76 30.8%, #6f697b 38.5%, #877883 46.2%, #9f8a89 53.8%, #b29b8e 61.5%, #c6ab94 69.2%, #d8b798 76.9%, #e2c19b 84.6%, #e6c79e 92.3%, #e8caa0 100.0%);
background: linear-gradient(180deg in oklch, oklch(36.22% 0.0965 265.78) 0.0%, oklch(37.46% 0.0902 266.93) 7.7%, oklch(39.52% 0.0805 269.59) 15.4%, oklch(42.88% 0.0666 276.12) 23.1%, oklch(47.72% 0.0456 284.70) 30.8%, oklch(53.23% 0.0281 301.06) 38.5%, oklch(59.00% 0.0232 335.07) 46.2%, oklch(65.14% 0.0266 20.77) 53.8%, oklch(70.73% 0.0332 52.67) 61.5%, oklch(75.82% 0.0449 63.41) 69.2%, oklch(80.15% 0.0573 65.96) 76.9%, oklch(83.02% 0.0634 70.31) 84.6%, oklch(84.56% 0.0646 73.76) 92.3%, oklch(85.43% 0.0648 75.92) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.362 | 0.096 | 265.8 |
| 2 | 0.413 | 0.073 | 273.2 |
| 3 | 0.543 | 0.026 | 305.9 |
| 4 | 0.697 | 0.032 | 408.4 |
| 5 | 0.815 | 0.061 | 427.5 |
| 6 | 0.854 | 0.065 | 435.9 |

## In these collections

- [Equinox twilight horizon](https://grabient.com/equinox-twilight-horizon)

## Other forms

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