# Navy and tan color palette

Complementary navy to brown linear gradient with 18 colors: #1d1735, #211a35, #261e35, #2c223c, #322748, #392c50, #3f3451, #473b4e, #533f49, #5b463e, #5e513b, #685937, #756234, #7e6b3c, #887448, #927e50, #9f8a52, #a89253. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary navy to brown linear gradient
- Seed: `kcOinOoZBBCkXv8wDMJNw1NcCZQZKmD_1J_AY`
- Page: https://grabient.com/kcOinOoZBBCkXv8wDMJNw1NcCZQZKmD_1J_AY?steps=18&angle=135
- Drawn as: linear gradient, 18 steps, 135 degrees
- Kinds: dark to light, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.6 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 | `#1d1735` | `oklch(22.83% 0.0565 290.39)` | Lost in Sadness | white, 17.1 to 1 |
| 2 | `#211a35` | `oklch(23.92% 0.0506 294.16)` | Nightwalker | white, 16.6 to 1 |
| 3 | `#261e35` | `oklch(25.57% 0.0445 298.73)` | Black Velvet | white, 15.9 to 1 |
| 4 | `#2c223c` | `oklch(27.61% 0.0478 299.93)` | Telopea | white, 14.9 to 1 |
| 5 | `#322748` | `oklch(30.13% 0.0599 298.08)` | Blackberry Black | white, 13.8 to 1 |
| 6 | `#392c50` | `oklch(32.62% 0.0643 299.32)` | Midnight Pie | white, 12.6 to 1 |
| 7 | `#3f3451` | `oklch(34.90% 0.0520 301.39)` | Maharaja | white, 11.5 to 1 |
| 8 | `#473b4e` | `oklch(37.15% 0.0369 312.12)` | Plum Island | white, 10.5 to 1 |
| 9 | `#533f49` | `oklch(39.36% 0.0316 348.66)` | Purple Province | white, 9.6 to 1 |
| 10 | `#5b463e` | `oklch(41.54% 0.0321 43.97)` | Heritage Oak | white, 8.7 to 1 |
| 11 | `#5e513b` | `oklch(44.09% 0.0385 79.35)` | Longboat | white, 7.7 to 1 |
| 12 | `#685937` | `oklch(47.13% 0.0538 87.12)` | Beach Casuarina | white, 6.7 to 1 |
| 13 | `#756234` | `oklch(50.33% 0.0678 86.50)` | Himalaya | white, 5.9 to 1 |
| 14 | `#7e6b3c` | `oklch(53.54% 0.0696 87.63)` | By Gum | white, 5.1 to 1 |
| 15 | `#887448` | `oklch(56.80% 0.0659 86.79)` | Desert Willow | black, 4.6 to 1 |
| 16 | `#927e50` | `oklch(60.15% 0.0687 87.34)` | Fennel Seed | black, 5.3 to 1 |
| 17 | `#9f8a52` | `oklch(63.85% 0.0786 89.37)` | Goldbrown | black, 6.2 to 1 |
| 18 | `#a89253` | `oklch(66.54% 0.0868 91.02)` | Salted Capers | black, 6.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1d1735 0.0%, #211a35 5.9%, #261e35 11.8%, #2c223c 17.6%, #322748 23.5%, #392c50 29.4%, #3f3451 35.3%, #473b4e 41.2%, #533f49 47.1%, #5b463e 52.9%, #5e513b 58.8%, #685937 64.7%, #756234 70.6%, #7e6b3c 76.5%, #887448 82.4%, #927e50 88.2%, #9f8a52 94.1%, #a89253 100.0%);
background: linear-gradient(135deg in oklch, oklch(22.83% 0.0565 290.39) 0.0%, oklch(23.92% 0.0506 294.16) 5.9%, oklch(25.57% 0.0445 298.73) 11.8%, oklch(27.61% 0.0478 299.93) 17.6%, oklch(30.13% 0.0599 298.08) 23.5%, oklch(32.62% 0.0643 299.32) 29.4%, oklch(34.90% 0.0520 301.39) 35.3%, oklch(37.15% 0.0369 312.12) 41.2%, oklch(39.36% 0.0316 348.66) 47.1%, oklch(41.54% 0.0321 43.97) 52.9%, oklch(44.09% 0.0385 79.35) 58.8%, oklch(47.13% 0.0538 87.12) 64.7%, oklch(50.33% 0.0678 86.50) 70.6%, oklch(53.54% 0.0696 87.63) 76.5%, oklch(56.80% 0.0659 86.79) 82.4%, oklch(60.15% 0.0687 87.34) 88.2%, oklch(63.85% 0.0786 89.37) 94.1%, oklch(66.54% 0.0868 91.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.056 | 290.4 |
| 2 | 0.264 | 0.044 | 299.9 |
| 3 | 0.323 | 0.065 | 298.8 |
| 4 | 0.378 | 0.034 | 318.9 |
| 5 | 0.433 | 0.036 | 433.1 |
| 6 | 0.508 | 0.069 | 446.8 |
| 7 | 0.587 | 0.066 | 446.8 |
| 8 | 0.665 | 0.087 | 451 |

## In these collections

- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)
- [Dark muted gradients](https://grabient.com/dark-muted-gradients)

## Other forms

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