# Blue color palette

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

- Also called: Monochrome navy to blue linear gradient
- Seed: `kUMDzEHSY-SUov4uJ79A`
- Page: https://grabient.com/kUMDzEHSY-SUov4uJ79A?steps=5&angle=270
- Drawn as: linear gradient, 5 steps, 270 degrees
- Kinds: vivid, dark, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.7 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 | `#0c0b37` | `oklch(18.90% 0.0827 275.63)` | Infinite Night | white, 18.7 to 1 |
| 2 | `#041247` | `oklch(21.59% 0.0998 264.90)` | Kantor Blue | white, 17.7 to 1 |
| 3 | `#001f55` | `oklch(25.80% 0.1048 259.92)` | Clarinet | white, 15.8 to 1 |
| 4 | `#002d67` | `oklch(31.02% 0.1115 257.42)` | Deep Sea Dream | white, 13.3 to 1 |
| 5 | `#053d75` | `oklch(36.22% 0.1089 253.43)` | Azure Dragon | white, 10.8 to 1 |

## CSS

```css
background: linear-gradient(270deg, #0c0b37 0.0%, #041247 25.0%, #001f55 50.0%, #002d67 75.0%, #053d75 100.0%);
background: linear-gradient(270deg in oklch, oklch(18.90% 0.0827 275.63) 0.0%, oklch(21.59% 0.0998 264.90) 25.0%, oklch(25.80% 0.1048 259.92) 50.0%, oklch(31.02% 0.1115 257.42) 75.0%, oklch(36.22% 0.1089 253.43) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.189 | 0.083 | 275.6 |
| 2 | 0.228 | 0.105 | 261.9 |
| 3 | 0.291 | 0.112 | 258.7 |
| 4 | 0.362 | 0.109 | 253.4 |

## In these collections

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

## Other forms

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