# Tan and mauve color palette

The Tan and mauve color palette brings together orange, red, and dark magenta. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark magenta, and its lightest tone is orange.

- Also called: Gray to dark purple linear gradient
- Seed: `kSpRknP5I5aOOu8`
- Page: https://grabient.com/kSpRknP5I5aOOu8?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark, muted, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#a08a7b` | `oklch(64.96% 0.0344 54.84)` | Smokey Tan | black, 6.4 to 1 |
| 2 | `#9f887a` | `oklch(64.43% 0.0350 52.81)` | Cobblestone Path | black, 6.2 to 1 |
| 3 | `#9e8678` | `oklch(63.81% 0.0358 50.30)` | Cobblestone Path | black, 6.1 to 1 |
| 4 | `#9d8377` | `oklch(63.11% 0.0368 47.36)` | Modern Mocha | black, 5.9 to 1 |
| 5 | `#9c8075` | `oklch(62.34% 0.0379 44.07)` | Cougar | black, 5.7 to 1 |
| 6 | `#9a7d73` | `oklch(61.49% 0.0391 40.48)` | Hemp | black, 5.5 to 1 |
| 7 | `#987a71` | `oklch(60.58% 0.0404 36.65)` | Soft Cocoa | black, 5.3 to 1 |
| 8 | `#96766f` | `oklch(59.62% 0.0417 32.64)` | Mulberry Silk | black, 5.1 to 1 |
| 9 | `#94736e` | `oklch(58.60% 0.0430 28.51)` | Mulberry Silk | black, 4.9 to 1 |
| 10 | `#926f6c` | `oklch(57.54% 0.0442 24.32)` | Oakwood Brown | black, 4.7 to 1 |
| 11 | `#8f6b6b` | `oklch(56.44% 0.0454 20.14)` | Moss Rose | white, 4.6 to 1 |
| 12 | `#8c6869` | `oklch(55.31% 0.0466 16.02)` | Deadlock | white, 4.9 to 1 |
| 13 | `#886468` | `oklch(54.15% 0.0476 12.03)` | Mauving Up | white, 5.1 to 1 |
| 14 | `#856066` | `oklch(52.98% 0.0484 8.22)` | Celine | white, 5.4 to 1 |
| 15 | `#815d65` | `oklch(51.79% 0.0491 4.65)` | Tarsier | white, 5.7 to 1 |
| 16 | `#7d5963` | `oklch(50.60% 0.0495 1.39)` | Royal Fig | white, 6 to 1 |
| 17 | `#795661` | `oklch(49.38% 0.0497 358.45)` | Royal Fig | white, 6.3 to 1 |
| 18 | `#75525f` | `oklch(48.05% 0.0496 355.58)` | Opium Mauve | white, 6.7 to 1 |
| 19 | `#704e5c` | `oklch(46.61% 0.0494 352.75)` | Fine Wine | white, 7.1 to 1 |
| 20 | `#6b4a59` | `oklch(45.07% 0.0489 349.97)` | Prussian Plum | white, 7.6 to 1 |
| 21 | `#654656` | `oklch(43.46% 0.0483 347.26)` | Plum Harvest | white, 8.1 to 1 |
| 22 | `#604253` | `oklch(41.80% 0.0476 344.62)` | Miranda’s Spike | white, 8.7 to 1 |
| 23 | `#5a3e4f` | `oklch(40.13% 0.0468 342.07)` | Purple Cort | white, 9.3 to 1 |
| 24 | `#543a4b` | `oklch(38.46% 0.0460 339.62)` | Purple Sphinx | white, 10 to 1 |
| 25 | `#4f3648` | `oklch(36.81% 0.0450 337.28)` | Noble Hatter’s Violet | white, 10.7 to 1 |
| 26 | `#4a3244` | `oklch(35.21% 0.0441 335.06)` | Loulou | white, 11.4 to 1 |
| 27 | `#452f41` | `oklch(33.68% 0.0432 332.98)` | Voodoo | white, 12.1 to 1 |
| 28 | `#402b3d` | `oklch(32.25% 0.0424 331.05)` | Barossa | white, 12.8 to 1 |
| 29 | `#3c283a` | `oklch(30.94% 0.0416 329.27)` | Rare Wine | white, 13.4 to 1 |
| 30 | `#382638` | `oklch(29.77% 0.0409 327.67)` | Rare Wine | white, 13.9 to 1 |
| 31 | `#352435` | `oklch(28.77% 0.0404 326.25)` | Fat Tuesday | white, 14.4 to 1 |
| 32 | `#332234` | `oklch(27.95% 0.0400 325.02)` | Zero Gravity | white, 14.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #a08a7b 0.0%, #9f887a 3.2%, #9e8678 6.5%, #9d8377 9.7%, #9c8075 12.9%, #9a7d73 16.1%, #987a71 19.4%, #96766f 22.6%, #94736e 25.8%, #926f6c 29.0%, #8f6b6b 32.3%, #8c6869 35.5%, #886468 38.7%, #856066 41.9%, #815d65 45.2%, #7d5963 48.4%, #795661 51.6%, #75525f 54.8%, #704e5c 58.1%, #6b4a59 61.3%, #654656 64.5%, #604253 67.7%, #5a3e4f 71.0%, #543a4b 74.2%, #4f3648 77.4%, #4a3244 80.6%, #452f41 83.9%, #402b3d 87.1%, #3c283a 90.3%, #382638 93.5%, #352435 96.8%, #332234 100.0%);
background: linear-gradient(180deg in oklch, oklch(64.96% 0.0344 54.84) 0.0%, oklch(64.43% 0.0350 52.81) 3.2%, oklch(63.81% 0.0358 50.30) 6.5%, oklch(63.11% 0.0368 47.36) 9.7%, oklch(62.34% 0.0379 44.07) 12.9%, oklch(61.49% 0.0391 40.48) 16.1%, oklch(60.58% 0.0404 36.65) 19.4%, oklch(59.62% 0.0417 32.64) 22.6%, oklch(58.60% 0.0430 28.51) 25.8%, oklch(57.54% 0.0442 24.32) 29.0%, oklch(56.44% 0.0454 20.14) 32.3%, oklch(55.31% 0.0466 16.02) 35.5%, oklch(54.15% 0.0476 12.03) 38.7%, oklch(52.98% 0.0484 8.22) 41.9%, oklch(51.79% 0.0491 4.65) 45.2%, oklch(50.60% 0.0495 1.39) 48.4%, oklch(49.38% 0.0497 358.45) 51.6%, oklch(48.05% 0.0496 355.58) 54.8%, oklch(46.61% 0.0494 352.75) 58.1%, oklch(45.07% 0.0489 349.97) 61.3%, oklch(43.46% 0.0483 347.26) 64.5%, oklch(41.80% 0.0476 344.62) 67.7%, oklch(40.13% 0.0468 342.07) 71.0%, oklch(38.46% 0.0460 339.62) 74.2%, oklch(36.81% 0.0450 337.28) 77.4%, oklch(35.21% 0.0441 335.06) 80.6%, oklch(33.68% 0.0432 332.98) 83.9%, oklch(32.25% 0.0424 331.05) 87.1%, oklch(30.94% 0.0416 329.27) 90.3%, oklch(29.77% 0.0409 327.67) 93.5%, oklch(28.77% 0.0404 326.25) 96.8%, oklch(27.95% 0.0400 325.02) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.65 | 0.034 | 54.8 |
| 2 | 0.5 | 0.05 | -0.1 |
| 3 | 0.28 | 0.04 | -35 |

## In these collections

- [Soft neutral gradients](https://grabient.com/soft-neutral-gradients)
- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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