# Blue and rose color palette

The Blue and rose color palette brings together dark blue, blue, and red. The colors span a moderate lightness range, combining strong color with clear contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is red.

- Also called: Navy, blue and pink angular swatches
- Seed: `kYQEbKLDS-jfBP3DR7-0DRAtZISm`
- Page: https://grabient.com/kYQEbKLDS-jfBP3DR7-0DRAtZISm?style=angularSwatches&steps=6&angle=225
- Drawn as: angular swatches, 6 steps, 225 degrees
- Kinds: dark to light, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5 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 | `#1f174e` | `oklch(25.20% 0.0965 284.06)` | Tetsu-Kon Blue | white, 16.3 to 1 |
| 2 | `#242b83` | `oklch(34.65% 0.1447 272.44)` | St. Patrick’s Blue | white, 11.9 to 1 |
| 3 | `#2a43b2` | `oklch(43.70% 0.1791 268.21)` | Denim | white, 8.2 to 1 |
| 4 | `#355ddb` | `oklch(52.76% 0.1970 266.10)` | Bnei Brak Bay | white, 5.5 to 1 |
| 5 | `#6c81df` | `oklch(62.99% 0.1433 272.44)` | Tanzine | black, 5.8 to 1 |
| 6 | `#f35590` | `oklch(67.72% 0.1984 1.21)` | Pansy | black, 6.5 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #1f174e 0.000% 16.667%, #242b83 16.667% 33.333%, #2a43b2 33.333% 50.000%, #355ddb 50.000% 66.667%, #6c81df 66.667% 83.333%, #f35590 83.333% 100.000%);
background: conic-gradient(from 225deg, oklch(25.20% 0.0965 284.06) 0.000% 16.667%, oklch(34.65% 0.1447 272.44) 16.667% 33.333%, oklch(43.70% 0.1791 268.21) 33.333% 50.000%, oklch(52.76% 0.1970 266.10) 50.000% 66.667%, oklch(62.99% 0.1433 272.44) 66.667% 83.333%, oklch(67.72% 0.1984 1.21) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.096 | 284.1 |
| 2 | 0.346 | 0.145 | 272.4 |
| 3 | 0.437 | 0.179 | 268.2 |
| 4 | 0.528 | 0.197 | 266.1 |
| 5 | 0.63 | 0.143 | 272.4 |
| 6 | 0.677 | 0.198 | 361.2 |

## In these collections

- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)
- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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