# Blue and magenta color palette

The Blue and magenta color palette brings together dark blue, blue, purple, magenta, and light magenta. 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 dark blue, and its lightest tone is light magenta.

- Also called: Navy, purple, pink and blue linear gradient
- Seed: `kcNTG8qChAbM0wpAw0LUErCeMwQNGOTnuTQ84`
- Page: https://grabient.com/kcNTG8qChAbM0wpAw0LUErCeMwQNGOTnuTQ84?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: light center
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#081536` | `oklch(20.87% 0.0675 265.08)` | Liberty Blue | white, 17.8 to 1 |
| 2 | `#0b193e` | `oklch(22.59% 0.0744 265.39)` | Maastricht Blue | white, 17.2 to 1 |
| 3 | `#0e1e4a` | `oklch(25.05% 0.0844 265.70)` | Oxford Blue | white, 16.1 to 1 |
| 4 | `#132357` | `oklch(27.84% 0.0956 266.46)` | Fibonacci Blue | white, 14.9 to 1 |
| 5 | `#192964` | `oklch(30.50% 0.1062 268.17)` | Schiava Blue | white, 13.6 to 1 |
| 6 | `#212c6e` | `oklch(32.70% 0.1150 271.27)` | Blue Rose | white, 12.7 to 1 |
| 7 | `#2b2e78` | `oklch(34.63% 0.1228 275.77)` | Blue Rose | white, 11.8 to 1 |
| 8 | `#363080` | `oklch(36.49% 0.1303 281.12)` | Ballpoint Indigo | white, 11.1 to 1 |
| 9 | `#423187` | `oklch(38.39% 0.1378 286.80)` | Majestic Eggplant | white, 10.3 to 1 |
| 10 | `#4e328f` | `oklch(40.47% 0.1459 292.25)` | Blue Magenta Violet | white, 9.6 to 1 |
| 11 | `#5b3497` | `oklch(42.72% 0.1551 297.70)` | Ruthless Empress | white, 8.8 to 1 |
| 12 | `#69359e` | `oklch(45.08% 0.1648 303.31)` | Purple Heart | white, 8 to 1 |
| 13 | `#7936a5` | `oklch(47.53% 0.1743 308.91)` | Shredder Lavender | white, 7.3 to 1 |
| 14 | `#8837aa` | `oklch(50.05% 0.1826 314.32)` | Pleasant Purple | white, 6.6 to 1 |
| 15 | `#9839ae` | `oklch(52.64% 0.1901 319.54)` | Akebi Purple | white, 5.9 to 1 |
| 16 | `#a83bb1` | `oklch(55.27% 0.1984 324.84)` | Vivid Fuchsia | white, 5.3 to 1 |
| 17 | `#b93eb3` | `oklch(58.00% 0.2050 329.90)` | Ultraviolet Cryner | white, 4.7 to 1 |
| 18 | `#c844b4` | `oklch(60.85% 0.2075 334.34)` | Purple Pink | black, 4.9 to 1 |
| 19 | `#d54eb6` | `oklch(63.95% 0.2031 337.92)` | Krameria | black, 5.6 to 1 |
| 20 | `#e362b9` | `oklch(68.26% 0.1880 341.83)` | Pink Charge | black, 6.6 to 1 |
| 21 | `#ef78bf` | `oklch(72.98% 0.1670 345.33)` | Pop That Gum | black, 8.1 to 1 |
| 22 | `#f58ac5` | `oklch(76.71% 0.1465 346.89)` | Bubblegum Beam | black, 9.3 to 1 |
| 23 | `#f393cb` | `oklch(78.04% 0.1332 344.98)` | Pearly Pink | black, 9.8 to 1 |
| 24 | `#e68ecd` | `oklch(75.72% 0.1315 337.79)` | Blushed Bombshell | black, 9.1 to 1 |
| 25 | `#cb80cd` | `oklch(70.41% 0.1377 325.88)` | Purception | black, 7.4 to 1 |
| 26 | `#a96ecb` | `oklch(63.83% 0.1472 312.10)` | Rich Lavender | black, 5.8 to 1 |
| 27 | `#8860c7` | `oklch(57.72% 0.1551 299.34)` | Lusty Lavender | white, 4.6 to 1 |
| 28 | `#6f58c1` | `oklch(53.59% 0.1572 290.05)` | Fuchsia Blue | white, 5.4 to 1 |
| 29 | `#5b53b9` | `oklch(50.52% 0.1550 282.66)` | Circumorbital Ring | white, 6.1 to 1 |
| 30 | `#4b50b1` | `oklch(48.11% 0.1508 276.56)` | Brandywine Raspberry | white, 6.8 to 1 |
| 31 | `#3e4ea9` | `oklch(46.25% 0.1462 271.76)` | Dazzling Blue | white, 7.3 to 1 |
| 32 | `#344ca3` | `oklch(44.88% 0.1433 268.25)` | Dazzling Blue | white, 7.7 to 1 |

