# Crystal ball moonlight gradient

Muted monochrome navy to light blue linear gradient with 32 colors: #444368, #47476c, #4b4b71, #4f5078, #54567f, #595d87, #5e638f, #636a96, #67709d, #6b76a3, #6f7da9, #7284ae, #768ab4, #7b91b9, #7f97be, #839ec2, #88a4c7, #8daacb, #92b1cf, #98b7d2, #9ebdd6, #a4c3d9, #aac8dd, #b0cee0, #b7d3e3, #bdd8e7, #c4deea, #cbe3ed, #d1e7f1, #d7ecf3, #dceff6, #e0f2f8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Muted monochrome navy to light blue linear gradient
- Seed: `kWZizKxhm-1kWPZqjr2eIe-I`
- Page: https://grabient.com/kWZizKxhm-1kWPZqjr2eIe-I?steps=32&angle=0
- Drawn as: linear gradient, 32 steps, 0 degrees
- Kinds: dark to light, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8 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 | `#444368` | `oklch(40.16% 0.0606 284.77)` | Wooed | white, 9.2 to 1 |
| 2 | `#47476c` | `oklch(41.36% 0.0615 284.08)` | Deepest Fig | white, 8.8 to 1 |
| 3 | `#4b4b71` | `oklch(42.96% 0.0629 283.25)` | Intense Purple | white, 8.2 to 1 |
| 4 | `#4f5078` | `oklch(44.86% 0.0645 282.26)` | Provocative | white, 7.6 to 1 |
| 5 | `#54567f` | `oklch(46.98% 0.0663 281.11)` | Mauve Dusk | white, 6.9 to 1 |
| 6 | `#595d87` | `oklch(49.20% 0.0679 279.80)` | Karmic Grape | white, 6.3 to 1 |
| 7 | `#5e638f` | `oklch(51.44% 0.0692 278.31)` | Majestic Purple | white, 5.7 to 1 |
| 8 | `#636a96` | `oklch(53.61% 0.0701 276.63)` | Wild Wisteria | white, 5.2 to 1 |
| 9 | `#67709d` | `oklch(55.60% 0.0703 274.77)` | Blueberry Patch | white, 4.7 to 1 |
| 10 | `#6b76a3` | `oklch(57.54% 0.0699 272.62)` | Blue Batik | black, 4.7 to 1 |
| 11 | `#6f7da9` | `oklch(59.50% 0.0692 270.20)` | Night Thistle | black, 5.1 to 1 |
| 12 | `#7284ae` | `oklch(61.45% 0.0682 267.58)` | Corsican Purple | black, 5.6 to 1 |
| 13 | `#768ab4` | `oklch(63.40% 0.0668 264.84)` | Wild Blue Yonder | black, 6 to 1 |
| 14 | `#7b91b9` | `oklch(65.34% 0.0652 262.03)` | Opal Violet | black, 6.5 to 1 |
| 15 | `#7f97be` | `oklch(67.26% 0.0635 259.22)` | Bel Air Blue | black, 7 to 1 |
| 16 | `#839ec2` | `oklch(69.15% 0.0616 256.49)` | Alaskan Ice | black, 7.6 to 1 |
| 17 | `#88a4c7` | `oklch(71.01% 0.0596 253.87)` | High Tide | black, 8.1 to 1 |
| 18 | `#8daacb` | `oklch(72.86% 0.0573 251.21)` | Bachelor Blue | black, 8.7 to 1 |
| 19 | `#92b1cf` | `oklch(74.71% 0.0547 248.51)` | Matte Blue | black, 9.3 to 1 |
| 20 | `#98b7d2` | `oklch(76.54% 0.0520 245.81)` | Blue Pointer | black, 10 to 1 |
| 21 | `#9ebdd6` | `oklch(78.33% 0.0491 243.14)` | Blue Crab Escape | black, 10.6 to 1 |
| 22 | `#a4c3d9` | `oklch(80.09% 0.0462 240.54)` | Blue Bows | black, 11.3 to 1 |
| 23 | `#aac8dd` | `oklch(81.80% 0.0433 238.04)` | Caspian Tide | black, 12 to 1 |
| 24 | `#b0cee0` | `oklch(83.46% 0.0406 235.67)` | Light Sky Bus | black, 12.7 to 1 |
| 25 | `#b7d3e3` | `oklch(85.08% 0.0380 233.40)` | Tiny Mr Frosty | black, 13.4 to 1 |
| 26 | `#bdd8e7` | `oklch(86.75% 0.0351 231.11)` | Watercolour Sky | black, 14.1 to 1 |
| 27 | `#c4deea` | `oklch(88.42% 0.0322 228.86)` | Skywalker | black, 14.9 to 1 |
| 28 | `#cbe3ed` | `oklch(90.04% 0.0294 226.71)` | Niagara Falls | black, 15.7 to 1 |
| 29 | `#d1e7f1` | `oklch(91.54% 0.0267 224.71)` | On Thin Ice | black, 16.4 to 1 |
| 30 | `#d7ecf3` | `oklch(92.89% 0.0242 222.94)` | Sparkling River | black, 17.1 to 1 |
| 31 | `#dceff6` | `oklch(94.02% 0.0222 221.45)` | Ice Fishing | black, 17.7 to 1 |
| 32 | `#e0f2f8` | `oklch(94.88% 0.0207 220.30)` | Wizard White | black, 18.1 to 1 |

