# Blue color palette

The Blue color palette brings together dark blue and blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Muted monochrome navy to blue linear gradient
- Seed: `kUNT2-pyPBDuiQJWGj-g`
- Page: https://grabient.com/kUNT2-pyPBDuiQJWGj-g?steps=5&angle=135
- Drawn as: linear gradient, 5 steps, 135 degrees
- Kinds: dark to light, muted, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 6 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 | `#08123e` | `oklch(20.87% 0.0841 267.89)` | Deep Cove | white, 17.9 to 1 |
| 2 | `#1c2055` | `oklch(27.57% 0.0953 275.10)` | Spacescape | white, 15.1 to 1 |
| 3 | `#3a3a75` | `oklch(38.09% 0.0980 280.77)` | Torea Bay | white, 10.2 to 1 |
| 4 | `#62629b` | `oklch(52.22% 0.0889 282.63)` | Violet Storm | white, 5.5 to 1 |
| 5 | `#8f93c3` | `oklch(67.72% 0.0717 280.57)` | Fast Velvet | black, 7.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #08123e 0.0%, #1c2055 25.0%, #3a3a75 50.0%, #62629b 75.0%, #8f93c3 100.0%);
background: linear-gradient(135deg in oklch, oklch(20.87% 0.0841 267.89) 0.0%, oklch(27.57% 0.0953 275.10) 25.0%, oklch(38.09% 0.0980 280.77) 50.0%, oklch(52.22% 0.0889 282.63) 75.0%, oklch(67.72% 0.0717 280.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.084 | 267.9 |
| 2 | 0.307 | 0.098 | 277.4 |
| 3 | 0.469 | 0.094 | 282.7 |
| 4 | 0.677 | 0.072 | 280.6 |

## In these collections

- [Blue gradients](https://grabient.com/blue-gradients)
- [Text gradients](https://grabient.com/text-gradients)

## Other forms

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