# Pink and Blue: Navy and magenta

The "Pink and Blue: Navy and magenta" palette brings together dark blue, blue, magenta, and light red. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light red.

- Also called: Navy, blue, purple and pink linear swatches
- Seed: `kWM0m1v7o9jrBy9RukG5J1Bo`
- Page: https://grabient.com/kWM0m1v7o9jrBy9RukG5J1Bo?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 9 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 | `#001534` | `oklch(20.10% 0.0676 255.58)` | Squid’s Ink | white, 18.1 to 1 |
| 2 | `#006c97` | `oklch(50.00% 0.1063 235.18)` | Cairns | white, 5.8 to 1 |
| 3 | `#901d7e` | `oklch(46.06% 0.1805 335.55)` | Noble Plum | white, 7.8 to 1 |
| 4 | `#d25e9a` | `oklch(64.17% 0.1598 350.34)` | Phlox Pink | black, 5.7 to 1 |
| 5 | `#e8a6b4` | `oklch(79.13% 0.0799 5.14)` | Love at First Sight | black, 10.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #001534 0.000% 20.000%, #006c97 20.000% 40.000%, #901d7e 40.000% 60.000%, #d25e9a 60.000% 80.000%, #e8a6b4 80.000% 100.000%);
background: linear-gradient(90deg, oklch(20.10% 0.0676 255.58) 0.000% 20.000%, oklch(50.00% 0.1063 235.18) 20.000% 40.000%, oklch(46.06% 0.1805 335.55) 40.000% 60.000%, oklch(64.17% 0.1598 350.34) 60.000% 80.000%, oklch(79.13% 0.0799 5.14) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.101 | 255.2 |
| 2 | 0.5 | 0.16 | 235.2 |
| 3 | 0.461 | 0.181 | 335.5 |
| 4 | 0.642 | 0.16 | 350.3 |
| 5 | 0.791 | 0.08 | 365.1 |

## In these collections

- [Pink and blue swatches](https://grabient.com/pink-and-blue-swatches)

## Other forms

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