# Lavender Citrus Spectrum

This diagonal gradient moves from lavender through slate blue and teal, brightens into green and citrus yellow, then warms through peach, orange, and clear red. The cool and warm families occupy distinct stretches, giving the tetradic route a readable rhythm. Use it for energetic posters, broad data themes, creative branding, or backgrounds that need many coordinated color roles.

- Also called: Triadic lavender, gray, teal and orange linear gradient
- Seed: `kUu0LVwo03XE9sFNzDfA`
- Page: https://grabient.com/kUu0LVwo03XE9sFNzDfA?steps=32&angle=305
- Drawn as: linear gradient, 32 steps, 305 degrees
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.8 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 | `#b29ddb` | `oklch(73.62% 0.0909 300.23)` | Violet Velvet | black, 8.7 to 1 |
| 2 | `#aa9ad6` | `oklch(72.16% 0.0870 296.31)` | Biloba Flower | black, 8.2 to 1 |
| 3 | `#9f96cd` | `oklch(69.97% 0.0809 291.60)` | Distinct Purple | black, 7.6 to 1 |
| 4 | `#9290c2` | `oklch(67.27% 0.0733 286.17)` | Velvet Crest | black, 6.9 to 1 |
| 5 | `#8589b4` | `oklch(64.28% 0.0649 280.03)` | Galactic Gossamer | black, 6.2 to 1 |
| 6 | `#7882a6` | `oklch(61.21% 0.0564 273.23)` | Positively Purple | black, 5.5 to 1 |
| 7 | `#6e7b99` | `oklch(58.27% 0.0484 265.80)` | Quantum Blue | black, 4.9 to 1 |
| 8 | `#65758c` | `oklch(55.69% 0.0416 257.79)` | Niche | white, 4.7 to 1 |
| 9 | `#5e7083` | `oklch(53.67% 0.0366 249.23)` | Silver Blueberry | white, 5.1 to 1 |
| 10 | `#596d7c` | `oklch(52.43% 0.0341 240.15)` | Blue Mirage | white, 5.3 to 1 |
| 11 | `#556e7a` | `oklch(52.18% 0.0348 230.60)` | Blue Sentinel | white, 5.4 to 1 |
| 12 | `#53727c` | `oklch(53.22% 0.0393 220.34)` | Lily Pond Blue | white, 5.1 to 1 |
| 13 | `#527c82` | `oklch(55.69% 0.0477 208.68)` | Labradorite Green | white, 4.6 to 1 |
| 14 | `#51898a` | `oklch(59.30% 0.0592 195.87)` | Evora | black, 5.3 to 1 |
| 15 | `#549a8f` | `oklch(63.70% 0.0731 182.24)` | Petrol Green | black, 6.3 to 1 |
| 16 | `#5eac90` | `oklch(68.58% 0.0886 168.14)` | O’grady Green | black, 7.7 to 1 |
| 17 | `#72bd8b` | `oklch(73.59% 0.1049 153.88)` | Young Bamboo | black, 9.3 to 1 |
| 18 | `#8ecc80` | `oklch(78.40% 0.1213 139.82)` | Fresh Cut Grass | black, 11 to 1 |
| 19 | `#b0d670` | `oklch(82.68% 0.1370 126.27)` | Fashion Green | black, 12.7 to 1 |
| 20 | `#d1dc5c` | `oklch(86.10% 0.1512 113.58)` | Chinese Green | black, 14 to 1 |
| 21 | `#eedc46` | `oklch(88.32% 0.1631 102.07)` | Orb of Harmony | black, 14.9 to 1 |
| 22 | `#ffd753` | `oklch(89.03% 0.1525 92.02)` | Buzz-In | black, 15.1 to 1 |
| 23 | `#ffd179` | `oklch(88.33% 0.1190 82.77)` | Yellow Jubilee | black, 14.6 to 1 |
| 24 | `#ffc77b` | `oklch(86.48% 0.1131 74.07)` | Beige Topaz | black, 13.7 to 1 |
| 25 | `#ffba71` | `oklch(83.75% 0.1200 65.96)` | Yellow Warbler | black, 12.4 to 1 |
| 26 | `#ffa861` | `oklch(80.39% 0.1346 58.43)` | Downy Feather | black, 11 to 1 |
| 27 | `#ff934d` | `oklch(76.65% 0.1547 51.52)` | Encounter | black, 9.5 to 1 |
| 28 | `#ff7c37` | `oklch(72.78% 0.1787 45.22)` | Temptatious Tangerine | black, 8.1 to 1 |
| 29 | `#fe6222` | `oklch(69.03% 0.2036 39.56)` | Brave Orange | black, 6.9 to 1 |
| 30 | `#f4512a` | `oklch(65.65% 0.2056 34.55)` | Benihi Red | black, 6 to 1 |
| 31 | `#ec4431` | `oklch(62.90% 0.2076 30.20)` | Cascara | black, 5.4 to 1 |
| 32 | `#e63937` | `oklch(61.02% 0.2094 26.54)` | Rose Madder | black, 5 to 1 |

