# Butter cyan violet shadow

Beige, light blue, purple and navy linear swatches with 4 colors: #fff4c9, #23cfe3, #8e43e9, #2b1b3d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Beige, light blue, purple and navy linear swatches
- Seed: `kU9SlEY69NMhVSshF8Bg`
- Page: https://grabient.com/kU9SlEY69NMhVSshF8Bg?style=linearSwatches&steps=4&angle=110
- Drawn as: linear swatches, 4 steps, 110 degrees
- Kinds: light to dark, vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 14.3 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 | `#fff4c9` | `oklch(96.46% 0.0565 95.62)` | Pure Laughter | black, 19 to 1 |
| 2 | `#23cfe3` | `oklch(78.35% 0.1295 207.64)` | Aztec Turquoise | black, 11.1 to 1 |
| 3 | `#8e43e9` | `oklch(56.69% 0.2343 299.58)` | Chaste Blossoms | white, 5 to 1 |
| 4 | `#2b1b3d` | `oklch(25.98% 0.0648 303.81)` | Blackcurrant | white, 15.8 to 1 |

## CSS

```css
background: linear-gradient(110deg, #fff4c9 0.000% 25.000%, #23cfe3 25.000% 50.000%, #8e43e9 50.000% 75.000%, #2b1b3d 75.000% 100.000%);
background: linear-gradient(110deg, oklch(96.46% 0.0565 95.62) 0.000% 25.000%, oklch(78.35% 0.1295 207.64) 25.000% 50.000%, oklch(56.69% 0.2343 299.58) 50.000% 75.000%, oklch(25.98% 0.0648 303.81) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.056 | 95.6 |
| 2 | 0.783 | 0.13 | 207.6 |
| 3 | 0.567 | 0.234 | 299.6 |
| 4 | 0.26 | 0.065 | 303.8 |

## In these collections

- [Surreal colors](https://grabient.com/surreal-colors)

## Other forms

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