# Blue monochrome blue palette

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

- Also called: Monochrome navy and blue angular gradient
- Seed: `kSOjPD0tA_iKgwO`
- Page: https://grabient.com/kSOjPD0tA_iKgwO?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: light center, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5 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 | `#14183d` | `oklch(22.83% 0.0703 274.92)` | Nightwalker | white, 17.1 to 1 |
| 2 | `#171b44` | `oklch(24.52% 0.0763 274.78)` | Konkikyō Blue | white, 16.4 to 1 |
| 3 | `#1b204e` | `oklch(26.79% 0.0843 274.58)` | Fly-by-Night | white, 15.4 to 1 |
| 4 | `#20265b` | `oklch(29.54% 0.0941 274.33)` | Ultramarine Violet | white, 14.1 to 1 |
| 5 | `#262d69` | `oklch(32.69% 0.1053 274.04)` | Underwater Realm | white, 12.6 to 1 |
| 6 | `#2c347a` | `oklch(36.12% 0.1175 273.72)` | Ballpoint Indigo | white, 11.1 to 1 |
| 7 | `#333d8c` | `oklch(39.75% 0.1304 273.39)` | Clematis Blue | white, 9.6 to 1 |
| 8 | `#39469e` | `oklch(43.47% 0.1436 273.06)` | Galaxy Express | white, 8.2 to 1 |
| 9 | `#404fb2` | `oklch(47.18% 0.1568 272.73)` | Night in Manchester | white, 7 to 1 |
| 10 | `#4758c5` | `oklch(50.79% 0.1697 272.42)` | Free Speech Blue | white, 6 to 1 |
| 11 | `#4e60d7` | `oklch(54.20% 0.1818 272.15)` | Monarchist | white, 5.2 to 1 |
| 12 | `#5468e8` | `oklch(57.31% 0.1929 271.92)` | Flickering Sea | white, 4.6 to 1 |
| 13 | `#596ff7` | `oklch(60.03% 0.2026 271.74)` | Blue Öyster Cult | black, 5 to 1 |
| 14 | `#5e77ff` | `oklch(62.24% 0.2033 271.64)` | Byzantine Night Blue | black, 5.5 to 1 |
| 15 | `#647dff` | `oklch(63.86% 0.1933 271.61)` | Byzantine Night Blue | black, 5.9 to 1 |
| 16 | `#6881ff` | `oklch(64.79% 0.1877 271.68)` | Deep Denim | black, 6.1 to 1 |
| 17 | `#6982ff` | `oklch(64.93% 0.1869 271.85)` | Deep Denim | black, 6.2 to 1 |
| 18 | `#677fff` | `oklch(64.30% 0.1908 272.15)` | Byzantine Night Blue | black, 6 to 1 |
| 19 | `#6479ff` | `oklch(62.99% 0.1990 272.55)` | Byzantine Night Blue | black, 5.7 to 1 |
| 20 | `#5f71fd` | `oklch(61.09% 0.2074 273.04)` | Blue Genie | black, 5.2 to 1 |
| 21 | `#5b6af0` | `oklch(58.70% 0.1991 273.61)` | Flickering Sea | black, 4.7 to 1 |
| 22 | `#5663e1` | `oklch(55.92% 0.1895 274.24)` | Arcane Brew | white, 4.9 to 1 |
| 23 | `#515bd0` | `oklch(52.83% 0.1788 274.91)` | Savoy Blue | white, 5.6 to 1 |
| 24 | `#4b52bf` | `oklch(49.54% 0.1673 275.60)` | Free Speech Blue | white, 6.4 to 1 |
| 25 | `#454aad` | `oklch(46.14% 0.1555 276.31)` | Megadrive Screen | white, 7.4 to 1 |
| 26 | `#3e419b` | `oklch(42.72% 0.1436 277.01)` | Galaxy Express | white, 8.5 to 1 |
| 27 | `#38398b` | `oklch(39.38% 0.1320 277.69)` | Clematis Blue | white, 9.8 to 1 |
| 28 | `#32327b` | `oklch(36.21% 0.1210 278.34)` | Ballpoint Indigo | white, 11.1 to 1 |
| 29 | `#2c2c6d` | `oklch(33.31% 0.1109 278.93)` | Blue Rose | white, 12.4 to 1 |
| 30 | `#272661` | `oklch(30.77% 0.1021 279.44)` | Deep Breath | white, 13.6 to 1 |
| 31 | `#232258` | `oklch(28.69% 0.0949 279.88)` | Spacescape | white, 14.6 to 1 |
| 32 | `#201e51` | `oklch(27.17% 0.0896 280.21)` | Silent Orbit | white, 15.3 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #14183d 0.0%, #171b44 3.2%, #1b204e 6.5%, #20265b 9.7%, #262d69 12.9%, #2c347a 16.1%, #333d8c 19.4%, #39469e 22.6%, #404fb2 25.8%, #4758c5 29.0%, #4e60d7 32.3%, #5468e8 35.5%, #596ff7 38.7%, #5e77ff 41.9%, #647dff 45.2%, #6881ff 48.4%, #6982ff 51.6%, #677fff 54.8%, #6479ff 58.1%, #5f71fd 61.3%, #5b6af0 64.5%, #5663e1 67.7%, #515bd0 71.0%, #4b52bf 74.2%, #454aad 77.4%, #3e419b 80.6%, #38398b 83.9%, #32327b 87.1%, #2c2c6d 90.3%, #272661 93.5%, #232258 96.8%, #201e51 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(22.83% 0.0703 274.92) 0.0%, oklch(24.52% 0.0763 274.78) 3.2%, oklch(26.79% 0.0843 274.58) 6.5%, oklch(29.54% 0.0941 274.33) 9.7%, oklch(32.69% 0.1053 274.04) 12.9%, oklch(36.12% 0.1175 273.72) 16.1%, oklch(39.75% 0.1304 273.39) 19.4%, oklch(43.47% 0.1436 273.06) 22.6%, oklch(47.18% 0.1568 272.73) 25.8%, oklch(50.79% 0.1697 272.42) 29.0%, oklch(54.20% 0.1818 272.15) 32.3%, oklch(57.31% 0.1929 271.92) 35.5%, oklch(60.03% 0.2026 271.74) 38.7%, oklch(62.24% 0.2033 271.64) 41.9%, oklch(63.86% 0.1933 271.61) 45.2%, oklch(64.79% 0.1877 271.68) 48.4%, oklch(64.93% 0.1869 271.85) 51.6%, oklch(64.30% 0.1908 272.15) 54.8%, oklch(62.99% 0.1990 272.55) 58.1%, oklch(61.09% 0.2074 273.04) 61.3%, oklch(58.70% 0.1991 273.61) 64.5%, oklch(55.92% 0.1895 274.24) 67.7%, oklch(52.83% 0.1788 274.91) 71.0%, oklch(49.54% 0.1673 275.60) 74.2%, oklch(46.14% 0.1555 276.31) 77.4%, oklch(42.72% 0.1436 277.01) 80.6%, oklch(39.38% 0.1320 277.69) 83.9%, oklch(36.21% 0.1210 278.34) 87.1%, oklch(33.31% 0.1109 278.93) 90.3%, oklch(30.77% 0.1021 279.44) 93.5%, oklch(28.69% 0.0949 279.88) 96.8%, oklch(27.17% 0.0896 280.21) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.07 | 274.9 |
| 2 | 0.65 | 0.22 | 271.8 |
| 3 | 0.272 | 0.09 | 280.2 |

## In these collections

- [Monochrome blue gradients](https://grabient.com/monochrome-blue-gradients)

## Other forms

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