# Powder Blue Coastal Steps

The Turquoise cool blue palette brings together off-white, light teal, light blue, and blue. 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: Monochrome light blue and blue linear swatches
- Seed: `kW8QuZbRC_-CdQXRr0GP5tA4`
- Page: https://grabient.com/kW8QuZbRC_-CdQXRr0GP5tA4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, pastel, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.1 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 | `#e3f1f4` | `oklch(94.88% 0.0152 215.16)` | Ethereal White | black, 18.1 to 1 |
| 2 | `#b0d9e3` | `oklch(85.83% 0.0455 215.16)` | Srsly Blue | black, 13.8 to 1 |
| 3 | `#79bcd9` | `oklch(75.98% 0.0799 227.84)` | Pacific Harbour | black, 9.9 to 1 |
| 4 | `#3395d4` | `oklch(64.17% 0.1295 241.58)` | Boyzone | black, 6.3 to 1 |
| 5 | `#41668c` | `oklch(50.00% 0.0744 250.03)` | French Mirage Blue | white, 5.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #e3f1f4 0.000% 20.000%, #b0d9e3 20.000% 40.000%, #79bcd9 40.000% 60.000%, #3395d4 60.000% 80.000%, #41668c 80.000% 100.000%);
background: linear-gradient(90deg, oklch(94.88% 0.0152 215.16) 0.000% 20.000%, oklch(85.83% 0.0455 215.16) 20.000% 40.000%, oklch(75.98% 0.0799 227.84) 40.000% 60.000%, oklch(64.17% 0.1295 241.58) 60.000% 80.000%, oklch(50.00% 0.0744 250.03) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.949 | 0.015 | 215.2 |
| 2 | 0.858 | 0.045 | 215.2 |
| 3 | 0.76 | 0.08 | 227.8 |
| 4 | 0.642 | 0.13 | 241.6 |
| 5 | 0.5 | 0.074 | 250 |

## In these collections

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

## Other forms

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