# Lavender, blue, purple and light blue angular swatches

Lavender, blue, purple and light blue angular swatches with 5 colors: #b995b2, #123ed2, #225ec4, #9e276d, #95cbf3. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWtSrtOdM30A-P29vcp6B0zI`
- Page: https://grabient.com/kWtSrtOdM30A-P29vcp6B0zI?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: dark center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 4.5 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 | `#b995b2` | `oklch(71.26% 0.0579 333.28)` | Blooming Lilac | black, 8 to 1 |
| 2 | `#123ed2` | `oklch(45.28% 0.2287 264.59)` | Third Eye Chakra | white, 7.9 to 1 |
| 3 | `#225ec4` | `oklch(50.39% 0.1709 260.37)` | Amnesia Blue | white, 6 to 1 |
| 4 | `#9e276d` | `oklch(48.43% 0.1695 349.13)` | Amaranth Deep Purple | white, 7 to 1 |
| 5 | `#95cbf3` | `oklch(81.89% 0.0799 241.34)` | Honolulu | black, 12.1 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #b995b2 0.000% 20.000%, #123ed2 20.000% 40.000%, #225ec4 40.000% 60.000%, #9e276d 60.000% 80.000%, #95cbf3 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(71.26% 0.0579 333.28) 0.000% 20.000%, oklch(45.28% 0.2287 264.59) 20.000% 40.000%, oklch(50.39% 0.1709 260.37) 40.000% 60.000%, oklch(48.43% 0.1695 349.13) 60.000% 80.000%, oklch(81.89% 0.0799 241.34) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.713 | 0.058 | 333.3 |
| 2 | 0.453 | 0.229 | 264.6 |
| 3 | 0.504 | 0.171 | 260.4 |
| 4 | 0.484 | 0.169 | 349.1 |
| 5 | 0.819 | 0.08 | 241.3 |

## In these collections

- [Pink and blue swatches](https://grabient.com/pink-and-blue-swatches)

## Other forms

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