# Blue Hour Valentine

Five bands move from steel blue through plum, silver gray, plum, and finish in ivory. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. It suits invitations, beauty packaging, soft campaigns, and intimate editorial backgrounds. The ordered progression remains recognizable at both thumbnail and full-background scale.

- Also called: Blue, maroon, gray and purple angular swatches
- Seed: `kWpR6qMirOmqLPM-s8MdgbCw`
- Page: https://grabient.com/kWpR6qMirOmqLPM-s8MdgbCw?style=angularSwatches&steps=5&angle=300
- Drawn as: angular swatches, 5 steps, 300 degrees
- Kinds: muted, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.1 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 | `#7893a6` | `oklch(64.96% 0.0413 239.06)` | American Anthem | black, 6.5 to 1 |
| 2 | `#762340` | `oklch(39.37% 0.1171 2.70)` | Caviar Couture | white, 10 to 1 |
| 3 | `#d8c3d2` | `oklch(83.86% 0.0303 336.28)` | Chinaberry Bloom | black, 12.6 to 1 |
| 4 | `#9e365a` | `oklch(49.21% 0.1419 2.70)` | Royal Flush | white, 6.7 to 1 |
| 5 | `#f3e3e1` | `oklch(92.91% 0.0179 27.01)` | Pink Emulsion | black, 16.9 to 1 |

## CSS

```css
background: conic-gradient(from 300deg, #7893a6 0.000% 20.000%, #762340 20.000% 40.000%, #d8c3d2 40.000% 60.000%, #9e365a 60.000% 80.000%, #f3e3e1 80.000% 100.000%);
background: conic-gradient(from 300deg, oklch(64.96% 0.0413 239.06) 0.000% 20.000%, oklch(39.37% 0.1171 2.70) 20.000% 40.000%, oklch(83.86% 0.0303 336.28) 40.000% 60.000%, oklch(49.21% 0.1419 2.70) 60.000% 80.000%, oklch(92.91% 0.0179 27.01) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.65 | 0.041 | 239.1 |
| 2 | 0.394 | 0.117 | 362.7 |
| 3 | 0.839 | 0.03 | 336.3 |
| 4 | 0.492 | 0.142 | 362.7 |
| 5 | 0.929 | 0.018 | 387 |

## In these collections

- [Romantic color palette](https://grabient.com/romantic-color-palette)

## Other forms

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