# Blue coastal palette

The Blue coastal 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 brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Monochrome blue and gray angular swatches
- Seed: `kWZm28w8i_Fa9vvqoL7-wW_A`
- Page: https://grabient.com/kWZm28w8i_Fa9vvqoL7-wW_A?style=angularSwatches&steps=5&angle=35
- Drawn as: angular swatches, 5 steps, 35 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#1f3f98` | `oklch(40.16% 0.1502 265.08)` | Space Explorer | white, 9.4 to 1 |
| 2 | `#0066d9` | `oklch(53.15% 0.1942 257.70)` | Blue Ruin | white, 5.3 to 1 |
| 3 | `#2e9dfb` | `oklch(68.11% 0.1695 249.23)` | Brilliant Azure | black, 7.3 to 1 |
| 4 | `#95d2ff` | `oklch(83.86% 0.0891 240.77)` | Long Island Sound | black, 12.9 to 1 |
| 5 | `#ebf7fd` | `oklch(96.85% 0.0152 233.38)` | Clear Skies | black, 19.2 to 1 |

## CSS

```css
background: conic-gradient(from 35deg, #1f3f98 0.000% 20.000%, #0066d9 20.000% 40.000%, #2e9dfb 40.000% 60.000%, #95d2ff 60.000% 80.000%, #ebf7fd 80.000% 100.000%);
background: conic-gradient(from 35deg, oklch(40.16% 0.1502 265.08) 0.000% 20.000%, oklch(53.15% 0.1942 257.70) 20.000% 40.000%, oklch(68.11% 0.1695 249.23) 40.000% 60.000%, oklch(83.86% 0.0891 240.77) 60.000% 80.000%, oklch(96.85% 0.0152 233.38) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.15 | 265.1 |
| 2 | 0.531 | 0.2 | 257.7 |
| 3 | 0.681 | 0.169 | 249.2 |
| 4 | 0.839 | 0.09 | 240.8 |
| 5 | 0.969 | 0.015 | 233.4 |

## In these collections

- [Coastal swatches](https://grabient.com/coastal-swatches)

## Other forms

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