# Gray, beige and teal angular gradient

Gray, beige and teal angular gradient with 11 colors: #7d87ac, #a594b3, #cba7b5, #e5b6b1, #f4c7ad, #f9dabc, #f3e5c7, #cee0c5, #9fcac2, #67a1a4, #337e87. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYoCnCYRDJe2Wxv1j8P5pFLUYbQq`
- Page: https://grabient.com/kYoCnCYRDJe2Wxv1j8P5pFLUYbQq?style=angularGradient&steps=11&angle=180
- Drawn as: angular gradient, 11 steps, 180 degrees
- Kinds: light center, pastel, light, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.7 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 | `#7d87ac` | `oklch(62.99% 0.0565 272.81)` | Purple Impression | black, 5.9 to 1 |
| 2 | `#a594b3` | `oklch(69.07% 0.0500 309.27)` | Gleeful Joy | black, 7.4 to 1 |
| 3 | `#cba7b5` | `oklch(76.38% 0.0455 353.13)` | Fragrant Lilac | black, 9.7 to 1 |
| 4 | `#e5b6b1` | `oklch(81.74% 0.0543 25.62)` | Pink Dust | black, 11.6 to 1 |
| 5 | `#f4c7ad` | `oklch(86.22% 0.0620 52.30)` | Bellini | black, 13.6 to 1 |
| 6 | `#f9dabc` | `oklch(90.72% 0.0531 66.90)` | Toes in the Sand | black, 15.8 to 1 |
| 7 | `#f3e5c7` | `oklch(92.52% 0.0427 86.12)` | Sausalito | black, 16.8 to 1 |
| 8 | `#cee0c5` | `oklch(88.61% 0.0419 134.86)` | Soft Moss | black, 15.1 to 1 |
| 9 | `#9fcac2` | `oklch(80.71% 0.0469 182.28)` | Wave Runner | black, 11.7 to 1 |
| 10 | `#67a1a4` | `oklch(67.18% 0.0609 199.92)` | Folk Song | black, 7.2 to 1 |
| 11 | `#337e87` | `oklch(55.12% 0.0744 205.53)` | Sea Swimmer | white, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #7d87ac 0.0%, #a594b3 10.0%, #cba7b5 20.0%, #e5b6b1 30.0%, #f4c7ad 40.0%, #f9dabc 50.0%, #f3e5c7 60.0%, #cee0c5 70.0%, #9fcac2 80.0%, #67a1a4 90.0%, #337e87 100.0%);
background: conic-gradient(from 180deg in oklch, oklch(62.99% 0.0565 272.81) 0.0%, oklch(69.07% 0.0500 309.27) 10.0%, oklch(76.38% 0.0455 353.13) 20.0%, oklch(81.74% 0.0543 25.62) 30.0%, oklch(86.22% 0.0620 52.30) 40.0%, oklch(90.72% 0.0531 66.90) 50.0%, oklch(92.52% 0.0427 86.12) 60.0%, oklch(88.61% 0.0419 134.86) 70.0%, oklch(80.71% 0.0469 182.28) 80.0%, oklch(67.18% 0.0609 199.92) 90.0%, oklch(55.12% 0.0744 205.53) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.63 | 0.056 | 272.8 |
| 2 | 0.764 | 0.045 | 353.1 |
| 3 | 0.862 | 0.062 | 412.3 |
| 4 | 0.925 | 0.043 | 446.1 |
| 5 | 0.807 | 0.047 | 542.3 |
| 6 | 0.551 | 0.074 | 565.5 |

## In these collections

- [Between tides](https://grabient.com/between-tides)

## Other forms

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