# Tritone brown, teal and purple angular gradient

Tritone brown, teal and purple angular gradient with 32 colors: #533034, #523239, #50353f, #4e3946, #4d3e4e, #4d4558, #4c5063, #4b5c6c, #4c6972, #507576, #52827d, #519085, #4e9e8d, #4caa94, #4eb297, #50b99c, #51bea0, #52c1a4, #53c1a7, #57bea7, #5cb8a6, #5fb0a4, #5ea7a4, #5b9da5, #5d8fa3, #60819d, #637395, #65678e, #675b88, #6a4f81, #6e4379, #713b71. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA`
- Page: https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA?style=angularGradient&steps=32&angle=195
- Drawn as: angular gradient, 32 steps, 195 degrees
- Kinds: light center, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 5.1 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 | `#533034` | `oklch(35.43% 0.0510 13.36)` | Joyful Ruby | white, 11.3 to 1 |
| 2 | `#523239` | `oklch(35.86% 0.0476 5.50)` | Nectar of the Gods | white, 11.1 to 1 |
| 3 | `#50353f` | `oklch(36.39% 0.0426 354.77)` | Velvet Touch | white, 10.9 to 1 |
| 4 | `#4e3946` | `oklch(37.23% 0.0375 341.09)` | Peacock Purple | white, 10.5 to 1 |
| 5 | `#4d3e4e` | `oklch(38.58% 0.0338 324.39)` | Bossa Nova | white, 9.9 to 1 |
| 6 | `#4d4558` | `oklch(40.66% 0.0325 303.53)` | Violet Intense | white, 9 to 1 |
| 7 | `#4c5063` | `oklch(43.48% 0.0321 275.73)` | Voyager | white, 7.9 to 1 |
| 8 | `#4b5c6c` | `oklch(46.79% 0.0331 245.40)` | Seven Seas | white, 6.8 to 1 |
| 9 | `#4c6972` | `oklch(50.26% 0.0363 217.72)` | Azalea Leaf | white, 5.8 to 1 |
| 10 | `#507576` | `oklch(53.62% 0.0425 197.85)` | Rogue Waters | white, 5 to 1 |
| 11 | `#52827d` | `oklch(57.15% 0.0536 186.43)` | Jericho Jade | black, 4.8 to 1 |
| 12 | `#519085` | `oklch(60.86% 0.0683 180.39)` | Dusty Teal | black, 5.7 to 1 |
| 13 | `#4e9e8d` | `oklch(64.39% 0.0833 177.48)` | Aqua Revival | black, 6.6 to 1 |
| 14 | `#4caa94` | `oklch(67.40% 0.0954 175.43)` | Jewel Weed | black, 7.4 to 1 |
| 15 | `#4eb297` | `oklch(69.71% 0.1027 173.04)` | Green Blue | black, 8.1 to 1 |
| 16 | `#50b99c` | `oklch(71.62% 0.1076 171.97)` | Jolt of Jade | black, 8.7 to 1 |
| 17 | `#51bea0` | `oklch(73.03% 0.1101 172.14)` | Jolt of Jade | black, 9.2 to 1 |
| 18 | `#52c1a4` | `oklch(73.85% 0.1102 173.33)` | Eucalipto | black, 9.5 to 1 |
| 19 | `#53c1a7` | `oklch(73.97% 0.1078 175.26)` | Eucalipto | black, 9.5 to 1 |
| 20 | `#57bea7` | `oklch(73.30% 0.1013 176.96)` | Florida Keys | black, 9.2 to 1 |
| 21 | `#5cb8a6` | `oklch(71.98% 0.0919 179.34)` | Shylock | black, 8.8 to 1 |
| 22 | `#5fb0a4` | `oklch(70.17% 0.0820 183.90)` | Green Crush | black, 8.2 to 1 |
| 23 | `#5ea7a4` | `oklch(68.04% 0.0739 192.15)` | Veranda | black, 7.5 to 1 |
| 24 | `#5b9da5` | `oklch(65.46% 0.0678 205.98)` | Beach Blue | black, 6.7 to 1 |
| 25 | `#5d8fa3` | `oklch(62.27% 0.0619 224.94)` | Sail Cover | black, 5.9 to 1 |
| 26 | `#60819d` | `oklch(58.84% 0.0576 245.86)` | Greyish Blue | black, 5.1 to 1 |
| 27 | `#637395` | `oklch(55.58% 0.0565 265.58)` | Ocean Night | white, 4.7 to 1 |
| 28 | `#65678e` | `oklch(52.79% 0.0603 281.48)` | Twilight Purple | white, 5.3 to 1 |
| 29 | `#675b88` | `oklch(50.12% 0.0708 295.80)` | Kimberly | white, 6.1 to 1 |
| 30 | `#6a4f81` | `oklch(47.65% 0.0848 308.65)` | Zimidar | white, 6.8 to 1 |
| 31 | `#6e4379` | `oklch(45.57% 0.0984 319.26)` | Palace Purple | white, 7.6 to 1 |
| 32 | `#713b71` | `oklch(44.09% 0.1075 326.86)` | Eminence | white, 8.1 to 1 |

