# Blue and rose color palette

The Blue and rose color palette brings together dark blue, blue, and magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits fashion mood boards and lookbook graphics. Its darkest tone is dark blue, and its lightest tone is magenta.

- Also called: Navy, blue and pink angular swatches
- Seed: `kUMDnIONJAE_CvHT1krg`
- Page: https://grabient.com/kUMDnIONJAE_CvHT1krg?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: dark to light, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.2 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 | `#100b35` | `oklch(18.90% 0.0785 281.25)` | Grim Reaper | white, 18.7 to 1 |
| 2 | `#4c29c9` | `oklch(44.49% 0.2260 282.31)` | Blue Purple | white, 8.4 to 1 |
| 3 | `#1688f2` | `oklch(62.60% 0.1833 252.72)` | Too Blue to Be True | black, 5.8 to 1 |
| 4 | `#ee3cb0` | `oklch(65.75% 0.2370 345.71)` | Pink Bite | black, 5.9 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #100b35 0.000% 25.000%, #4c29c9 25.000% 50.000%, #1688f2 50.000% 75.000%, #ee3cb0 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(18.90% 0.0785 281.25) 0.000% 25.000%, oklch(44.49% 0.2260 282.31) 25.000% 50.000%, oklch(62.60% 0.1833 252.72) 50.000% 75.000%, oklch(65.75% 0.2370 345.71) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.189 | 0.079 | 281.3 |
| 2 | 0.445 | 0.226 | 282.3 |
| 3 | 0.626 | 0.183 | 252.7 |
| 4 | 0.657 | 0.237 | 345.7 |

## In these collections

- [Sequined feather costume](https://grabient.com/sequined-feather-costume)
- [Kerala riverboat regatta](https://grabient.com/kerala-riverboat-regatta)

## Other forms

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