# Pink and Blue: Dusty blue and gray

The "Pink and Blue: Dusty blue and gray" palette brings together blue, gray, red, and light magenta. The colors span a narrow lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light magenta.

- Also called: Gray and lavender angular swatches
- Seed: `kWfCKzxAHBUuFzNTjb12pU9o`
- Page: https://grabient.com/kWfCKzxAHBUuFzNTjb12pU9o?style=angularSwatches&steps=10&angle=20
- Drawn as: angular swatches, 10 steps, 20 degrees
- Kinds: neutral
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.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 | `#4d627a` | `oklch(48.82% 0.0469 252.42)` | Night Market | white, 6.2 to 1 |
| 2 | `#596675` | `oklch(50.53% 0.0278 251.46)` | Blue Zephyr | white, 5.8 to 1 |
| 3 | `#696c70` | `oklch(52.94% 0.0068 258.42)` | Beautiful Darkness | white, 5.2 to 1 |
| 4 | `#737274` | `oklch(55.41% 0.0034 297.94)` | Paris Paving | white, 4.7 to 1 |
| 5 | `#80787b` | `oklch(58.09% 0.0109 355.57)` | Storm Front | black, 4.8 to 1 |
| 6 | `#8e7e7e` | `oklch(60.84% 0.0193 16.89)` | Rocket Metallic | black, 5.4 to 1 |
| 7 | `#9c8489` | `oklch(63.69% 0.0295 3.46)` | Orchard Plum | black, 6 to 1 |
| 8 | `#a78a97` | `oklch(66.43% 0.0397 349.45)` | Reserve | black, 6.7 to 1 |
| 9 | `#b290a6` | `oklch(69.23% 0.0502 339.77)` | Soft Impact | black, 7.4 to 1 |
| 10 | `#b995b2` | `oklch(71.26% 0.0579 332.74)` | Blooming Lilac | black, 8 to 1 |

## CSS

```css
background: conic-gradient(from 20deg, #4d627a 0.000% 10.000%, #596675 10.000% 20.000%, #696c70 20.000% 30.000%, #737274 30.000% 40.000%, #80787b 40.000% 50.000%, #8e7e7e 50.000% 60.000%, #9c8489 60.000% 70.000%, #a78a97 70.000% 80.000%, #b290a6 80.000% 90.000%, #b995b2 90.000% 100.000%);
background: conic-gradient(from 20deg, oklch(48.82% 0.0469 252.42) 0.000% 10.000%, oklch(50.53% 0.0278 251.46) 10.000% 20.000%, oklch(52.94% 0.0068 258.42) 20.000% 30.000%, oklch(55.41% 0.0034 297.94) 30.000% 40.000%, oklch(58.09% 0.0109 355.57) 40.000% 50.000%, oklch(60.84% 0.0193 16.89) 50.000% 60.000%, oklch(63.69% 0.0295 3.46) 60.000% 70.000%, oklch(66.43% 0.0397 349.45) 70.000% 80.000%, oklch(69.23% 0.0502 339.77) 80.000% 90.000%, oklch(71.26% 0.0579 332.74) 90.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.488 | 0.047 | 252.4 |
| 2 | 0.535 | 0.004 | 264 |
| 3 | 0.594 | 0.015 | 372.9 |
| 4 | 0.657 | 0.037 | 351.8 |
| 5 | 0.713 | 0.058 | 332.7 |

## In these collections

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

## Other forms

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