# Navy, gray and pink linear gradient

Navy, gray and pink linear gradient with 9 colors: #172848, #243858, #385375, #537599, #7399bd, #9bb7d3, #c9c9de, #f5cfd0, #ffc6b7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcRy-6rJa_juYPzMmT93Jc_-iLQdwjkxbxxDA`
- Page: https://grabient.com/kcRy-6rJa_juYPzMmT93Jc_-iLQdwjkxbxxDA?steps=9&angle=0
- Drawn as: linear gradient, 9 steps, 0 degrees
- Kinds: dark to light, muted, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 10.3 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 | `#172848` | `oklch(27.95% 0.0648 262.27)` | Rurikon Blue | white, 14.6 to 1 |
| 2 | `#243858` | `oklch(33.88% 0.0620 259.67)` | Navy Peony | white, 11.8 to 1 |
| 3 | `#385375` | `oklch(43.68% 0.0650 254.27)` | Aerostatics | white, 7.8 to 1 |
| 4 | `#537599` | `oklch(55.21% 0.0685 249.71)` | Trustee | white, 4.7 to 1 |
| 5 | `#7399bd` | `oklch(66.78% 0.0684 247.27)` | Blue Ballad | black, 7 to 1 |
| 6 | `#9bb7d3` | `oklch(76.75% 0.0512 249.41)` | Blue Satin | black, 10 to 1 |
| 7 | `#c9c9de` | `oklch(84.26% 0.0288 286.13)` | Gregorio Garden | black, 12.8 to 1 |
| 8 | `#f5cfd0` | `oklch(88.78% 0.0422 16.22)` | Strawberry Ripple | black, 14.7 to 1 |
| 9 | `#ffc6b7` | `oklch(87.40% 0.0685 35.42)` | Peach Fuzz | black, 14 to 1 |

## CSS

```css
background: linear-gradient(0deg, #172848 0.0%, #243858 12.5%, #385375 25.0%, #537599 37.5%, #7399bd 50.0%, #9bb7d3 62.5%, #c9c9de 75.0%, #f5cfd0 87.5%, #ffc6b7 100.0%);
background: linear-gradient(0deg in oklch, oklch(27.95% 0.0648 262.27) 0.0%, oklch(33.88% 0.0620 259.67) 12.5%, oklch(43.68% 0.0650 254.27) 25.0%, oklch(55.21% 0.0685 249.71) 37.5%, oklch(66.78% 0.0684 247.27) 50.0%, oklch(76.75% 0.0512 249.41) 62.5%, oklch(84.26% 0.0288 286.13) 75.0%, oklch(88.78% 0.0422 16.22) 87.5%, oklch(87.40% 0.0685 35.42) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.065 | 262.3 |
| 2 | 0.35 | 0.062 | 259.1 |
| 3 | 0.469 | 0.066 | 252.8 |
| 4 | 0.602 | 0.069 | 248.5 |
| 5 | 0.728 | 0.063 | 248.5 |
| 6 | 0.823 | 0.03 | 264.4 |
| 7 | 0.886 | 0.039 | 369 |
| 8 | 0.874 | 0.077 | 395.4 |

## In these collections

- [Sunrise gradients](https://grabient.com/sunrise-gradients)

## Other forms

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