# Blue navy palette

The Blue navy palette brings together dark blue and blue. The colors span a moderate lightness range, combining strong 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: Vivid monochrome navy to blue linear gradient
- Seed: `kSLFO8JjE_j0_P2`
- Page: https://grabient.com/kSLFO8JjE_j0_P2?steps=5&angle=225
- Drawn as: linear gradient, 5 steps, 225 degrees
- Kinds: dark to light, vivid, dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.9 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 | `#000241` | `oklch(17.32% 0.1144 264.38)` | Endless Galaxy | white, 19.3 to 1 |
| 2 | `#001251` | `oklch(22.51% 0.1165 263.25)` | Interstellar Blue | white, 17.4 to 1 |
| 3 | `#00266e` | `oklch(29.93% 0.1318 261.30)` | Old Glory Blue | white, 14 to 1 |
| 4 | `#004197` | `oklch(39.77% 0.1537 258.93)` | Fright Night | white, 9.5 to 1 |
| 5 | `#0059bb` | `oklch(48.04% 0.1705 257.00)` | London Rain | white, 6.6 to 1 |

## CSS

```css
background: linear-gradient(225deg, #000241 0.0%, #001251 25.0%, #00266e 50.0%, #004197 75.0%, #0059bb 100.0%);
background: linear-gradient(225deg in oklch, oklch(17.32% 0.1144 264.38) 0.0%, oklch(22.51% 0.1165 263.25) 25.0%, oklch(29.93% 0.1318 261.30) 50.0%, oklch(39.77% 0.1537 258.93) 75.0%, oklch(48.04% 0.1705 257.00) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.173 | 0.114 | 264.4 |
| 2 | 0.299 | 0.135 | 261.2 |
| 3 | 0.48 | 0.174 | 257 |

## In these collections

- [Navy](https://grabient.com/navy)

## Other forms

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