# Tritone purple, brown and navy linear gradient

Tritone purple, brown and navy linear gradient with 7 colors: #76507a, #4d2c32, #25160f, #4e2626, #764068, #554472, #353d5c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUfDrmG4pJrmht8ulDhA`
- Page: https://grabient.com/kUfDrmG4pJrmht8ulDhA
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: muted
- Hues: wide
- Contrast of its darkest and lightest colors: 2.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 | `#76507a` | `oklch(48.82% 0.0799 323.44)` | Patrician Purple | white, 6.5 to 1 |
| 2 | `#4d2c32` | `oklch(33.76% 0.0497 8.94)` | Cab Sav | white, 12.1 to 1 |
| 3 | `#25160f` | `oklch(21.65% 0.0276 45.86)` | Used Oil | white, 17.5 to 1 |
| 4 | `#4e2626` | `oklch(32.31% 0.0590 20.70)` | Volcano | white, 12.8 to 1 |
| 5 | `#764068` | `oklch(45.28% 0.0923 337.18)` | Burnt Orchid | white, 7.7 to 1 |
| 6 | `#554472` | `oklch(42.42% 0.0778 300.65)` | When Red Met Blue | white, 8.5 to 1 |
| 7 | `#353d5c` | `oklch(36.61% 0.0551 272.71)` | Mangosteen | white, 10.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #76507a 0.0%, #4d2c32 16.7%, #25160f 33.3%, #4e2626 50.0%, #764068 66.7%, #554472 83.3%, #353d5c 100.0%);
background: linear-gradient(90deg in oklch, oklch(48.82% 0.0799 323.44) 0.0%, oklch(33.76% 0.0497 8.94) 16.7%, oklch(21.65% 0.0276 45.86) 33.3%, oklch(32.31% 0.0590 20.70) 50.0%, oklch(45.28% 0.0923 337.18) 66.7%, oklch(42.42% 0.0778 300.65) 83.3%, oklch(36.61% 0.0551 272.71) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.488 | 0.08 | 323.4 |
| 2 | 0.217 | 0.028 | 405.9 |
| 3 | 0.453 | 0.092 | 337.2 |
| 4 | 0.366 | 0.055 | 272.7 |

## Other forms

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