## CSS

```css
background: linear-gradient(225deg, #081536 0.0%, #0b193e 3.2%, #0e1e4a 6.5%, #132357 9.7%, #192964 12.9%, #212c6e 16.1%, #2b2e78 19.4%, #363080 22.6%, #423187 25.8%, #4e328f 29.0%, #5b3497 32.3%, #69359e 35.5%, #7936a5 38.7%, #8837aa 41.9%, #9839ae 45.2%, #a83bb1 48.4%, #b93eb3 51.6%, #c844b4 54.8%, #d54eb6 58.1%, #e362b9 61.3%, #ef78bf 64.5%, #f58ac5 67.7%, #f393cb 71.0%, #e68ecd 74.2%, #cb80cd 77.4%, #a96ecb 80.6%, #8860c7 83.9%, #6f58c1 87.1%, #5b53b9 90.3%, #4b50b1 93.5%, #3e4ea9 96.8%, #344ca3 100.0%);
background: linear-gradient(225deg in oklch, oklch(20.87% 0.0675 265.08) 0.0%, oklch(22.59% 0.0744 265.39) 3.2%, oklch(25.05% 0.0844 265.70) 6.5%, oklch(27.84% 0.0956 266.46) 9.7%, oklch(30.50% 0.1062 268.17) 12.9%, oklch(32.70% 0.1150 271.27) 16.1%, oklch(34.63% 0.1228 275.77) 19.4%, oklch(36.49% 0.1303 281.12) 22.6%, oklch(38.39% 0.1378 286.80) 25.8%, oklch(40.47% 0.1459 292.25) 29.0%, oklch(42.72% 0.1551 297.70) 32.3%, oklch(45.08% 0.1648 303.31) 35.5%, oklch(47.53% 0.1743 308.91) 38.7%, oklch(50.05% 0.1826 314.32) 41.9%, oklch(52.64% 0.1901 319.54) 45.2%, oklch(55.27% 0.1984 324.84) 48.4%, oklch(58.00% 0.2050 329.90) 51.6%, oklch(60.85% 0.2075 334.34) 54.8%, oklch(63.95% 0.2031 337.92) 58.1%, oklch(68.26% 0.1880 341.83) 61.3%, oklch(72.98% 0.1670 345.33) 64.5%, oklch(76.71% 0.1465 346.89) 67.7%, oklch(78.04% 0.1332 344.98) 71.0%, oklch(75.72% 0.1315 337.79) 74.2%, oklch(70.41% 0.1377 325.88) 77.4%, oklch(63.83% 0.1472 312.10) 80.6%, oklch(57.72% 0.1551 299.34) 83.9%, oklch(53.59% 0.1572 290.05) 87.1%, oklch(50.52% 0.1550 282.66) 90.3%, oklch(48.11% 0.1508 276.56) 93.5%, oklch(46.25% 0.1462 271.76) 96.8%, oklch(44.88% 0.1433 268.25) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.068 | 265.1 |
| 2 | 0.315 | 0.11 | 269.3 |
| 3 | 0.402 | 0.145 | 291.5 |
| 4 | 0.508 | 0.185 | 315.8 |
| 5 | 0.63 | 0.205 | 336.9 |
| 6 | 0.78 | 0.132 | 344.3 |
| 7 | 0.551 | 0.157 | 293.6 |
| 8 | 0.449 | 0.143 | 268.2 |

## In these collections

- [Retro gradients](https://grabient.com/retro-gradients)
- [Synthwave gradients](https://grabient.com/synthwave-gradients)

## Other forms

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