# Blue color palette

The Blue color palette brings together dark blue and blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its balanced and composed 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 linear swatches
- Seed: `kUR0m6tbBA0c7QHVv0Ag`
- Page: https://grabient.com/kUR0m6tbBA0c7QHVv0Ag?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.8 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 | `#0a2459` | `oklch(27.95% 0.1006 262.27)` | Fibonacci Blue | white, 14.8 to 1 |
| 2 | `#112a64` | `oklch(30.51% 0.1063 263.67)` | Schiava Blue | white, 13.6 to 1 |
| 3 | `#1b3373` | `oklch(34.18% 0.1145 265.70)` | Twilight Express | white, 11.9 to 1 |
| 4 | `#273c84` | `oklch(38.28% 0.1237 267.86)` | Mazarine Blue | white, 10.1 to 1 |
| 5 | `#324595` | `oklch(42.13% 0.1323 269.66)` | Cascade Twilight | white, 8.6 to 1 |
| 6 | `#3c4ea4` | `oklch(45.65% 0.1404 270.99)` | Dazzling Blue | white, 7.4 to 1 |
| 7 | `#4556b4` | `oklch(49.19% 0.1487 272.11)` | Chinese Bellflower | white, 6.4 to 1 |
| 8 | `#4f5fc3` | `oklch(52.64% 0.1564 273.06)` | Savoy Blue | white, 5.5 to 1 |
| 9 | `#5968d2` | `oklch(55.91% 0.1626 273.89)` | Borage Blue | white, 4.8 to 1 |
| 10 | `#6271df` | `oklch(59.19% 0.1670 274.62)` | Cornflower | black, 4.9 to 1 |
| 11 | `#6c7aec` | `oklch(62.48% 0.1700 275.21)` | Pan Purple | black, 5.6 to 1 |
| 12 | `#7582f7` | `oklch(65.33% 0.1721 275.67)` | Orchid | black, 6.3 to 1 |
| 13 | `#7b88ff` | `oklch(67.32% 0.1736 276.00)` | Orchid | black, 6.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0a2459 0.000% 7.692%, #112a64 7.692% 15.385%, #1b3373 15.385% 23.077%, #273c84 23.077% 30.769%, #324595 30.769% 38.462%, #3c4ea4 38.462% 46.154%, #4556b4 46.154% 53.846%, #4f5fc3 53.846% 61.538%, #5968d2 61.538% 69.231%, #6271df 69.231% 76.923%, #6c7aec 76.923% 84.615%, #7582f7 84.615% 92.308%, #7b88ff 92.308% 100.000%);
background: linear-gradient(90deg, oklch(27.95% 0.1006 262.27) 0.000% 7.692%, oklch(30.51% 0.1063 263.67) 7.692% 15.385%, oklch(34.18% 0.1145 265.70) 15.385% 23.077%, oklch(38.28% 0.1237 267.86) 23.077% 30.769%, oklch(42.13% 0.1323 269.66) 30.769% 38.462%, oklch(45.65% 0.1404 270.99) 38.462% 46.154%, oklch(49.19% 0.1487 272.11) 46.154% 53.846%, oklch(52.64% 0.1564 273.06) 53.846% 61.538%, oklch(55.91% 0.1626 273.89) 61.538% 69.231%, oklch(59.19% 0.1670 274.62) 69.231% 76.923%, oklch(62.48% 0.1700 275.21) 76.923% 84.615%, oklch(65.33% 0.1721 275.67) 84.615% 92.308%, oklch(67.32% 0.1736 276.00) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.101 | 262.3 |
| 2 | 0.421 | 0.132 | 269.7 |
| 3 | 0.559 | 0.163 | 273.9 |
| 4 | 0.673 | 0.174 | 276 |

## In these collections

- [Indigo swatches](https://grabient.com/indigo-swatches)
- [Jewel tone swatches](https://grabient.com/jewel-tone-swatches)

## Other forms

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