# Blue color palette

The Blue color palette brings together off-white, light teal, blue, and dark blue. The colors span a very broad lightness range, combining restrained color with high contrast. Its balanced and composed character suits holiday stationery and seasonal displays. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Monochrome white and navy linear swatches
- Seed: `kW9gac6pC_9UUQk6lkGnRnBQ`
- Page: https://grabient.com/kW9gac6pC_9UUQk6lkGnRnBQ?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.6 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 | `#eff6f8` | `oklch(96.85% 0.0083 220.08)` | Silent Snowfall | black, 19.2 to 1 |
| 2 | `#aad2df` | `oklch(83.86% 0.0455 220.08)` | Light Blue Glint | black, 12.9 to 1 |
| 3 | `#769ab4` | `oklch(66.93% 0.0551 240.16)` | Walden Pond | black, 7 to 1 |
| 4 | `#415a7a` | `oklch(46.06% 0.0606 254.95)` | Newburyport | white, 7 to 1 |
| 5 | `#0d193d` | `oklch(22.83% 0.0703 266.58)` | Maastricht Blue | white, 17.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #eff6f8 0.000% 20.000%, #aad2df 20.000% 40.000%, #769ab4 40.000% 60.000%, #415a7a 60.000% 80.000%, #0d193d 80.000% 100.000%);
background: linear-gradient(90deg, oklch(96.85% 0.0083 220.08) 0.000% 20.000%, oklch(83.86% 0.0455 220.08) 20.000% 40.000%, oklch(66.93% 0.0551 240.16) 40.000% 60.000%, oklch(46.06% 0.0606 254.95) 60.000% 80.000%, oklch(22.83% 0.0703 266.58) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.008 | 220.1 |
| 2 | 0.839 | 0.045 | 220.1 |
| 3 | 0.669 | 0.055 | 240.2 |
| 4 | 0.461 | 0.061 | 255 |
| 5 | 0.228 | 0.07 | 266.6 |

## In these collections

- [Winter swatches](https://grabient.com/winter-swatches)
- [Navy swatches](https://grabient.com/navy-swatches)

## Other forms

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