# Gray, green and red angular swatches

Gray, green and red angular swatches with 8 colors: #c1bbba, #9eb7a4, #77b28c, #60a674, #62965b, #788148, #9f683a, #cb4e33. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcygUVYA5OlqewDUpb-TyW-sodPPIIjkyrw84`
- Page: https://grabient.com/kcygUVYA5OlqewDUpb-TyW-sodPPIIjkyrw84?style=angularSwatches&steps=8&angle=225
- Drawn as: angular swatches, 8 steps, 225 degrees
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.4 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 | `#c1bbba` | `oklch(79.53% 0.0069 29.53)` | Grape Creme | black, 11 to 1 |
| 2 | `#9eb7a4` | `oklch(75.59% 0.0386 153.17)` | Silver Leaf | black, 9.7 to 1 |
| 3 | `#77b28c` | `oklch(71.26% 0.0841 155.28)` | Mate Tea | black, 8.5 to 1 |
| 4 | `#60a674` | `oklch(66.54% 0.1033 152.11)` | Aqua Forest | black, 7.2 to 1 |
| 5 | `#62965b` | `oklch(62.20% 0.1033 141.55)` | Abundance | black, 6 to 1 |
| 6 | `#788148` | `oklch(58.27% 0.0799 116.18)` | Grasshopper | black, 5 to 1 |
| 7 | `#9f683a` | `oklch(56.69% 0.0937 59.12)` | Hot Ginger | white, 4.6 to 1 |
| 8 | `#cb4e33` | `oklch(58.66% 0.1654 33.76)` | Fox | black, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #c1bbba 0.000% 12.500%, #9eb7a4 12.500% 25.000%, #77b28c 25.000% 37.500%, #60a674 37.500% 50.000%, #62965b 50.000% 62.500%, #788148 62.500% 75.000%, #9f683a 75.000% 87.500%, #cb4e33 87.500% 100.000%);
background: conic-gradient(from 225deg, oklch(79.53% 0.0069 29.53) 0.000% 12.500%, oklch(75.59% 0.0386 153.17) 12.500% 25.000%, oklch(71.26% 0.0841 155.28) 25.000% 37.500%, oklch(66.54% 0.1033 152.11) 37.500% 50.000%, oklch(62.20% 0.1033 141.55) 50.000% 62.500%, oklch(58.27% 0.0799 116.18) 62.500% 75.000%, oklch(56.69% 0.0937 59.12) 75.000% 87.500%, oklch(58.66% 0.1654 33.76) 87.500% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.795 | 0.007 | 29.5 |
| 2 | 0.756 | 0.039 | 153.2 |
| 3 | 0.713 | 0.084 | 155.3 |
| 4 | 0.665 | 0.103 | 152.1 |
| 5 | 0.622 | 0.103 | 141.5 |
| 6 | 0.583 | 0.08 | 116.2 |
| 7 | 0.567 | 0.094 | 59.1 |
| 8 | 0.587 | 0.165 | 33.8 |

## In these collections

- [Earth tone swatches](https://grabient.com/earth-tone-swatches)
- [Desert colors](https://grabient.com/desert-colors)

## Other forms

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