# Blue and rose color palette

The Blue and rose color palette brings together dark blue, teal, magenta, gold, and blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits editorial layouts and period-inspired packaging. Its darkest tone is dark blue, and its lightest tone is gold.

- Also called: Navy, pink, yellow and blue angular swatches
- Seed: `kWNR_L06k09VL0zst0qzEKso`
- Page: https://grabient.com/kWNR_L06k09VL0zst0qzEKso?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: light center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 11.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 | `#17152b` | `oklch(20.87% 0.0427 286.17)` | Sambucus | white, 17.8 to 1 |
| 2 | `#00a7a4` | `oklch(65.75% 0.1126 193.18)` | Royal Cloak | black, 7 to 1 |
| 3 | `#f14e99` | `oklch(66.93% 0.2081 355.92)` | Tutuji Pink | black, 6.2 to 1 |
| 4 | `#fac846` | `oklch(85.43% 0.1516 86.80)` | Sunny Mood | black, 13.3 to 1 |
| 5 | `#7669e7` | `oklch(59.84% 0.1833 284.06)` | Medium Slate Blue | black, 4.9 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #17152b 0.000% 20.000%, #00a7a4 20.000% 40.000%, #f14e99 40.000% 60.000%, #fac846 60.000% 80.000%, #7669e7 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(20.87% 0.0427 286.17) 0.000% 20.000%, oklch(65.75% 0.1126 193.18) 20.000% 40.000%, oklch(66.93% 0.2081 355.92) 40.000% 60.000%, oklch(85.43% 0.1516 86.80) 60.000% 80.000%, oklch(59.84% 0.1833 284.06) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.043 | 286.2 |
| 2 | 0.657 | 0.113 | 193.2 |
| 3 | 0.669 | 0.208 | 355.9 |
| 4 | 0.854 | 0.152 | 446.8 |
| 5 | 0.598 | 0.183 | 284.1 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Retro swatches](https://grabient.com/retro-swatches)

## Other forms

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