# Rose and blue color palette

The Rose and blue color palette brings together magenta, purple, blue, teal, off-white, light gray, and gray. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits album artwork and music event graphics. Its darkest tone is gray, and its lightest tone is off-white.

- Also called: Purple, blue, white and gray linear gradient
- Seed: `kclID6xLw6sgwutgpri-4PEOYFwLNiEDvIg_Y`
- Page: https://grabient.com/kclID6xLw6sgwutgpri-4PEOYFwLNiEDvIg_Y?steps=32&angle=270
- Drawn as: linear gradient, 32 steps, 270 degrees
- Kinds: light center, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#c44385` | `oklch(58.27% 0.1764 352.27)` | Smitten | white, 4.6 to 1 |
| 2 | `#bc438f` | `oklch(57.44% 0.1750 345.23)` | Boat Orchid | white, 4.8 to 1 |
| 3 | `#af449c` | `oklch(56.21% 0.1733 335.18)` | Safflower Purple | white, 5 to 1 |
| 4 | `#9f47a9` | `oklch(54.96% 0.1708 323.69)` | Medium Purple | white, 5.3 to 1 |
| 5 | `#8f4bb3` | `oklch(54.09% 0.1673 312.32)` | Tyrian Shimmer | white, 5.4 to 1 |
| 6 | `#8151bb` | `oklch(53.83% 0.1622 302.37)` | Fuchsia Blue | white, 5.4 to 1 |
| 7 | `#7457be` | `oklch(53.72% 0.1555 293.16)` | Fuchsia Blue | white, 5.4 to 1 |
| 8 | `#665fc0` | `oklch(54.01% 0.1477 283.94)` | Circumorbital Ring | white, 5.3 to 1 |
| 9 | `#5a68c2` | `oklch(55.01% 0.1398 274.06)` | Borage Blue | white, 5 to 1 |
| 10 | `#4c75c5` | `oklch(57.06% 0.1327 262.80)` | Diva Violet | black, 4.6 to 1 |
| 11 | `#3887ca` | `oklch(60.45% 0.1280 247.61)` | Casting Sea | black, 5.4 to 1 |
| 12 | `#199ccc` | `oklch(64.84% 0.1242 230.18)` | Structural Blue | black, 6.6 to 1 |
| 13 | `#19b0cb` | `oklch(69.75% 0.1190 214.49)` | Havasupai Falls | black, 8.1 to 1 |
| 14 | `#42c1cd` | `oklch(74.65% 0.1098 204.51)` | Baharroth Blue | black, 9.7 to 1 |
| 15 | `#6ccfd8` | `oklch(79.72% 0.0933 203.87)` | Throat Chakra | black, 11.5 to 1 |
| 16 | `#9bddea` | `oklch(85.82% 0.0691 211.46)` | Luminescent Blue | black, 13.9 to 1 |
| 17 | `#c6ebf9` | `oklch(91.70% 0.0427 222.97)` | Frosty Day | black, 16.5 to 1 |
| 18 | `#e5f4fd` | `oklch(95.96% 0.0202 234.02)` | Kodama White | black, 18.7 to 1 |
| 19 | `#f2f7fa` | `oklch(97.23% 0.0071 240.43)` | Distant Horizon | black, 19.4 to 1 |
| 20 | `#edeff1` | `oklch(95.19% 0.0037 243.13)` | White Whale | black, 18.2 to 1 |
| 21 | `#dee2e5` | `oklch(90.97% 0.0062 244.12)` | January Dawn | black, 16 to 1 |
| 22 | `#cad1d7` | `oklch(85.80% 0.0111 244.48)` | Light Starlight | black, 13.6 to 1 |
| 23 | `#b9c2ca` | `oklch(80.92% 0.0149 245.31)` | Icebreaker | black, 11.6 to 1 |
| 24 | `#abb4bd` | `oklch(76.64% 0.0165 247.23)` | Cloud Cover | black, 10 to 1 |
| 25 | `#9ca6b0` | `oklch(72.09% 0.0183 249.58)` | Great Falls | black, 8.5 to 1 |
| 26 | `#8e98a3` | `oklch(67.53% 0.0201 251.84)` | Thunderstorm | black, 7.1 to 1 |
| 27 | `#818b97` | `oklch(63.24% 0.0215 253.50)` | River Tour | black, 6 to 1 |
| 28 | `#76808c` | `oklch(59.44% 0.0223 254.06)` | Bay Wharf | black, 5.2 to 1 |
| 29 | `#6b7581` | `oklch(55.80% 0.0226 253.41)` | Sheffield Grey | white, 4.6 to 1 |
| 30 | `#616b77` | `oklch(52.44% 0.0224 252.09)` | Press Agent | white, 5.3 to 1 |
| 31 | `#59636f` | `oklch(49.64% 0.0222 250.68)` | Blue Metal | white, 6 to 1 |
| 32 | `#535e69` | `oklch(47.64% 0.0220 249.76)` | Wizard Grey | white, 6.6 to 1 |

