# Blue, purple, red and tan linear gradient

Blue, purple, red and tan linear gradient with 32 colors: #2b7faa, #2578a6, #1c6ea1, #17629b, #1a5693, #214c8b, #274280, #2b3874, #303069, #362a61, #412559, #4d2150, #591f44, #641e39, #6e2031, #7b222c, #882628, #962b23, #a1321e, #ab3b1b, #b4441d, #bc4f20, #c25923, #c66427, #c86f2e, #c97a36, #c8853f, #c58e46, #c0984e, #b9a159, #b1a864, #adad6d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kckEqnN6rCSoiQ-tpkjPDZDMs2QZWqcK3R9Eo`
- Page: https://grabient.com/kckEqnN6rCSoiQ-tpkjPDZDMs2QZWqcK3R9Eo?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark center, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#2b7faa` | `oklch(56.69% 0.1020 234.84)` | Blue Bird Day | black, 4.7 to 1 |
| 2 | `#2578a6` | `oklch(54.59% 0.1051 237.75)` | In the Mood | white, 4.8 to 1 |
| 3 | `#1c6ea1` | `oklch(51.58% 0.1099 241.78)` | Deep Water | white, 5.5 to 1 |
| 4 | `#17629b` | `oklch(48.17% 0.1146 246.72)` | Atlantic Mystique | white, 6.4 to 1 |
| 5 | `#1a5693` | `oklch(44.92% 0.1171 252.35)` | Suddenly Sapphire | white, 7.4 to 1 |
| 6 | `#214c8b` | `oklch(42.12% 0.1157 258.31)` | Olympian Blue | white, 8.5 to 1 |
| 7 | `#274280` | `oklch(39.21% 0.1103 264.23)` | Mazarine Blue | white, 9.6 to 1 |
| 8 | `#2b3874` | `oklch(36.46% 0.1031 270.94)` | Ballpoint Indigo | white, 10.8 to 1 |
| 9 | `#303069` | `oklch(34.25% 0.0966 279.39)` | Deep Koamaru | white, 11.9 to 1 |
| 10 | `#362a61` | `oklch(32.95% 0.0935 290.56)` | Paris M | white, 12.6 to 1 |
| 11 | `#412559` | `oklch(32.62% 0.0933 306.35)` | Galactic Wonder | white, 12.8 to 1 |
| 12 | `#4d2150` | `oklch(33.02% 0.0948 325.26)` | Wonka Purple | white, 12.7 to 1 |
| 13 | `#591f44` | `oklch(33.99% 0.0981 344.23)` | Soul Anchor | white, 12.3 to 1 |
| 14 | `#641e39` | `oklch(35.38% 0.1030 0.19)` | Wine Country | white, 11.7 to 1 |
| 15 | `#6e2031` | `oklch(37.17% 0.1104 11.05)` | Squid Hat | white, 10.9 to 1 |
| 16 | `#7b222c` | `oklch(39.60% 0.1214 18.49)` | Biking Red | white, 9.9 to 1 |
| 17 | `#882628` | `oklch(42.40% 0.1334 23.79)` | Flame Red | white, 8.9 to 1 |
| 18 | `#962b23` | `oklch(45.29% 0.1438 28.11)` | Saffronaut | white, 7.9 to 1 |
| 19 | `#a1321e` | `oklch(48.00% 0.1501 32.50)` | Sugo Della Nonna | white, 7 to 1 |
| 20 | `#ab3b1b` | `oklch(50.73% 0.1531 35.95)` | Crimson Blaze | white, 6.2 to 1 |
| 21 | `#b4441d` | `oklch(53.49% 0.1537 38.55)` | Martian Ironcrust | white, 5.5 to 1 |
| 22 | `#bc4f20` | `oklch(56.19% 0.1524 41.10)` | Roland-Garros | white, 4.9 to 1 |
| 23 | `#c25923` | `oklch(58.72% 0.1494 44.40)` | Grieving Daylily | black, 4.7 to 1 |
| 24 | `#c66427` | `oklch(61.04% 0.1442 48.63)` | Chivalrous Fox | black, 5.2 to 1 |
| 25 | `#c86f2e` | `oklch(63.25% 0.1365 53.19)` | Ochre Pigment | black, 5.7 to 1 |
| 26 | `#c97a36` | `oklch(65.30% 0.1276 58.34)` | Ochre Maroon | black, 6.3 to 1 |
| 27 | `#c8853f` | `oklch(67.15% 0.1188 64.33)` | Gold Coast | black, 6.8 to 1 |
| 28 | `#c58e46` | `oklch(68.78% 0.1112 71.62)` | Garden Ochre | black, 7.3 to 1 |
| 29 | `#c0984e` | `oklch(70.23% 0.1036 81.35)` | Where Buffalo Roam | black, 7.8 to 1 |
| 30 | `#b9a159` | `oklch(71.48% 0.0962 92.03)` | Frickles | black, 8.3 to 1 |
| 31 | `#b1a864` | `oklch(72.50% 0.0899 101.70)` | Organic Garden | black, 8.6 to 1 |
| 32 | `#adad6d` | `oklch(73.23% 0.0854 108.39)` | Wasabi Green | black, 8.9 to 1 |

