# Midnight Cobalt Echo

The Blue cool blue palette brings together dark blue and blue. The colors span a moderate 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: Seamless cool navy and blue angular swatches
- Seed: `kYNifCpJ6-7CrP47Nr_JR9AZuTwO`
- Page: https://grabient.com/kYNifCpJ6-7CrP47Nr_JR9AZuTwO?style=angularSwatches&steps=6
- Drawn as: angular swatches, 6 steps, 90 degrees
- Kinds: dark, cool, monochrome, seamless
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.4 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 | `#111631` | `oklch(21.26% 0.0537 273.52)` | Liberty Blue | white, 17.7 to 1 |
| 2 | `#162854` | `oklch(28.74% 0.0841 265.06)` | Space Cadet | white, 14.4 to 1 |
| 3 | `#1d3f81` | `oklch(38.19% 0.1185 261.89)` | Mazarine Blue | white, 10.1 to 1 |
| 4 | `#2354ac` | `oklch(46.46% 0.1502 260.83)` | Blue Lobster | white, 7.1 to 1 |
| 5 | `#162856` | `oklch(29.13% 0.0854 265.06)` | Ultramarine Violet | white, 14.2 to 1 |
| 6 | `#121732` | `oklch(21.65% 0.0537 273.52)` | Lost in Sadness | white, 17.5 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #111631 0.000% 16.667%, #162854 16.667% 33.333%, #1d3f81 33.333% 50.000%, #2354ac 50.000% 66.667%, #162856 66.667% 83.333%, #121732 83.333% 100.000%);
background: conic-gradient(from 90deg, oklch(21.26% 0.0537 273.52) 0.000% 16.667%, oklch(28.74% 0.0841 265.06) 16.667% 33.333%, oklch(38.19% 0.1185 261.89) 33.333% 50.000%, oklch(46.46% 0.1502 260.83) 50.000% 66.667%, oklch(29.13% 0.0854 265.06) 66.667% 83.333%, oklch(21.65% 0.0537 273.52) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.054 | 273.5 |
| 2 | 0.287 | 0.084 | 265.1 |
| 3 | 0.382 | 0.119 | 261.9 |
| 4 | 0.465 | 0.15 | 260.8 |
| 5 | 0.291 | 0.085 | 265.1 |
| 6 | 0.217 | 0.054 | 273.5 |

## In these collections

- [Cool blue swatches](https://grabient.com/cool-blue-swatches)

## Other forms

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