# Blue indigo palette

The Blue indigo palette brings together off-white, pale blue, light blue, and blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Gray to blue radial gradient
- Seed: `kY9A_N8ZQ_2Yjv5YM79yj8_bw9P4`
- Page: https://grabient.com/kY9A_N8ZQ_2Yjv5YM79yj8_bw9P4?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: light to dark, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#f1f0ff` | `oklch(96.06% 0.0198 288.99)` | Foundation White | black, 18.6 to 1 |
| 2 | `#efeeff` | `oklch(95.39% 0.0233 288.90)` | Foundation White | black, 18.2 to 1 |
| 3 | `#eceaff` | `oklch(94.48% 0.0279 288.80)` | Placebo Purple | black, 17.7 to 1 |
| 4 | `#e8e6ff` | `oklch(93.40% 0.0335 288.67)` | Cyber Lavender | black, 17.1 to 1 |
| 5 | `#e3e2ff` | `oklch(92.19% 0.0398 288.50)` | Stoic White | black, 16.5 to 1 |
| 6 | `#dfddff` | `oklch(90.91% 0.0465 288.28)` | Transparent Blue | black, 15.8 to 1 |
| 7 | `#dad8ff` | `oklch(89.62% 0.0533 288.00)` | Transparent Blue | black, 15.2 to 1 |
| 8 | `#d6d3ff` | `oklch(88.33% 0.0601 287.63)` | Pale Lavender | black, 14.6 to 1 |
| 9 | `#d1ceff` | `oklch(86.97% 0.0669 287.19)` | Lavender Blue | black, 13.9 to 1 |
| 10 | `#cbc9fe` | `oklch(85.55% 0.0738 286.70)` | Lavender Blue | black, 13.3 to 1 |
| 11 | `#c6c4fe` | `oklch(84.07% 0.0808 286.16)` | Light Periwinkle | black, 12.6 to 1 |
| 12 | `#c0befd` | `oklch(82.54% 0.0879 285.59)` | Dried Lilac | black, 12 to 1 |
| 13 | `#bab9fc` | `oklch(80.96% 0.0950 285.00)` | Dried Lilac | black, 11.3 to 1 |
| 14 | `#b4b3fb` | `oklch(79.33% 0.1021 284.39)` | Winterspring Lilac | black, 10.7 to 1 |
| 15 | `#adadfa` | `oklch(77.61% 0.1094 283.74)` | Shy Moment | black, 10.1 to 1 |
| 16 | `#a6a7f9` | `oklch(75.83% 0.1169 283.06)` | Shy Moment | black, 9.4 to 1 |
| 17 | `#9fa0f7` | `oklch(74.01% 0.1242 282.36)` | Cold Lips | black, 8.8 to 1 |
| 18 | `#989af5` | `oklch(72.18% 0.1314 281.65)` | Periwinkle Blue | black, 8.2 to 1 |
| 19 | `#9194f3` | `oklch(70.37% 0.1381 280.94)` | Periwinkle Blue | black, 7.7 to 1 |
| 20 | `#8a8ef1` | `oklch(68.58% 0.1444 280.26)` | Perrywinkle | black, 7.2 to 1 |
| 21 | `#8388ef` | `oklch(66.80% 0.1507 279.56)` | Lavender Blue Shadow | black, 6.7 to 1 |
| 22 | `#7c82ec` | `oklch(65.02% 0.1568 278.85)` | Orchid | black, 6.2 to 1 |
| 23 | `#757cea` | `oklch(63.25% 0.1625 278.14)` | Hera Blue | black, 5.8 to 1 |
| 24 | `#6e76e7` | `oklch(61.47% 0.1675 277.45)` | Hera Blue | black, 5.4 to 1 |
| 25 | `#6870e3` | `oklch(59.69% 0.1714 276.80)` | If I Could Fly | black, 5 to 1 |
| 26 | `#626ade` | `oklch(57.91% 0.1740 276.18)` | Exodus Fruit | black, 4.6 to 1 |
| 27 | `#5b65d8` | `oklch(55.97% 0.1748 275.58)` | Thick Blue | white, 4.8 to 1 |
| 28 | `#545fd1` | `oklch(53.91% 0.1742 274.97)` | Savoy Blue | white, 5.3 to 1 |
| 29 | `#4e59c9` | `oklch(51.87% 0.1727 274.40)` | Gorgonzola Blue | white, 5.8 to 1 |
| 30 | `#4854c2` | `oklch(49.98% 0.1708 273.88)` | Free Speech Blue | white, 6.3 to 1 |
| 31 | `#4450bc` | `oklch(48.40% 0.1691 273.45)` | Free Speech Blue | white, 6.7 to 1 |
| 32 | `#404db8` | `oklch(47.24% 0.1681 273.13)` | Night in Manchester | white, 7.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f1f0ff 0.0%, #efeeff 3.2%, #eceaff 6.5%, #e8e6ff 9.7%, #e3e2ff 12.9%, #dfddff 16.1%, #dad8ff 19.4%, #d6d3ff 22.6%, #d1ceff 25.8%, #cbc9fe 29.0%, #c6c4fe 32.3%, #c0befd 35.5%, #bab9fc 38.7%, #b4b3fb 41.9%, #adadfa 45.2%, #a6a7f9 48.4%, #9fa0f7 51.6%, #989af5 54.8%, #9194f3 58.1%, #8a8ef1 61.3%, #8388ef 64.5%, #7c82ec 67.7%, #757cea 71.0%, #6e76e7 74.2%, #6870e3 77.4%, #626ade 80.6%, #5b65d8 83.9%, #545fd1 87.1%, #4e59c9 90.3%, #4854c2 93.5%, #4450bc 96.8%, #404db8 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(96.06% 0.0198 288.99) 0.0%, oklch(95.39% 0.0233 288.90) 3.2%, oklch(94.48% 0.0279 288.80) 6.5%, oklch(93.40% 0.0335 288.67) 9.7%, oklch(92.19% 0.0398 288.50) 12.9%, oklch(90.91% 0.0465 288.28) 16.1%, oklch(89.62% 0.0533 288.00) 19.4%, oklch(88.33% 0.0601 287.63) 22.6%, oklch(86.97% 0.0669 287.19) 25.8%, oklch(85.55% 0.0738 286.70) 29.0%, oklch(84.07% 0.0808 286.16) 32.3%, oklch(82.54% 0.0879 285.59) 35.5%, oklch(80.96% 0.0950 285.00) 38.7%, oklch(79.33% 0.1021 284.39) 41.9%, oklch(77.61% 0.1094 283.74) 45.2%, oklch(75.83% 0.1169 283.06) 48.4%, oklch(74.01% 0.1242 282.36) 51.6%, oklch(72.18% 0.1314 281.65) 54.8%, oklch(70.37% 0.1381 280.94) 58.1%, oklch(68.58% 0.1444 280.26) 61.3%, oklch(66.80% 0.1507 279.56) 64.5%, oklch(65.02% 0.1568 278.85) 67.7%, oklch(63.25% 0.1625 278.14) 71.0%, oklch(61.47% 0.1675 277.45) 74.2%, oklch(59.69% 0.1714 276.80) 77.4%, oklch(57.91% 0.1740 276.18) 80.6%, oklch(55.97% 0.1748 275.58) 83.9%, oklch(53.91% 0.1742 274.97) 87.1%, oklch(51.87% 0.1727 274.40) 90.3%, oklch(49.98% 0.1708 273.88) 93.5%, oklch(48.40% 0.1691 273.45) 96.8%, oklch(47.24% 0.1681 273.13) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.021 | 289 |
| 2 | 0.894 | 0.055 | 287.9 |
| 3 | 0.803 | 0.098 | 284.8 |
| 4 | 0.693 | 0.142 | 280.5 |
| 5 | 0.583 | 0.174 | 276.3 |
| 6 | 0.472 | 0.168 | 273.1 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)

## Other forms

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