# Blue color palette

The Blue color palette brings together off-white, light blue, blue, teal, and pale teal. The colors span a moderate lightness range, combining moderate color with clear contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Gray, blue and light blue angular swatches
- Seed: `kY9AepbBQ_9AzQpCFj53KC8HKMva`
- Page: https://grabient.com/kY9AepbBQ_9AzQpCFj53KC8HKMva?style=angularSwatches&steps=6&angle=315
- Drawn as: angular swatches, 6 steps, 315 degrees
- Kinds: dark center, pastel, cool, monochrome
- Hues: analogous
- 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 | `#ecf3f8` | `oklch(96.06% 0.0096 237.66)` | Insignia White | black, 18.7 to 1 |
| 2 | `#add4ee` | `oklch(85.04% 0.0551 237.66)` | Vive le Vent | black, 13.4 to 1 |
| 3 | `#5488dd` | `oklch(62.99% 0.1406 259.85)` | Blue Jay | black, 5.9 to 1 |
| 4 | `#4c6c8a` | `oklch(51.97% 0.0606 247.17)` | Revel Blue | white, 5.4 to 1 |
| 5 | `#5db6ca` | `oklch(72.83% 0.0896 214.41)` | Water Baby | black, 8.9 to 1 |
| 6 | `#c5e6e6` | `oklch(90.16% 0.0344 195.39)` | Pale Seafoam | black, 15.8 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #ecf3f8 0.000% 16.667%, #add4ee 16.667% 33.333%, #5488dd 33.333% 50.000%, #4c6c8a 50.000% 66.667%, #5db6ca 66.667% 83.333%, #c5e6e6 83.333% 100.000%);
background: conic-gradient(from 315deg, oklch(96.06% 0.0096 237.66) 0.000% 16.667%, oklch(85.04% 0.0551 237.66) 16.667% 33.333%, oklch(62.99% 0.1406 259.85) 33.333% 50.000%, oklch(51.97% 0.0606 247.17) 50.000% 66.667%, oklch(72.83% 0.0896 214.41) 66.667% 83.333%, oklch(90.16% 0.0344 195.39) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.01 | 237.7 |
| 2 | 0.85 | 0.055 | 237.7 |
| 3 | 0.63 | 0.141 | 259.8 |
| 4 | 0.52 | 0.061 | 247.2 |
| 5 | 0.728 | 0.09 | 214.4 |
| 6 | 0.902 | 0.034 | 195.4 |

## In these collections

- [Cool swatches](https://grabient.com/cool-swatches)
- [Cool blue](https://grabient.com/cool-blue)
- [Blue swatches](https://grabient.com/blue-swatches)
- [Cool blue swatches](https://grabient.com/cool-blue-swatches)

## Other forms

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