## CSS

```css
background: linear-gradient(270deg, #c44385 0.0%, #bc438f 3.2%, #af449c 6.5%, #9f47a9 9.7%, #8f4bb3 12.9%, #8151bb 16.1%, #7457be 19.4%, #665fc0 22.6%, #5a68c2 25.8%, #4c75c5 29.0%, #3887ca 32.3%, #199ccc 35.5%, #19b0cb 38.7%, #42c1cd 41.9%, #6ccfd8 45.2%, #9bddea 48.4%, #c6ebf9 51.6%, #e5f4fd 54.8%, #f2f7fa 58.1%, #edeff1 61.3%, #dee2e5 64.5%, #cad1d7 67.7%, #b9c2ca 71.0%, #abb4bd 74.2%, #9ca6b0 77.4%, #8e98a3 80.6%, #818b97 83.9%, #76808c 87.1%, #6b7581 90.3%, #616b77 93.5%, #59636f 96.8%, #535e69 100.0%);
background: linear-gradient(270deg in oklch, oklch(58.27% 0.1764 352.27) 0.0%, oklch(57.44% 0.1750 345.23) 3.2%, oklch(56.21% 0.1733 335.18) 6.5%, oklch(54.96% 0.1708 323.69) 9.7%, oklch(54.09% 0.1673 312.32) 12.9%, oklch(53.83% 0.1622 302.37) 16.1%, oklch(53.72% 0.1555 293.16) 19.4%, oklch(54.01% 0.1477 283.94) 22.6%, oklch(55.01% 0.1398 274.06) 25.8%, oklch(57.06% 0.1327 262.80) 29.0%, oklch(60.45% 0.1280 247.61) 32.3%, oklch(64.84% 0.1242 230.18) 35.5%, oklch(69.75% 0.1190 214.49) 38.7%, oklch(74.65% 0.1098 204.51) 41.9%, oklch(79.72% 0.0933 203.87) 45.2%, oklch(85.82% 0.0691 211.46) 48.4%, oklch(91.70% 0.0427 222.97) 51.6%, oklch(95.96% 0.0202 234.02) 54.8%, oklch(97.23% 0.0071 240.43) 58.1%, oklch(95.19% 0.0037 243.13) 61.3%, oklch(90.97% 0.0062 244.12) 64.5%, oklch(85.80% 0.0111 244.48) 67.7%, oklch(80.92% 0.0149 245.31) 71.0%, oklch(76.64% 0.0165 247.23) 74.2%, oklch(72.09% 0.0183 249.58) 77.4%, oklch(67.53% 0.0201 251.84) 80.6%, oklch(63.24% 0.0215 253.50) 83.9%, oklch(59.44% 0.0223 254.06) 87.1%, oklch(55.80% 0.0226 253.41) 90.3%, oklch(52.44% 0.0224 252.09) 93.5%, oklch(49.64% 0.0222 250.68) 96.8%, oklch(47.64% 0.0220 249.76) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.583 | 0.176 | 352.3 |
| 2 | 0.539 | 0.165 | 307.9 |
| 3 | 0.567 | 0.134 | 264.6 |
| 4 | 0.76 | 0.106 | 203.3 |
| 5 | 0.972 | 0.01 | 239.2 |
| 6 | 0.803 | 0.015 | 245.5 |
| 7 | 0.61 | 0.022 | 254 |
| 8 | 0.476 | 0.022 | 249.8 |

## In these collections

- [Holographic gradients](https://grabient.com/holographic-gradients)
- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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