# Blue color palette

The Blue color palette brings together blue. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the blue color family.

- Also called: Muted monochrome blue radial gradient
- Seed: `kSfEW2VRlALqiQ6`
- Page: https://grabient.com/kSfEW2VRlALqiQ6?style=radialGradient&steps=32
- Drawn as: radial gradient, 32 steps, 90 degrees
- Kinds: muted, cool, monochrome
- Hues: analogous
- 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 | `#3a6195` | `oklch(48.82% 0.0951 255.94)` | Blue Regatta | white, 6.3 to 1 |
| 2 | `#3c6397` | `oklch(49.55% 0.0940 255.96)` | Blue Regatta | white, 6.1 to 1 |
| 3 | `#406699` | `oklch(50.55% 0.0926 255.89)` | Too Blue | white, 5.8 to 1 |
| 4 | `#446a9c` | `oklch(51.77% 0.0909 255.77)` | Star Sapphire | white, 5.5 to 1 |
| 5 | `#486e9f` | `oklch(53.17% 0.0889 255.60)` | San Marino | white, 5.2 to 1 |
| 6 | `#4d72a3` | `oklch(54.69% 0.0868 255.42)` | Great Serpent | white, 4.9 to 1 |
| 7 | `#5377a6` | `oklch(56.30% 0.0845 255.24)` | Vinca | white, 4.5 to 1 |
| 8 | `#587caa` | `oklch(57.95% 0.0822 255.09)` | Deck Crew | black, 4.8 to 1 |
| 9 | `#5e81ae` | `oklch(59.58% 0.0799 254.99)` | Girls in Blue | black, 5.2 to 1 |
| 10 | `#6486b2` | `oklch(61.17% 0.0776 254.97)` | Perfect Periwinkle | black, 5.5 to 1 |
| 11 | `#698ab5` | `oklch(62.65% 0.0755 255.03)` | Blue Dazzle | black, 5.9 to 1 |
| 12 | `#6e8eb9` | `oklch(63.98% 0.0736 255.21)` | Debutante Ball | black, 6.2 to 1 |
| 13 | `#7292bb` | `oklch(65.12% 0.0719 255.53)` | Allure | black, 6.5 to 1 |
| 14 | `#7694bd` | `oklch(66.02% 0.0705 256.01)` | King Neptune | black, 6.7 to 1 |
| 15 | `#7996bf` | `oklch(66.64% 0.0695 256.67)` | Denver River | black, 6.9 to 1 |
| 16 | `#7a97c0` | `oklch(66.92% 0.0690 257.53)` | Denver River | black, 7 to 1 |
| 17 | `#7b96bf` | `oklch(66.83% 0.0689 258.64)` | Denver River | black, 6.9 to 1 |
| 18 | `#7b94be` | `oklch(66.36% 0.0694 260.09)` | King Neptune | black, 6.8 to 1 |
| 19 | `#7991bc` | `oklch(65.55% 0.0703 261.83)` | Opal Violet | black, 6.6 to 1 |
| 20 | `#778dba` | `oklch(64.44% 0.0715 263.83)` | Larkspur Bouquet | black, 6.3 to 1 |
| 21 | `#7589b6` | `oklch(63.10% 0.0731 266.04)` | Wild Blue Yonder | black, 5.9 to 1 |
| 22 | `#7283b3` | `oklch(61.56% 0.0749 268.40)` | Venture Violet | black, 5.6 to 1 |
| 23 | `#6f7dae` | `oklch(59.87% 0.0770 270.87)` | Bright Zenith | black, 5.2 to 1 |
| 24 | `#6b77aa` | `oklch(58.08% 0.0791 273.40)` | Midnight Violet | black, 4.8 to 1 |
| 25 | `#6871a5` | `oklch(56.25% 0.0813 275.93)` | Kimberlite | white, 4.6 to 1 |
| 26 | `#656ba0` | `oklch(54.41% 0.0836 278.43)` | Dusted Peri | white, 5 to 1 |
| 27 | `#62659b` | `oklch(52.62% 0.0857 280.83)` | Dark Horizon | white, 5.4 to 1 |
| 28 | `#5f5f97` | `oklch(50.93% 0.0878 283.09)` | Wizard’s Potion | white, 5.9 to 1 |
| 29 | `#5d5992` | `oklch(49.38% 0.0897 285.17)` | Old Nan Yarn | white, 6.3 to 1 |
| 30 | `#5b558e` | `oklch(48.02% 0.0913 287.00)` | Fine Purple | white, 6.7 to 1 |
| 31 | `#59518b` | `oklch(46.90% 0.0927 288.55)` | Bright Eggplant | white, 7 to 1 |
| 32 | `#584e89` | `oklch(46.06% 0.0937 289.75)` | Bright Eggplant | white, 7.3 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #3a6195 0.0%, #3c6397 3.2%, #406699 6.5%, #446a9c 9.7%, #486e9f 12.9%, #4d72a3 16.1%, #5377a6 19.4%, #587caa 22.6%, #5e81ae 25.8%, #6486b2 29.0%, #698ab5 32.3%, #6e8eb9 35.5%, #7292bb 38.7%, #7694bd 41.9%, #7996bf 45.2%, #7a97c0 48.4%, #7b96bf 51.6%, #7b94be 54.8%, #7991bc 58.1%, #778dba 61.3%, #7589b6 64.5%, #7283b3 67.7%, #6f7dae 71.0%, #6b77aa 74.2%, #6871a5 77.4%, #656ba0 80.6%, #62659b 83.9%, #5f5f97 87.1%, #5d5992 90.3%, #5b558e 93.5%, #59518b 96.8%, #584e89 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(48.82% 0.0951 255.94) 0.0%, oklch(49.55% 0.0940 255.96) 3.2%, oklch(50.55% 0.0926 255.89) 6.5%, oklch(51.77% 0.0909 255.77) 9.7%, oklch(53.17% 0.0889 255.60) 12.9%, oklch(54.69% 0.0868 255.42) 16.1%, oklch(56.30% 0.0845 255.24) 19.4%, oklch(57.95% 0.0822 255.09) 22.6%, oklch(59.58% 0.0799 254.99) 25.8%, oklch(61.17% 0.0776 254.97) 29.0%, oklch(62.65% 0.0755 255.03) 32.3%, oklch(63.98% 0.0736 255.21) 35.5%, oklch(65.12% 0.0719 255.53) 38.7%, oklch(66.02% 0.0705 256.01) 41.9%, oklch(66.64% 0.0695 256.67) 45.2%, oklch(66.92% 0.0690 257.53) 48.4%, oklch(66.83% 0.0689 258.64) 51.6%, oklch(66.36% 0.0694 260.09) 54.8%, oklch(65.55% 0.0703 261.83) 58.1%, oklch(64.44% 0.0715 263.83) 61.3%, oklch(63.10% 0.0731 266.04) 64.5%, oklch(61.56% 0.0749 268.40) 67.7%, oklch(59.87% 0.0770 270.87) 71.0%, oklch(58.08% 0.0791 273.40) 74.2%, oklch(56.25% 0.0813 275.93) 77.4%, oklch(54.41% 0.0836 278.43) 80.6%, oklch(52.62% 0.0857 280.83) 83.9%, oklch(50.93% 0.0878 283.09) 87.1%, oklch(49.38% 0.0897 285.17) 90.3%, oklch(48.02% 0.0913 287.00) 93.5%, oklch(46.90% 0.0927 288.55) 96.8%, oklch(46.06% 0.0937 289.75) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.488 | 0.095 | 255.9 |
| 2 | 0.669 | 0.069 | 258.1 |
| 3 | 0.461 | 0.094 | 289.8 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)
- [Cool blue](https://grabient.com/cool-blue)

## Other forms

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