# Blue and turquoise color palette

The Blue and turquoise color palette brings together blue, light blue, and off-white. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits travel posters and environmental mood boards. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Monochrome blue and light blue angular swatches
- Seed: `kWWVe1v8G_FQ9vtoJL5-wW-w`
- Page: https://grabient.com/kWWVe1v8G_FQ9vtoJL5-wW-w?style=angularSwatches&steps=5&angle=25
- Drawn as: angular swatches, 5 steps, 25 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.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 | `#003975` | `oklch(35.05% 0.1166 255.30)` | Azure Dragon | white, 11.4 to 1 |
| 2 | `#0067ab` | `oklch(50.00% 0.1342 247.86)` | Wing Commander | white, 5.9 to 1 |
| 3 | `#009de2` | `oklch(66.14% 0.1474 238.34)` | Atmosphere | black, 6.9 to 1 |
| 4 | `#76d2f5` | `oklch(81.89% 0.1006 225.65)` | Heisenberg Blue | black, 12.2 to 1 |
| 5 | `#eaf7fb` | `oklch(96.85% 0.0152 216.13)` | Clear Skies | black, 19.2 to 1 |

## CSS

```css
background: conic-gradient(from 25deg, #003975 0.000% 20.000%, #0067ab 20.000% 40.000%, #009de2 40.000% 60.000%, #76d2f5 60.000% 80.000%, #eaf7fb 80.000% 100.000%);
background: conic-gradient(from 25deg, oklch(35.05% 0.1166 255.30) 0.000% 20.000%, oklch(50.00% 0.1342 247.86) 20.000% 40.000%, oklch(66.14% 0.1474 238.34) 40.000% 60.000%, oklch(81.89% 0.1006 225.65) 60.000% 80.000%, oklch(96.85% 0.0152 216.13) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.12 | 255.2 |
| 2 | 0.5 | 0.181 | 247.8 |
| 3 | 0.661 | 0.169 | 238.3 |
| 4 | 0.819 | 0.101 | 225.6 |
| 5 | 0.969 | 0.015 | 216.1 |

## In these collections

- [Beach swatches](https://grabient.com/beach-swatches)
- [Natural swatches](https://grabient.com/natural-swatches)

## Other forms

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