# Blue and rose color palette

The Blue and rose color palette brings together blue, orange, magenta, green, and pale blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits stationery systems and print layouts. Its darkest tone is blue, and its lightest tone is pale blue.

- Also called: Rainbow from blue to light blue linear swatches
- Seed: `kWm7W74MxR1pTt7oSNEd5JNg`
- Page: https://grabient.com/kWm7W74MxR1pTt7oSNEd5JNg?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark to light, vivid, rainbow
- Hues: wide
- Contrast of its darkest and lightest colors: 3.3 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 | `#3e78ff` | `oklch(61.02% 0.2104 263.67)` | Lightish Blue | black, 5.3 to 1 |
| 2 | `#ff9038` | `oklch(75.98% 0.1649 54.79)` | Instant Orange | black, 9.3 to 1 |
| 3 | `#fd54c1` | `oklch(70.87% 0.2301 345.04)` | Drunken Flamingo | black, 7.2 to 1 |
| 4 | `#98dc37` | `oklch(81.89% 0.1998 129.82)` | Poisonous Potion | black, 12.6 to 1 |
| 5 | `#dbeeff` | `oklch(94.09% 0.0303 244.98)` | Calcareous Sinter | black, 17.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3e78ff 0.000% 20.000%, #ff9038 20.000% 40.000%, #fd54c1 40.000% 60.000%, #98dc37 60.000% 80.000%, #dbeeff 80.000% 100.000%);
background: linear-gradient(90deg, oklch(61.02% 0.2104 263.67) 0.000% 20.000%, oklch(75.98% 0.1649 54.79) 20.000% 40.000%, oklch(70.87% 0.2301 345.04) 40.000% 60.000%, oklch(81.89% 0.1998 129.82) 60.000% 80.000%, oklch(94.09% 0.0303 244.98) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.249 | 263.7 |
| 2 | 0.76 | 0.209 | 414.8 |
| 3 | 0.709 | 0.23 | 345 |
| 4 | 0.819 | 0.2 | 489.8 |
| 5 | 0.941 | 0.05 | 605 |

## In these collections

- [Summer swatches](https://grabient.com/summer-swatches)
- [Bright swatches](https://grabient.com/bright-swatches)
- [Back to school swatches](https://grabient.com/back-to-school-swatches)

## Other forms

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