# Teal blue magenta diagonal

Brown, purple, blue and navy linear gradient with 32 colors: #ab4d04, #ad4a1f, #ae4833, #ae4647, #ac465a, #a7486e, #a04b80, #965091, #8a569f, #7b5caa, #6b62af, #5a68b1, #496daf, #3771ab, #2574a5, #12759e, #007598, #007390, #00718a, #006e85, #006b80, #00677c, #006378, #005f75, #005a71, #00566e, #00526b, #004e69, #014b66, #034763, #044561, #05435f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Brown, purple, blue and navy linear gradient
- Seed: `kSh2ciwyWqy4bQI`
- Page: https://grabient.com/kSh2ciwyWqy4bQI?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: vivid
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 2 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 | `#ab4d04` | `oklch(53.15% 0.1419 48.52)` | Cinnamon Bun | white, 5.5 to 1 |
| 2 | `#ad4a1f` | `oklch(53.17% 0.1405 41.68)` | Funky Monkey | white, 5.5 to 1 |
| 3 | `#ae4833` | `oklch(53.24% 0.1388 32.88)` | Red Terra | white, 5.5 to 1 |
| 4 | `#ae4647` | `oklch(53.34% 0.1367 22.41)` | Redtail | white, 5.5 to 1 |
| 5 | `#ac465a` | `oklch(53.47% 0.1345 10.57)` | Pink Quince | white, 5.5 to 1 |
| 6 | `#a7486e` | `oklch(53.62% 0.1320 357.64)` | Ancient Fuchsia | white, 5.5 to 1 |
| 7 | `#a04b80` | `oklch(53.77% 0.1294 343.92)` | Orchid Lei | white, 5.4 to 1 |
| 8 | `#965091` | `oklch(53.90% 0.1266 329.71)` | Mad About Magenta | white, 5.4 to 1 |
| 9 | `#8a569f` | `oklch(54.01% 0.1237 315.28)` | Highlighter Lavender | white, 5.3 to 1 |
| 10 | `#7b5caa` | `oklch(54.08% 0.1208 300.94)` | Genestealer Purple | white, 5.3 to 1 |
| 11 | `#6b62af` | `oklch(54.10% 0.1179 286.97)` | Blue Marguerite | white, 5.2 to 1 |
| 12 | `#5a68b1` | `oklch(54.06% 0.1150 273.67)` | Evening Lagoon | white, 5.1 to 1 |
| 13 | `#496daf` | `oklch(53.94% 0.1122 261.33)` | New Age Blue | white, 5.1 to 1 |
| 14 | `#3771ab` | `oklch(53.74% 0.1094 250.25)` | Nocturne Shade | white, 5 to 1 |
| 15 | `#2574a5` | `oklch(53.43% 0.1069 240.70)` | Quarterdeck | white, 5.1 to 1 |
| 16 | `#12759e` | `oklch(53.01% 0.1045 233.00)` | Mitchell Blue | white, 5.1 to 1 |
| 17 | `#007598` | `oklch(52.46% 0.1016 227.34)` | Enchanted Blue | white, 5.2 to 1 |
| 18 | `#007390` | `oklch(51.73% 0.0965 223.22)` | Blue Fjord | white, 5.4 to 1 |
| 19 | `#00718a` | `oklch(50.83% 0.0928 220.42)` | Waterworld | white, 5.6 to 1 |
| 20 | `#006e85` | `oklch(49.79% 0.0899 218.80)` | Amalfi | white, 5.8 to 1 |
| 21 | `#006b80` | `oklch(48.64% 0.0875 218.19)` | Azure Green Blue | white, 6.1 to 1 |
| 22 | `#00677c` | `oklch(47.41% 0.0854 218.46)` | World’s Away | white, 6.5 to 1 |
| 23 | `#006378` | `oklch(46.12% 0.0837 219.44)` | Atlantis Myth | white, 6.8 to 1 |
| 24 | `#005f75` | `oklch(44.80% 0.0821 220.98)` | Lyons Blue | white, 7.3 to 1 |
| 25 | `#005a71` | `oklch(43.47% 0.0809 222.93)` | Deep Lagoon | white, 7.7 to 1 |
| 26 | `#00566e` | `oklch(42.17% 0.0800 225.14)` | Submersible | white, 8.2 to 1 |
| 27 | `#00526b` | `oklch(40.90% 0.0793 227.46)` | Blue Palisade | white, 8.6 to 1 |
| 28 | `#004e69` | `oklch(39.72% 0.0789 229.72)` | Work Blue | white, 9.1 to 1 |
| 29 | `#014b66` | `oklch(38.62% 0.0780 231.74)` | Fresco Blue | white, 9.5 to 1 |
| 30 | `#034763` | `oklch(37.66% 0.0767 233.45)` | Stegadon Scale Green | white, 10 to 1 |
| 31 | `#044561` | `oklch(36.85% 0.0754 234.66)` | Forest Blues | white, 10.3 to 1 |
| 32 | `#05435f` | `oklch(36.22% 0.0744 235.21)` | Neptune’s Wrath | white, 10.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #ab4d04 0.0%, #ad4a1f 3.2%, #ae4833 6.5%, #ae4647 9.7%, #ac465a 12.9%, #a7486e 16.1%, #a04b80 19.4%, #965091 22.6%, #8a569f 25.8%, #7b5caa 29.0%, #6b62af 32.3%, #5a68b1 35.5%, #496daf 38.7%, #3771ab 41.9%, #2574a5 45.2%, #12759e 48.4%, #007598 51.6%, #007390 54.8%, #00718a 58.1%, #006e85 61.3%, #006b80 64.5%, #00677c 67.7%, #006378 71.0%, #005f75 74.2%, #005a71 77.4%, #00566e 80.6%, #00526b 83.9%, #004e69 87.1%, #014b66 90.3%, #034763 93.5%, #044561 96.8%, #05435f 100.0%);
background: linear-gradient(45deg in oklch, oklch(53.15% 0.1419 48.52) 0.0%, oklch(53.17% 0.1405 41.68) 3.2%, oklch(53.24% 0.1388 32.88) 6.5%, oklch(53.34% 0.1367 22.41) 9.7%, oklch(53.47% 0.1345 10.57) 12.9%, oklch(53.62% 0.1320 357.64) 16.1%, oklch(53.77% 0.1294 343.92) 19.4%, oklch(53.90% 0.1266 329.71) 22.6%, oklch(54.01% 0.1237 315.28) 25.8%, oklch(54.08% 0.1208 300.94) 29.0%, oklch(54.10% 0.1179 286.97) 32.3%, oklch(54.06% 0.1150 273.67) 35.5%, oklch(53.94% 0.1122 261.33) 38.7%, oklch(53.74% 0.1094 250.25) 41.9%, oklch(53.43% 0.1069 240.70) 45.2%, oklch(53.01% 0.1045 233.00) 48.4%, oklch(52.46% 0.1016 227.34) 51.6%, oklch(51.73% 0.0965 223.22) 54.8%, oklch(50.83% 0.0928 220.42) 58.1%, oklch(49.79% 0.0899 218.80) 61.3%, oklch(48.64% 0.0875 218.19) 64.5%, oklch(47.41% 0.0854 218.46) 67.7%, oklch(46.12% 0.0837 219.44) 71.0%, oklch(44.80% 0.0821 220.98) 74.2%, oklch(43.47% 0.0809 222.93) 77.4%, oklch(42.17% 0.0800 225.14) 80.6%, oklch(40.90% 0.0793 227.46) 83.9%, oklch(39.72% 0.0789 229.72) 87.1%, oklch(38.62% 0.0780 231.74) 90.3%, oklch(37.66% 0.0767 233.45) 93.5%, oklch(36.85% 0.0754 234.66) 96.8%, oklch(36.22% 0.0744 235.21) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.142 | 48.5 |
| 2 | 0.528 | 0.103 | -130.1 |
| 3 | 0.362 | 0.074 | -124.8 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)

## Other forms

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