# Vamp Romance Twilight

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

- Also called: Maroon, gray, purple and tan angular swatches
- Seed: `kWSzsB1CHAG2GyC8kbNXB1NY`
- Page: https://grabient.com/kWSzsB1CHAG2GyC8kbNXB1NY?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: light center, muted, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 9.4 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 | `#4c1729` | `oklch(29.53% 0.0813 2.11)` | Vino Tinto | white, 14.3 to 1 |
| 2 | `#c27a8d` | `oklch(66.14% 0.0923 3.17)` | Japanese Coral | black, 6.4 to 1 |
| 3 | `#d9d0c5` | `oklch(86.22% 0.0179 72.91)` | Porcelain Basin | black, 13.7 to 1 |
| 4 | `#6b536b` | `oklch(47.64% 0.0482 326.18)` | Vintner | white, 6.8 to 1 |
| 5 | `#c0a16b` | `oklch(72.44% 0.0799 80.31)` | Silence Is Golden | black, 8.5 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #4c1729 0.000% 20.000%, #c27a8d 20.000% 40.000%, #d9d0c5 40.000% 60.000%, #6b536b 60.000% 80.000%, #c0a16b 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(29.53% 0.0813 2.11) 0.000% 20.000%, oklch(66.14% 0.0923 3.17) 20.000% 40.000%, oklch(86.22% 0.0179 72.91) 40.000% 60.000%, oklch(47.64% 0.0482 326.18) 60.000% 80.000%, oklch(72.44% 0.0799 80.31) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.295 | 0.081 | 2.1 |
| 2 | 0.661 | 0.092 | 3.2 |
| 3 | 0.862 | 0.018 | 72.9 |
| 4 | 0.476 | 0.048 | -33.8 |
| 5 | 0.724 | 0.08 | 80.3 |

## In these collections

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

## Other forms

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