## CSS

```css
background: linear-gradient(180deg, #2b7faa 0.0%, #2578a6 3.2%, #1c6ea1 6.5%, #17629b 9.7%, #1a5693 12.9%, #214c8b 16.1%, #274280 19.4%, #2b3874 22.6%, #303069 25.8%, #362a61 29.0%, #412559 32.3%, #4d2150 35.5%, #591f44 38.7%, #641e39 41.9%, #6e2031 45.2%, #7b222c 48.4%, #882628 51.6%, #962b23 54.8%, #a1321e 58.1%, #ab3b1b 61.3%, #b4441d 64.5%, #bc4f20 67.7%, #c25923 71.0%, #c66427 74.2%, #c86f2e 77.4%, #c97a36 80.6%, #c8853f 83.9%, #c58e46 87.1%, #c0984e 90.3%, #b9a159 93.5%, #b1a864 96.8%, #adad6d 100.0%);
background: linear-gradient(180deg in oklch, oklch(56.69% 0.1020 234.84) 0.0%, oklch(54.59% 0.1051 237.75) 3.2%, oklch(51.58% 0.1099 241.78) 6.5%, oklch(48.17% 0.1146 246.72) 9.7%, oklch(44.92% 0.1171 252.35) 12.9%, oklch(42.12% 0.1157 258.31) 16.1%, oklch(39.21% 0.1103 264.23) 19.4%, oklch(36.46% 0.1031 270.94) 22.6%, oklch(34.25% 0.0966 279.39) 25.8%, oklch(32.95% 0.0935 290.56) 29.0%, oklch(32.62% 0.0933 306.35) 32.3%, oklch(33.02% 0.0948 325.26) 35.5%, oklch(33.99% 0.0981 344.23) 38.7%, oklch(35.38% 0.1030 0.19) 41.9%, oklch(37.17% 0.1104 11.05) 45.2%, oklch(39.60% 0.1214 18.49) 48.4%, oklch(42.40% 0.1334 23.79) 51.6%, oklch(45.29% 0.1438 28.11) 54.8%, oklch(48.00% 0.1501 32.50) 58.1%, oklch(50.73% 0.1531 35.95) 61.3%, oklch(53.49% 0.1537 38.55) 64.5%, oklch(56.19% 0.1524 41.10) 67.7%, oklch(58.72% 0.1494 44.40) 71.0%, oklch(61.04% 0.1442 48.63) 74.2%, oklch(63.25% 0.1365 53.19) 77.4%, oklch(65.30% 0.1276 58.34) 80.6%, oklch(67.15% 0.1188 64.33) 83.9%, oklch(68.78% 0.1112 71.62) 87.1%, oklch(70.23% 0.1036 81.35) 90.3%, oklch(71.48% 0.0962 92.03) 93.5%, oklch(72.50% 0.0899 101.70) 96.8%, oklch(73.23% 0.0854 108.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.567 | 0.102 | 234.8 |
| 2 | 0.437 | 0.117 | 254.9 |
| 3 | 0.331 | 0.094 | 288.7 |
| 4 | 0.358 | 0.105 | 363.8 |
| 5 | 0.472 | 0.149 | 391.2 |
| 6 | 0.591 | 0.149 | 405 |
| 7 | 0.681 | 0.114 | 428.2 |
| 8 | 0.732 | 0.085 | 468.4 |

## In these collections

- [Red sumac roadside](https://grabient.com/red-sumac-roadside)

## Other forms

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