# Blue indigo palette

The Blue indigo palette brings together blue, light blue, and pale blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is pale blue.

- Also called: Monochrome blue to light blue linear gradient
- Seed: `kUlWLM3Cu_Ooev10Dr8A`
- Page: https://grabient.com/kUlWLM3Cu_Ooev10Dr8A?steps=4&angle=225
- Drawn as: linear gradient, 4 steps, 225 degrees
- Kinds: dark to light, pastel, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#796dc7` | `oklch(58.66% 0.1350 287.58)` | Venus Violet | black, 4.8 to 1 |
| 2 | `#999cef` | `oklch(72.44% 0.1199 281.24)` | Cold Lips | black, 8.3 to 1 |
| 3 | `#bac5ff` | `oklch(83.46% 0.0825 275.95)` | Light Periwinkle | black, 12.4 to 1 |
| 4 | `#d7e2fe` | `oklch(91.34% 0.0400 268.56)` | Stoic White | black, 16.2 to 1 |

## CSS

```css
background: linear-gradient(225deg, #796dc7 0.0%, #999cef 33.3%, #bac5ff 66.7%, #d7e2fe 100.0%);
background: linear-gradient(225deg in oklch, oklch(58.66% 0.1350 287.58) 0.0%, oklch(72.44% 0.1199 281.24) 33.3%, oklch(83.46% 0.0825 275.95) 66.7%, oklch(91.34% 0.0400 268.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.587 | 0.135 | 287.6 |
| 2 | 0.724 | 0.12 | 281.2 |
| 3 | 0.835 | 0.084 | 276 |
| 4 | 0.913 | 0.04 | 268.6 |

## In these collections

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

## Other forms

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