# Tritone brown, teal and purple angular swatches

Tritone brown, teal and purple angular swatches with 10 colors: #533034, #4e3b4a, #4b5b6b, #52877f, #4db197, #52c1a5, #5eb3a5, #5d8ea3, #66618a, #713b71. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA`
- Page: https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA?style=angularSwatches&steps=10&angle=195
- Drawn as: angular swatches, 10 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 | `#4e3b4a` | `oklch(37.76% 0.0356 334.05)` | Petunia Patty | white, 10.2 to 1 |
| 3 | `#4b5b6b` | `oklch(46.40% 0.0329 248.73)` | Storm Rising | white, 6.9 to 1 |
| 4 | `#52877f` | `oklch(58.38% 0.0583 183.93)` | Wintergreen Dream | black, 5.1 to 1 |
| 5 | `#4db197` | `oklch(69.23% 0.1013 173.47)` | Hole in One | black, 8 to 1 |
| 6 | `#52c1a5` | `oklch(73.95% 0.1099 173.72)` | Eucalipto | black, 9.5 to 1 |
| 7 | `#5eb3a5` | `oklch(70.82% 0.0852 182.05)` | Artesian Well | black, 8.4 to 1 |
| 8 | `#5d8ea3` | `oklch(61.89% 0.0613 227.22)` | Georgian Revival Blue | black, 5.8 to 1 |
| 9 | `#66618a` | `oklch(51.30% 0.0655 289.57)` | Majestic Purple | white, 5.7 to 1 |
| 10 | `#713b71` | `oklch(44.09% 0.1075 326.86)` | Eminence | white, 8.1 to 1 |

## CSS

```css
background: conic-gradient(from 195deg, #533034 0.000% 10.000%, #4e3b4a 10.000% 20.000%, #4b5b6b 20.000% 30.000%, #52877f 30.000% 40.000%, #4db197 40.000% 50.000%, #52c1a5 50.000% 60.000%, #5eb3a5 60.000% 70.000%, #5d8ea3 70.000% 80.000%, #66618a 80.000% 90.000%, #713b71 90.000% 100.000%);
background: conic-gradient(from 195deg, oklch(35.43% 0.0510 13.36) 0.000% 10.000%, oklch(37.76% 0.0356 334.05) 10.000% 20.000%, oklch(46.40% 0.0329 248.73) 20.000% 30.000%, oklch(58.38% 0.0583 183.93) 30.000% 40.000%, oklch(69.23% 0.1013 173.47) 40.000% 50.000%, oklch(73.95% 0.1099 173.72) 50.000% 60.000%, oklch(70.82% 0.0852 182.05) 60.000% 70.000%, oklch(61.89% 0.0613 227.22) 70.000% 80.000%, oklch(51.30% 0.0655 289.57) 80.000% 90.000%, oklch(44.09% 0.1075 326.86) 90.000% 100.000%);
```

## 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=angularSwatches&steps=10&angle=195)
- [PNG](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.png?style=angularSwatches&steps=10&angle=195)
- [SVG](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.svg?style=angularSwatches&steps=10&angle=195)
- [CSS](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.css?style=angularSwatches&steps=10&angle=195)
- [ASE](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.ase?style=angularSwatches&steps=10&angle=195)
- [GPL](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.gpl?style=angularSwatches&steps=10&angle=195)
- [GRD](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.grd?style=angularSwatches&steps=10&angle=195)
- [Design tokens](https://grabient.com/kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA.tokens.json?style=angularSwatches&steps=10&angle=195)
- [Social card](https://grabient.com/api/og?seed=kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA&style=angularSwatches&steps=10&angle=195)
- [Palettes like this one](https://grabient.com/palettes?q=kcWiUJsgw5MOPMjWo7z3ie_9YawjElUmOCdGA)
- [Guide for agents](https://grabient.com/llms.txt)