# Lagoon Sky Blue Bands

These diagonal bands move through clear ocean blue, muted teal, deep marine blue, pale sky, and near black. The ordered contrast feels aquatic while retaining enough depth for readable layouts. Use them for marine branding, climate dashboards, travel graphics, or product interfaces that need bright water tones grounded by dark navigation colors.

- Also called: Blue, teal, light blue and black linear swatches
- Seed: `kWj0eeQ5U7rYaw_wFcKFYo7Q`
- Page: https://grabient.com/kWj0eeQ5U7rYaw_wFcKFYo7Q?style=linearSwatches&steps=5&angle=60
- Drawn as: linear swatches, 5 steps, 60 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#19829e` | `oklch(56.30% 0.0978 222.19)` | Decore Splash | black, 4.7 to 1 |
| 2 | `#427771` | `oklch(53.15% 0.0579 186.26)` | Sea Pea | white, 5 to 1 |
| 3 | `#0d576a` | `oklch(42.52% 0.0730 220.07)` | Sea Creature | white, 8 to 1 |
| 4 | `#b7defd` | `oklch(88.19% 0.0593 242.27)` | Broad Daylight | black, 14.8 to 1 |
| 5 | `#011315` | `oklch(16.93% 0.0276 203.17)` | Black Glaze | white, 19 to 1 |

## CSS

```css
background: linear-gradient(60deg, #19829e 0.000% 20.000%, #427771 20.000% 40.000%, #0d576a 40.000% 60.000%, #b7defd 60.000% 80.000%, #011315 80.000% 100.000%);
background: linear-gradient(60deg, oklch(56.30% 0.0978 222.19) 0.000% 20.000%, oklch(53.15% 0.0579 186.26) 20.000% 40.000%, oklch(42.52% 0.0730 220.07) 40.000% 60.000%, oklch(88.19% 0.0593 242.27) 60.000% 80.000%, oklch(16.93% 0.0276 203.17) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.563 | 0.098 | 222.2 |
| 2 | 0.531 | 0.058 | 186.3 |
| 3 | 0.425 | 0.073 | 220.1 |
| 4 | 0.882 | 0.059 | 242.3 |
| 5 | 0.169 | 0.028 | 203.2 |

## In these collections

- [Blue and teal swatches](https://grabient.com/blue-and-teal-swatches)

## Other forms

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