## CSS

```css
background: linear-gradient(305deg, #b29ddb 0.0%, #aa9ad6 3.2%, #9f96cd 6.5%, #9290c2 9.7%, #8589b4 12.9%, #7882a6 16.1%, #6e7b99 19.4%, #65758c 22.6%, #5e7083 25.8%, #596d7c 29.0%, #556e7a 32.3%, #53727c 35.5%, #527c82 38.7%, #51898a 41.9%, #549a8f 45.2%, #5eac90 48.4%, #72bd8b 51.6%, #8ecc80 54.8%, #b0d670 58.1%, #d1dc5c 61.3%, #eedc46 64.5%, #ffd753 67.7%, #ffd179 71.0%, #ffc77b 74.2%, #ffba71 77.4%, #ffa861 80.6%, #ff934d 83.9%, #ff7c37 87.1%, #fe6222 90.3%, #f4512a 93.5%, #ec4431 96.8%, #e63937 100.0%);
background: linear-gradient(305deg in oklch, oklch(73.62% 0.0909 300.23) 0.0%, oklch(72.16% 0.0870 296.31) 3.2%, oklch(69.97% 0.0809 291.60) 6.5%, oklch(67.27% 0.0733 286.17) 9.7%, oklch(64.28% 0.0649 280.03) 12.9%, oklch(61.21% 0.0564 273.23) 16.1%, oklch(58.27% 0.0484 265.80) 19.4%, oklch(55.69% 0.0416 257.79) 22.6%, oklch(53.67% 0.0366 249.23) 25.8%, oklch(52.43% 0.0341 240.15) 29.0%, oklch(52.18% 0.0348 230.60) 32.3%, oklch(53.22% 0.0393 220.34) 35.5%, oklch(55.69% 0.0477 208.68) 38.7%, oklch(59.30% 0.0592 195.87) 41.9%, oklch(63.70% 0.0731 182.24) 45.2%, oklch(68.58% 0.0886 168.14) 48.4%, oklch(73.59% 0.1049 153.88) 51.6%, oklch(78.40% 0.1213 139.82) 54.8%, oklch(82.68% 0.1370 126.27) 58.1%, oklch(86.10% 0.1512 113.58) 61.3%, oklch(88.32% 0.1631 102.07) 64.5%, oklch(89.03% 0.1525 92.02) 67.7%, oklch(88.33% 0.1190 82.77) 71.0%, oklch(86.48% 0.1131 74.07) 74.2%, oklch(83.75% 0.1200 65.96) 77.4%, oklch(80.39% 0.1346 58.43) 80.6%, oklch(76.65% 0.1547 51.52) 83.9%, oklch(72.78% 0.1787 45.22) 87.1%, oklch(69.03% 0.2036 39.56) 90.3%, oklch(65.65% 0.2056 34.55) 93.5%, oklch(62.90% 0.2076 30.20) 96.8%, oklch(61.02% 0.2094 26.54) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.736 | 0.091 | 300.2 |
| 2 | 0.524 | 0.036 | 227.3 |
| 3 | 0.89 | 0.169 | 95.2 |
| 4 | 0.61 | 0.209 | 26.5 |

## In these collections

- [Tetradic color palette](https://grabient.com/tetradic-color-palette)

## Other forms

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