# Navy mauve pink horizon

Analogous navy, pink and lavender linear gradient with 8 colors: #1c266d, #274174, #5f5c80, #a97693, #f28db0, #fda4d1, #ffb9f8, #decbff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous navy, pink and lavender linear gradient
- Seed: `kcT1nAsKG-76UwvPm8a4K7BmgrPruqb3bxw8g`
- Page: https://grabient.com/kcT1nAsKG-76UwvPm8a4K7BmgrPruqb3bxw8g?steps=8&angle=180
- Drawn as: linear gradient, 8 steps, 180 degrees
- Kinds: dark to light
- 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 | `#1c266d` | `oklch(31.10% 0.1226 270.70)` | After Work Blue | white, 13.5 to 1 |
| 2 | `#274174` | `oklch(38.19% 0.0923 262.25)` | Mystification | white, 10 to 1 |
| 3 | `#5f5c80` | `oklch(49.21% 0.0565 287.61)` | Psychic | white, 6.3 to 1 |
| 4 | `#a97693` | `oklch(62.60% 0.0758 344.68)` | Poise | black, 5.6 to 1 |
| 5 | `#f28db0` | `oklch(75.98% 0.1281 358.41)` | Astilbe | black, 9.2 to 1 |
| 6 | `#fda4d1` | `oklch(81.89% 0.1185 347.85)` | Corinthian Pink | black, 11.3 to 1 |
| 7 | `#ffb9f8` | `oklch(87.01% 0.1137 329.88)` | Distilled Rose | black, 13.5 to 1 |
| 8 | `#decbff` | `oklch(87.40% 0.0736 301.35)` | Foggy Heath | black, 14 to 1 |

## CSS

```css
background: linear-gradient(180deg, #1c266d 0.0%, #274174 14.3%, #5f5c80 28.6%, #a97693 42.9%, #f28db0 57.1%, #fda4d1 71.4%, #ffb9f8 85.7%, #decbff 100.0%);
background: linear-gradient(180deg in oklch, oklch(31.10% 0.1226 270.70) 0.0%, oklch(38.19% 0.0923 262.25) 14.3%, oklch(49.21% 0.0565 287.61) 28.6%, oklch(62.60% 0.0758 344.68) 42.9%, oklch(75.98% 0.1281 358.41) 57.1%, oklch(81.89% 0.1185 347.85) 71.4%, oklch(87.01% 0.1137 329.88) 85.7%, oklch(87.40% 0.0736 301.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.311 | 0.123 | 270.7 |
| 2 | 0.382 | 0.092 | 262.2 |
| 3 | 0.492 | 0.056 | 287.6 |
| 4 | 0.626 | 0.076 | 344.7 |
| 5 | 0.76 | 0.128 | 358.4 |
| 6 | 0.819 | 0.119 | 347.8 |
| 7 | 0.87 | 0.114 | 329.9 |
| 8 | 0.874 | 0.077 | 301.3 |

## In these collections

- [Pink and blue gradients](https://grabient.com/pink-and-blue-gradients)
- [Dusk gradients](https://grabient.com/dusk-gradients)

## Other forms

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