# Off-white and navy vivid multicolor palette

The Off-white and navy vivid multicolor palette brings together off-white, light magenta, purple, and dark blue. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Seamless pink, purple and blue angular gradient
- Seed: `ka-QARYTk7tb5PCkQDlVnHG2K-Q7_AFBg`
- Page: https://grabient.com/ka-QARYTk7tb5PCkQDlVnHG2K-Q7_AFBg?style=angularGradient&steps=34
- Drawn as: angular gradient, 34 steps, 90 degrees
- Kinds: dark center, vivid, seamless
- Hues: wide
- Contrast of its darkest and lightest colors: 14.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 | `#f8f8f8` | `oklch(98.03% 0.0000 89.88)` | Zhēn Zhū Bái Pearl | black, 19.8 to 1 |
| 2 | `#fcebea` | `oklch(95.23% 0.0187 19.50)` | Placebo Red | black, 18.1 to 1 |
| 3 | `#fed6d9` | `oklch(91.19% 0.0447 13.31)` | We Peep | black, 15.8 to 1 |
| 4 | `#ffbfcb` | `oklch(86.53% 0.0754 6.04)` | Pink | black, 13.5 to 1 |
| 5 | `#fea6c3` | `oklch(81.90% 0.1086 358.44)` | Taffy Pink | black, 11.4 to 1 |
| 6 | `#fb8fc2` | `oklch(77.92% 0.1415 351.22)` | Cochonnet | black, 9.8 to 1 |
| 7 | `#f97cc8` | `oklch(75.24% 0.1736 345.03)` | Pink Plastic Fantastic | black, 8.7 to 1 |
| 8 | `#fd6ad5` | `oklch(74.01% 0.2128 339.68)` | Rose Pink | black, 8.2 to 1 |
| 9 | `#ff5de5` | `oklch(73.49% 0.2435 334.65)` | Candy Pink | black, 7.9 to 1 |
| 10 | `#ff4bf9` | `oklch(72.87% 0.2781 329.41)` | Surati Pink | black, 7.6 to 1 |
| 11 | `#ed52ff` | `oklch(71.35% 0.2674 323.46)` | Phenomenal Pink | black, 7.2 to 1 |
| 12 | `#d353ff` | `oklch(68.11% 0.2559 316.28)` | Pink Fever | black, 6.4 to 1 |
| 13 | `#ae40ff` | `oklch(61.73% 0.2651 306.03)` | Pisces Vivid Amethyst | black, 4.9 to 1 |
| 14 | `#7c0bfd` | `oklch(52.64% 0.2885 292.90)` | Poisoning Purple | white, 6.3 to 1 |
| 15 | `#4415d0` | `oklch(42.84% 0.2467 279.38)` | Blue Copper Ore | white, 9.2 to 1 |
| 16 | `#1517a1` | `oklch(34.34% 0.2071 267.97)` | Dark Galaxy | white, 12.6 to 1 |
| 17 | `#00246a` | `oklch(29.12% 0.1279 261.26)` | Deep Sea Nightmare | white, 14.3 to 1 |
| 18 | `#00246a` | `oklch(29.07% 0.1294 261.46)` | Deep Sea Nightmare | white, 14.4 to 1 |
| 19 | `#17199d` | `oklch(34.17% 0.1999 268.60)` | Space Dust | white, 12.6 to 1 |
| 20 | `#451dc8` | `oklch(42.55% 0.2342 280.46)` | Blue Depression | white, 9.2 to 1 |
| 21 | `#7c1df1` | `oklch(52.24% 0.2713 294.40)` | Poisoning Purple | white, 6.3 to 1 |
| 22 | `#b235ff` | `oklch(61.28% 0.2760 307.89)` | Cool Purple | black, 4.8 to 1 |
| 23 | `#d947ff` | `oklch(67.72% 0.2713 318.39)` | Geisha Pink | black, 6.2 to 1 |
| 24 | `#f04bff` | `oklch(71.13% 0.2758 324.30)` | Phenomenal Pink | black, 7.1 to 1 |
| 25 | `#fc4dff` | `oklch(72.94% 0.2796 327.33)` | Surati Pink | black, 7.6 to 1 |
| 26 | `#fd5df4` | `oklch(73.90% 0.2530 329.88)` | Magenta Stream | black, 8 to 1 |
| 27 | `#fc6de4` | `oklch(74.76% 0.2192 334.38)` | Candy Pink | black, 8.4 to 1 |
| 28 | `#ff7dd0` | `oklch(76.30% 0.1835 343.26)` | Pout Pink | black, 9 to 1 |
| 29 | `#ff96b9` | `oklch(79.21% 0.1313 359.24)` | Saira Red | black, 10.3 to 1 |
| 30 | `#ffb1ab` | `oklch(83.38% 0.0919 24.13)` | Cornflower Lilac | black, 12.1 to 1 |
| 31 | `#ffccab` | `oklch(88.17% 0.0726 54.07)` | Peachy Pico | black, 14.4 to 1 |
| 32 | `#f8e6c2` | `oklch(92.96% 0.0508 84.59)` | Havana Cream | black, 17 to 1 |
| 33 | `#f6f7e7` | `oklch(97.12% 0.0211 111.25)` | Ivory Keys | black, 19.3 to 1 |
| 34 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 20.9 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #f8f8f8 0.0%, #fcebea 3.0%, #fed6d9 6.1%, #ffbfcb 9.1%, #fea6c3 12.1%, #fb8fc2 15.2%, #f97cc8 18.2%, #fd6ad5 21.2%, #ff5de5 24.2%, #ff4bf9 27.3%, #ed52ff 30.3%, #d353ff 33.3%, #ae40ff 36.4%, #7c0bfd 39.4%, #4415d0 42.4%, #1517a1 45.5%, #00246a 48.5%, #00246a 51.5%, #17199d 54.5%, #451dc8 57.6%, #7c1df1 60.6%, #b235ff 63.6%, #d947ff 66.7%, #f04bff 69.7%, #fc4dff 72.7%, #fd5df4 75.8%, #fc6de4 78.8%, #ff7dd0 81.8%, #ff96b9 84.8%, #ffb1ab 87.9%, #ffccab 90.9%, #f8e6c2 93.9%, #f6f7e7 97.0%, #ffffff 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(98.03% 0.0000 89.88) 0.0%, oklch(95.23% 0.0187 19.50) 3.0%, oklch(91.19% 0.0447 13.31) 6.1%, oklch(86.53% 0.0754 6.04) 9.1%, oklch(81.90% 0.1086 358.44) 12.1%, oklch(77.92% 0.1415 351.22) 15.2%, oklch(75.24% 0.1736 345.03) 18.2%, oklch(74.01% 0.2128 339.68) 21.2%, oklch(73.49% 0.2435 334.65) 24.2%, oklch(72.87% 0.2781 329.41) 27.3%, oklch(71.35% 0.2674 323.46) 30.3%, oklch(68.11% 0.2559 316.28) 33.3%, oklch(61.73% 0.2651 306.03) 36.4%, oklch(52.64% 0.2885 292.90) 39.4%, oklch(42.84% 0.2467 279.38) 42.4%, oklch(34.34% 0.2071 267.97) 45.5%, oklch(29.12% 0.1279 261.26) 48.5%, oklch(29.07% 0.1294 261.46) 51.5%, oklch(34.17% 0.1999 268.60) 54.5%, oklch(42.55% 0.2342 280.46) 57.6%, oklch(52.24% 0.2713 294.40) 60.6%, oklch(61.28% 0.2760 307.89) 63.6%, oklch(67.72% 0.2713 318.39) 66.7%, oklch(71.13% 0.2758 324.30) 69.7%, oklch(72.94% 0.2796 327.33) 72.7%, oklch(73.90% 0.2530 329.88) 75.8%, oklch(74.76% 0.2192 334.38) 78.8%, oklch(76.30% 0.1835 343.26) 81.8%, oklch(79.21% 0.1313 359.24) 84.8%, oklch(83.38% 0.0919 24.13) 87.9%, oklch(88.17% 0.0726 54.07) 90.9%, oklch(92.96% 0.0508 84.59) 93.9%, oklch(97.12% 0.0211 111.25) 97.0%, oklch(100.00% 0.0000 89.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0 | 23.9 |
| 2 | 0.764 | 0.157 | -12 |
| 3 | 0.681 | 0.333 | -43.7 |
| 4 | 0.283 | 0.176 | -99.7 |
| 5 | 0.677 | 0.313 | -41.6 |
| 6 | 0.776 | 0.171 | -9.9 |
| 7 | 1 | 0 | 129.6 |

## In these collections

- [Vivid multicolor gradients](https://grabient.com/vivid-multicolor-gradients)

## Other forms

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