## CSS

```css
background: conic-gradient(from 195deg, #533034 0.0%, #523239 3.2%, #50353f 6.5%, #4e3946 9.7%, #4d3e4e 12.9%, #4d4558 16.1%, #4c5063 19.4%, #4b5c6c 22.6%, #4c6972 25.8%, #507576 29.0%, #52827d 32.3%, #519085 35.5%, #4e9e8d 38.7%, #4caa94 41.9%, #4eb297 45.2%, #50b99c 48.4%, #51bea0 51.6%, #52c1a4 54.8%, #53c1a7 58.1%, #57bea7 61.3%, #5cb8a6 64.5%, #5fb0a4 67.7%, #5ea7a4 71.0%, #5b9da5 74.2%, #5d8fa3 77.4%, #60819d 80.6%, #637395 83.9%, #65678e 87.1%, #675b88 90.3%, #6a4f81 93.5%, #6e4379 96.8%, #713b71 100.0%);
background: conic-gradient(from 195deg in oklch, oklch(35.43% 0.0510 13.36) 0.0%, oklch(35.86% 0.0476 5.50) 3.2%, oklch(36.39% 0.0426 354.77) 6.5%, oklch(37.23% 0.0375 341.09) 9.7%, oklch(38.58% 0.0338 324.39) 12.9%, oklch(40.66% 0.0325 303.53) 16.1%, oklch(43.48% 0.0321 275.73) 19.4%, oklch(46.79% 0.0331 245.40) 22.6%, oklch(50.26% 0.0363 217.72) 25.8%, oklch(53.62% 0.0425 197.85) 29.0%, oklch(57.15% 0.0536 186.43) 32.3%, oklch(60.86% 0.0683 180.39) 35.5%, oklch(64.39% 0.0833 177.48) 38.7%, oklch(67.40% 0.0954 175.43) 41.9%, oklch(69.71% 0.1027 173.04) 45.2%, oklch(71.62% 0.1076 171.97) 48.4%, oklch(73.03% 0.1101 172.14) 51.6%, oklch(73.85% 0.1102 173.33) 54.8%, oklch(73.97% 0.1078 175.26) 58.1%, oklch(73.30% 0.1013 176.96) 61.3%, oklch(71.98% 0.0919 179.34) 64.5%, oklch(70.17% 0.0820 183.90) 67.7%, oklch(68.04% 0.0739 192.15) 71.0%, oklch(65.46% 0.0678 205.98) 74.2%, oklch(62.27% 0.0619 224.94) 77.4%, oklch(58.84% 0.0576 245.86) 80.6%, oklch(55.58% 0.0565 265.58) 83.9%, oklch(52.79% 0.0603 281.48) 87.1%, oklch(50.12% 0.0708 295.80) 90.3%, oklch(47.65% 0.0848 308.65) 93.5%, oklch(45.57% 0.0984 319.26) 96.8%, oklch(44.09% 0.1075 326.86) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.354 | 0.051 | 13.4 |
| 2 | 0.394 | 0.033 | -43.7 |
| 3 | 0.531 | 0.041 | -159.9 |
| 4 | 0.681 | 0.098 | -185.3 |
| 5 | 0.74 | 0.109 | -185.3 |
| 6 | 0.677 | 0.073 | -166.3 |
| 7 | 0.539 | 0.058 | -84.9 |
| 8 | 0.441 | 0.107 | -33.1 |

## In these collections

- [Vintage gradients](https://grabient.com/vintage-gradients)

## Other forms

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