# Blue color palette

The Blue color palette brings together dark blue and blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Monochrome navy and blue linear gradient
- Seed: `kaLym5p6q_znAv_Jyz-1T--8VEQMlJMBA`
- Page: https://grabient.com/kaLym5p6q_znAv_Jyz-1T--8VEQMlJMBA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.2 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 | `#04112b` | `oklch(18.50% 0.0565 260.86)` | Squid’s Ink | white, 18.7 to 1 |
| 2 | `#051533` | `oklch(20.13% 0.0644 260.71)` | Squid’s Ink | white, 18.1 to 1 |
| 3 | `#05193e` | `oklch(22.39% 0.0756 260.48)` | Maastricht Blue | white, 17.2 to 1 |
| 4 | `#051f4b` | `oklch(25.06% 0.0886 260.23)` | Oxford Blue | white, 16.1 to 1 |
| 5 | `#05255a` | `oklch(27.90% 0.1022 259.99)` | Downriver | white, 14.8 to 1 |
| 6 | `#042b68` | `oklch(30.67% 0.1151 259.82)` | Deep Sea Dream | white, 13.5 to 1 |
| 7 | `#043176` | `oklch(33.32% 0.1273 259.77)` | Dark Midnight Blue | white, 12.3 to 1 |
| 8 | `#043785` | `oklch(36.08% 0.1399 259.81)` | Magnus Blue | white, 11 to 1 |
| 9 | `#043e94` | `oklch(38.89% 0.1525 259.89)` | Amalfitan Azure | white, 9.9 to 1 |
| 10 | `#0444a3` | `oklch(41.69% 0.1644 259.93)` | Indian Peafowl | white, 8.8 to 1 |
| 11 | `#054bb2` | `oklch(44.40% 0.1747 259.86)` | Absolute Zero | white, 7.8 to 1 |
| 12 | `#0652bf` | `oklch(47.00% 0.1835 259.68)` | Mourning Blue | white, 7 to 1 |
| 13 | `#0759cc` | `oklch(49.58% 0.1916 259.50)` | Dead Blue Eyes | white, 6.3 to 1 |
| 14 | `#0961d8` | `oklch(52.10% 0.1985 259.25)` | Blue Ruin | white, 5.6 to 1 |
| 15 | `#0a68e3` | `oklch(54.52% 0.2037 258.83)` | Blue Ruin | white, 5.1 to 1 |
| 16 | `#0a70ed` | `oklch(56.80% 0.2064 258.15)` | Níu Zǎi Sè Denim | white, 4.6 to 1 |
| 17 | `#0978f4` | `oklch(58.98% 0.2058 257.05)` | Blue Darknut | black, 4.9 to 1 |
| 18 | `#0981f9` | `oklch(61.41% 0.2006 255.22)` | Brescian Blue | black, 5.5 to 1 |
| 19 | `#0e8bfb` | `oklch(63.79% 0.1926 253.05)` | Too Blue to Be True | black, 6.1 to 1 |
| 20 | `#1794fc` | `oklch(65.74% 0.1841 251.01)` | Starfleet Blue | black, 6.6 to 1 |
| 21 | `#1e99fc` | `oklch(66.85% 0.1774 249.60)` | Blue Nebula | black, 6.9 to 1 |
| 22 | `#1f99fa` | `oklch(66.75% 0.1747 249.27)` | Blue Nebula | black, 6.9 to 1 |
| 23 | `#1a94f7` | `oklch(65.53% 0.1775 250.12)` | Karimun Blue | black, 6.6 to 1 |
| 24 | `#118cf4` | `oklch(63.41% 0.1832 251.74)` | Clear Chill | black, 6 to 1 |
| 25 | `#0781ee` | `oklch(60.61% 0.1885 253.68)` | Bubble Bobble P2 | black, 5.3 to 1 |
| 26 | `#0475e5` | `oklch(57.31% 0.1905 255.51)` | Níu Zǎi Sè Denim | black, 4.6 to 1 |
| 27 | `#0669d6` | `oklch(53.70% 0.1861 256.80)` | Flickr Blue | white, 5.2 to 1 |
| 28 | `#095bbf` | `oklch(49.00% 0.1728 257.70)` | Amnesia Blue | white, 6.4 to 1 |
| 29 | `#0b4ca3` | `oklch(43.37% 0.1536 258.42)` | Sea of Tears | white, 8.1 to 1 |
| 30 | `#0b3d86` | `oklch(37.63% 0.1324 259.00)` | Mystery Oceans | white, 10.3 to 1 |
| 31 | `#09316d` | `oklch(32.62% 0.1134 259.45)` | Konjō Blue | white, 12.5 to 1 |
| 32 | `#08285d` | `oklch(29.13% 0.1006 259.80)` | Blue Leviathan | white, 14.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #04112b 0.0%, #051533 3.2%, #05193e 6.5%, #051f4b 9.7%, #05255a 12.9%, #042b68 16.1%, #043176 19.4%, #043785 22.6%, #043e94 25.8%, #0444a3 29.0%, #054bb2 32.3%, #0652bf 35.5%, #0759cc 38.7%, #0961d8 41.9%, #0a68e3 45.2%, #0a70ed 48.4%, #0978f4 51.6%, #0981f9 54.8%, #0e8bfb 58.1%, #1794fc 61.3%, #1e99fc 64.5%, #1f99fa 67.7%, #1a94f7 71.0%, #118cf4 74.2%, #0781ee 77.4%, #0475e5 80.6%, #0669d6 83.9%, #095bbf 87.1%, #0b4ca3 90.3%, #0b3d86 93.5%, #09316d 96.8%, #08285d 100.0%);
background: linear-gradient(135deg in oklch, oklch(18.50% 0.0565 260.86) 0.0%, oklch(20.13% 0.0644 260.71) 3.2%, oklch(22.39% 0.0756 260.48) 6.5%, oklch(25.06% 0.0886 260.23) 9.7%, oklch(27.90% 0.1022 259.99) 12.9%, oklch(30.67% 0.1151 259.82) 16.1%, oklch(33.32% 0.1273 259.77) 19.4%, oklch(36.08% 0.1399 259.81) 22.6%, oklch(38.89% 0.1525 259.89) 25.8%, oklch(41.69% 0.1644 259.93) 29.0%, oklch(44.40% 0.1747 259.86) 32.3%, oklch(47.00% 0.1835 259.68) 35.5%, oklch(49.58% 0.1916 259.50) 38.7%, oklch(52.10% 0.1985 259.25) 41.9%, oklch(54.52% 0.2037 258.83) 45.2%, oklch(56.80% 0.2064 258.15) 48.4%, oklch(58.98% 0.2058 257.05) 51.6%, oklch(61.41% 0.2006 255.22) 54.8%, oklch(63.79% 0.1926 253.05) 58.1%, oklch(65.74% 0.1841 251.01) 61.3%, oklch(66.85% 0.1774 249.60) 64.5%, oklch(66.75% 0.1747 249.27) 67.7%, oklch(65.53% 0.1775 250.12) 71.0%, oklch(63.41% 0.1832 251.74) 74.2%, oklch(60.61% 0.1885 253.68) 77.4%, oklch(57.31% 0.1905 255.51) 80.6%, oklch(53.70% 0.1861 256.80) 83.9%, oklch(49.00% 0.1728 257.70) 87.1%, oklch(43.37% 0.1536 258.42) 90.3%, oklch(37.63% 0.1324 259.00) 93.5%, oklch(32.62% 0.1134 259.45) 96.8%, oklch(29.13% 0.1006 259.80) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.185 | 0.056 | 260.9 |
| 2 | 0.311 | 0.117 | 259.8 |
| 3 | 0.453 | 0.178 | 259.8 |
| 4 | 0.579 | 0.207 | 257.7 |
| 5 | 0.669 | 0.175 | 249.2 |
| 6 | 0.543 | 0.187 | 256.6 |
| 7 | 0.291 | 0.101 | 259.8 |

## In these collections

- [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients)
- [Electric blue gradients](https://grabient.com/electric-blue-gradients)
- [Blue gradients](https://grabient.com/blue-gradients)

## Other forms

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