# Vamp Romance Canopy

5 fan-shaped bands turn around the center through muted gray, orange, rose, pale gray, and deep blue. The lighter colors offer relief while the deeper colors support legible pale type and clear focal marks.

- Also called: Pink, maroon, gray and navy angular swatches
- Seed: `kW2xkJxBrGLCquLthsfqhAuA`
- Page: https://grabient.com/kW2xkJxBrGLCquLthsfqhAuA?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: dark center, muted, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 8 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 | `#e7c9cb` | `oklch(86.22% 0.0344 13.36)` | Pink Spinel | black, 13.6 to 1 |
| 2 | `#8a653e` | `oklch(53.54% 0.0730 66.20)` | Cambridge Leather | white, 5.2 to 1 |
| 3 | `#72203b` | `oklch(38.19% 0.1171 4.91)` | Rocking Chair | white, 10.5 to 1 |
| 4 | `#d9d0c5` | `oklch(86.22% 0.0179 72.54)` | Porcelain Basin | black, 13.7 to 1 |
| 5 | `#32334c` | `oklch(33.07% 0.0441 281.42)` | Deep Velvet | white, 12.2 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #e7c9cb 0.000% 20.000%, #8a653e 20.000% 40.000%, #72203b 40.000% 60.000%, #d9d0c5 60.000% 80.000%, #32334c 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(86.22% 0.0344 13.36) 0.000% 20.000%, oklch(53.54% 0.0730 66.20) 20.000% 40.000%, oklch(38.19% 0.1171 4.91) 40.000% 60.000%, oklch(86.22% 0.0179 72.54) 60.000% 80.000%, oklch(33.07% 0.0441 281.42) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.862 | 0.034 | 13.4 |
| 2 | 0.535 | 0.073 | 66.2 |
| 3 | 0.382 | 0.117 | 4.9 |
| 4 | 0.862 | 0.018 | 72.5 |
| 5 | 0.331 | 0.044 | -78.6 |

## In these collections

- [Vamp romantic swatches](https://grabient.com/vamp-romantic-swatches)

## Other forms

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