# Pastel teal, blue, lavender and pink angular swatches

Pastel teal, blue, lavender and pink angular swatches with 5 colors: #85e1bb, #6fd0de, #8da0e8, #c582d3, #e290b4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW1kx15iJE9unR5ZsUW3ydDo`
- Page: https://grabient.com/kW1kx15iJE9unR5ZsUW3ydDo?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: pastel, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 1.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 | `#85e1bb` | `oklch(84.25% 0.1047 165.23)` | Sprig of Mint | black, 13.5 to 1 |
| 2 | `#6fd0de` | `oklch(80.31% 0.0937 207.50)` | Summer of ’82 | black, 11.7 to 1 |
| 3 | `#8da0e8` | `oklch(72.05% 0.1075 271.97)` | Cold Lips | black, 8.3 to 1 |
| 4 | `#c582d3` | `oklch(70.47% 0.1350 320.58)` | Purception | black, 7.5 to 1 |
| 5 | `#e290b4` | `oklch(74.80% 0.1075 352.28)` | Rosebloom | black, 8.9 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #85e1bb 0.000% 20.000%, #6fd0de 20.000% 40.000%, #8da0e8 40.000% 60.000%, #c582d3 60.000% 80.000%, #e290b4 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(84.25% 0.1047 165.23) 0.000% 20.000%, oklch(80.31% 0.0937 207.50) 20.000% 40.000%, oklch(72.05% 0.1075 271.97) 40.000% 60.000%, oklch(70.47% 0.1350 320.58) 60.000% 80.000%, oklch(74.80% 0.1075 352.28) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.843 | 0.105 | 165.2 |
| 2 | 0.803 | 0.094 | 207.5 |
| 3 | 0.72 | 0.107 | 272 |
| 4 | 0.705 | 0.135 | 320.6 |
| 5 | 0.748 | 0.107 | 352.3 |

## In these collections

- [Cape daisy sea breeze](https://grabient.com/cape-daisy-sea-breeze)
- [Vaporwave gradients](https://grabient.com/vaporwave-gradients)

## Other forms

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