# Stone, blush and navy color palette

The Stone, blush and navy color palette brings together light gray, pale blue, magenta, green, and dark blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits fashion mood boards and lookbook graphics. Its darkest tone is dark blue, and its lightest tone is pale blue.

- Also called: Rainbow from gray to navy linear swatches
- Seed: `kWywugcpY_95QTjl0FBoCvRo`
- Page: https://grabient.com/kWywugcpY_95QTjl0FBoCvRo?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light center, vivid, rainbow
- Hues: tetradic
- Contrast of its darkest and lightest colors: 12.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 | `#b4c0c5` | `oklch(79.92% 0.0152 225.00)` | Moroccan Moderne | black, 11.2 to 1 |
| 2 | `#b4e8fd` | `oklch(90.16% 0.0606 225.00)` | Breaking the Ice | black, 15.8 to 1 |
| 3 | `#ff6dc6` | `oklch(74.01% 0.2006 345.47)` | Nervous Neon Pink | black, 8.2 to 1 |
| 4 | `#a0d200` | `oklch(79.92% 0.2008 124.96)` | Matcha Powder | black, 11.7 to 1 |
| 5 | `#16145a` | `oklch(25.20% 0.1199 275.02)` | Space Colonisation | white, 16.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #b4c0c5 0.000% 20.000%, #b4e8fd 20.000% 40.000%, #ff6dc6 40.000% 60.000%, #a0d200 60.000% 80.000%, #16145a 80.000% 100.000%);
background: linear-gradient(90deg, oklch(79.92% 0.0152 225.00) 0.000% 20.000%, oklch(90.16% 0.0606 225.00) 20.000% 40.000%, oklch(74.01% 0.2006 345.47) 40.000% 60.000%, oklch(79.92% 0.2008 124.96) 60.000% 80.000%, oklch(25.20% 0.1199 275.02) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.799 | 0.015 | 225 |
| 2 | 0.902 | 0.061 | 225 |
| 3 | 0.74 | 0.22 | 345.5 |
| 4 | 0.799 | 0.22 | 485 |
| 5 | 0.252 | 0.12 | 635 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)
- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)
- [Y2K swatches](https://grabient.com/y2k-swatches)

## Other forms

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