# Blue blue palette

The Blue blue 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 brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Vivid dark blue, blue and light blue angular gradient
- Seed: `kSR23ARlO-2MoPi`
- Page: https://grabient.com/kSR23ARlO-2MoPi?style=angularGradient&steps=32&angle=270
- Drawn as: angular gradient, 32 steps, 270 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.7 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 | `#121571` | `oklch(27.95% 0.1502 270.00)` | 20000 Leagues Under the Sea | white, 15.2 to 1 |
| 2 | `#131875` | `oklch(28.95% 0.1535 269.67)` | 20000 Leagues Under the Sea | white, 14.8 to 1 |
| 3 | `#141b7b` | `oklch(30.16% 0.1580 269.28)` | Long-Haul Flight | white, 14.2 to 1 |
| 4 | `#151e83` | `oklch(31.57% 0.1637 268.84)` | Resolution Blue | white, 13.5 to 1 |
| 5 | `#16228b` | `oklch(33.14% 0.1701 268.35)` | Naval Adventures | white, 12.8 to 1 |
| 6 | `#162694` | `oklch(34.86% 0.1771 267.82)` | Blue Torus | white, 12 to 1 |
| 7 | `#172b9e` | `oklch(36.69% 0.1845 267.25)` | International Klein Blue | white, 11.2 to 1 |
| 8 | `#1730a8` | `oklch(38.62% 0.1920 266.65)` | Egyptian Blue | white, 10.3 to 1 |
| 9 | `#1735b3` | `oklch(40.61% 0.1995 266.01)` | Yuè Guāng Lán Blue | white, 9.5 to 1 |
| 10 | `#173bbd` | `oklch(42.65% 0.2066 265.34)` | Persian Blue | white, 8.7 to 1 |
| 11 | `#1541c8` | `oklch(44.70% 0.2133 264.64)` | Blue Blue | white, 8 to 1 |
| 12 | `#1347d2` | `oklch(46.74% 0.2191 263.92)` | Flying Fish Blue | white, 7.3 to 1 |
| 13 | `#114ddb` | `oklch(48.74% 0.2240 263.18)` | Frosted Blueberries | white, 6.7 to 1 |
| 14 | `#0d54e4` | `oklch(50.69% 0.2277 262.43)` | Frosted Blueberries | white, 6.1 to 1 |
| 15 | `#085aec` | `oklch(52.55% 0.2299 261.66)` | Azul | white, 5.6 to 1 |
| 16 | `#0361f2` | `oklch(54.29% 0.2305 260.88)` | Old Gungeon Red | white, 5.2 to 1 |
| 17 | `#0067f7` | `oklch(55.93% 0.2292 260.09)` | Bright Blue | white, 4.8 to 1 |
| 18 | `#006efb` | `oklch(57.60% 0.2256 259.22)` | Brandeis Blue | black, 4.6 to 1 |
| 19 | `#0276fe` | `oklch(59.30% 0.2208 258.24)` | Blue Sparkle | black, 5 to 1 |
| 20 | `#0c7dff` | `oklch(61.02% 0.2132 257.21)` | Azure | black, 5.4 to 1 |
| 21 | `#1a85ff` | `oklch(62.75% 0.2031 256.14)` | Bubble Bobble P2 | black, 5.8 to 1 |
| 22 | `#258cff` | `oklch(64.47% 0.1932 255.03)` | Clear Chill | black, 6.2 to 1 |
| 23 | `#2f93ff` | `oklch(66.17% 0.1836 253.90)` | Clear Chill | black, 6.7 to 1 |
| 24 | `#399aff` | `oklch(67.83% 0.1744 252.77)` | Brilliant Azure | black, 7.2 to 1 |
| 25 | `#42a0ff` | `oklch(69.43% 0.1655 251.66)` | Sky Dancer | black, 7.6 to 1 |
| 26 | `#4aa6ff` | `oklch(70.97% 0.1571 250.59)` | Joust Blue | black, 8.1 to 1 |
| 27 | `#54abfe` | `oklch(72.43% 0.1471 249.56)` | Joust Blue | black, 8.6 to 1 |
| 28 | `#5eb0fc` | `oklch(73.79% 0.1376 248.59)` | Tiān Lán Sky | black, 9 to 1 |
| 29 | `#66b4fb` | `oklch(75.04% 0.1289 247.71)` | Tiān Lán Sky | black, 9.5 to 1 |
| 30 | `#6eb8fa` | `oklch(76.16% 0.1213 246.92)` | Broken Blue | black, 9.9 to 1 |
| 31 | `#74bcfa` | `oklch(77.13% 0.1150 246.24)` | Broken Blue | black, 10.2 to 1 |
| 32 | `#79bef9` | `oklch(77.95% 0.1102 245.69)` | Maya Blue | black, 10.5 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #121571 0.0%, #131875 3.2%, #141b7b 6.5%, #151e83 9.7%, #16228b 12.9%, #162694 16.1%, #172b9e 19.4%, #1730a8 22.6%, #1735b3 25.8%, #173bbd 29.0%, #1541c8 32.3%, #1347d2 35.5%, #114ddb 38.7%, #0d54e4 41.9%, #085aec 45.2%, #0361f2 48.4%, #0067f7 51.6%, #006efb 54.8%, #0276fe 58.1%, #0c7dff 61.3%, #1a85ff 64.5%, #258cff 67.7%, #2f93ff 71.0%, #399aff 74.2%, #42a0ff 77.4%, #4aa6ff 80.6%, #54abfe 83.9%, #5eb0fc 87.1%, #66b4fb 90.3%, #6eb8fa 93.5%, #74bcfa 96.8%, #79bef9 100.0%);
background: conic-gradient(from 270deg in oklch, oklch(27.95% 0.1502 270.00) 0.0%, oklch(28.95% 0.1535 269.67) 3.2%, oklch(30.16% 0.1580 269.28) 6.5%, oklch(31.57% 0.1637 268.84) 9.7%, oklch(33.14% 0.1701 268.35) 12.9%, oklch(34.86% 0.1771 267.82) 16.1%, oklch(36.69% 0.1845 267.25) 19.4%, oklch(38.62% 0.1920 266.65) 22.6%, oklch(40.61% 0.1995 266.01) 25.8%, oklch(42.65% 0.2066 265.34) 29.0%, oklch(44.70% 0.2133 264.64) 32.3%, oklch(46.74% 0.2191 263.92) 35.5%, oklch(48.74% 0.2240 263.18) 38.7%, oklch(50.69% 0.2277 262.43) 41.9%, oklch(52.55% 0.2299 261.66) 45.2%, oklch(54.29% 0.2305 260.88) 48.4%, oklch(55.93% 0.2292 260.09) 51.6%, oklch(57.60% 0.2256 259.22) 54.8%, oklch(59.30% 0.2208 258.24) 58.1%, oklch(61.02% 0.2132 257.21) 61.3%, oklch(62.75% 0.2031 256.14) 64.5%, oklch(64.47% 0.1932 255.03) 67.7%, oklch(66.17% 0.1836 253.90) 71.0%, oklch(67.83% 0.1744 252.77) 74.2%, oklch(69.43% 0.1655 251.66) 77.4%, oklch(70.97% 0.1571 250.59) 80.6%, oklch(72.43% 0.1471 249.56) 83.9%, oklch(73.79% 0.1376 248.59) 87.1%, oklch(75.04% 0.1289 247.71) 90.3%, oklch(76.16% 0.1213 246.92) 93.5%, oklch(77.13% 0.1150 246.24) 96.8%, oklch(77.95% 0.1102 245.69) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.15 | 270 |
| 2 | 0.551 | 0.23 | 260.5 |
| 3 | 0.78 | 0.11 | 245.7 |

## In these collections

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

## Other forms

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