## CSS

```css
background: linear-gradient(0deg, #444368 0.0%, #47476c 3.2%, #4b4b71 6.5%, #4f5078 9.7%, #54567f 12.9%, #595d87 16.1%, #5e638f 19.4%, #636a96 22.6%, #67709d 25.8%, #6b76a3 29.0%, #6f7da9 32.3%, #7284ae 35.5%, #768ab4 38.7%, #7b91b9 41.9%, #7f97be 45.2%, #839ec2 48.4%, #88a4c7 51.6%, #8daacb 54.8%, #92b1cf 58.1%, #98b7d2 61.3%, #9ebdd6 64.5%, #a4c3d9 67.7%, #aac8dd 71.0%, #b0cee0 74.2%, #b7d3e3 77.4%, #bdd8e7 80.6%, #c4deea 83.9%, #cbe3ed 87.1%, #d1e7f1 90.3%, #d7ecf3 93.5%, #dceff6 96.8%, #e0f2f8 100.0%);
background: linear-gradient(0deg in oklch, oklch(40.16% 0.0606 284.77) 0.0%, oklch(41.36% 0.0615 284.08) 3.2%, oklch(42.96% 0.0629 283.25) 6.5%, oklch(44.86% 0.0645 282.26) 9.7%, oklch(46.98% 0.0663 281.11) 12.9%, oklch(49.20% 0.0679 279.80) 16.1%, oklch(51.44% 0.0692 278.31) 19.4%, oklch(53.61% 0.0701 276.63) 22.6%, oklch(55.60% 0.0703 274.77) 25.8%, oklch(57.54% 0.0699 272.62) 29.0%, oklch(59.50% 0.0692 270.20) 32.3%, oklch(61.45% 0.0682 267.58) 35.5%, oklch(63.40% 0.0668 264.84) 38.7%, oklch(65.34% 0.0652 262.03) 41.9%, oklch(67.26% 0.0635 259.22) 45.2%, oklch(69.15% 0.0616 256.49) 48.4%, oklch(71.01% 0.0596 253.87) 51.6%, oklch(72.86% 0.0573 251.21) 54.8%, oklch(74.71% 0.0547 248.51) 58.1%, oklch(76.54% 0.0520 245.81) 61.3%, oklch(78.33% 0.0491 243.14) 64.5%, oklch(80.09% 0.0462 240.54) 67.7%, oklch(81.80% 0.0433 238.04) 71.0%, oklch(83.46% 0.0406 235.67) 74.2%, oklch(85.08% 0.0380 233.40) 77.4%, oklch(86.75% 0.0351 231.11) 80.6%, oklch(88.42% 0.0322 228.86) 83.9%, oklch(90.04% 0.0294 226.71) 87.1%, oklch(91.54% 0.0267 224.71) 90.3%, oklch(92.89% 0.0242 222.94) 93.5%, oklch(94.02% 0.0222 221.45) 96.8%, oklch(94.88% 0.0207 220.30) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.061 | 284.8 |
| 2 | 0.551 | 0.07 | 275.3 |
| 3 | 0.701 | 0.061 | 255.2 |
| 4 | 0.839 | 0.04 | 235.1 |
| 5 | 0.949 | 0.021 | 220.3 |

## In these collections

- [Witchy color palette](https://grabient.com/witchy-color-palette)

## Other forms

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