# Seafoam Ink Blue Bands

These diagonal bands move from seafoam teal through deep blue black to pale icy blue. The three color sequence is simple, balanced, and distinctly coastal. Use them for wellness branding, clean application screens, water related presentations, or compact graphic systems that need a fresh highlight, a dark anchor, and a quiet neutral.

- Also called: Analogous teal, navy and light blue linear swatches
- Seed: `kStUOCpZJDXcLQ8`
- Page: https://grabient.com/kStUOCpZJDXcLQ8?style=linearSwatches&steps=3&angle=300
- Drawn as: linear swatches, 3 steps, 300 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.3 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 | `#56b5a8` | `oklch(71.26% 0.0923 183.52)` | Emerald Wave | black, 8.5 to 1 |
| 2 | `#03333b` | `oklch(29.53% 0.0496 212.05)` | Artist Blue | white, 13.6 to 1 |
| 3 | `#daedfe` | `oklch(93.70% 0.0303 244.81)` | Hoarfrost | black, 17.5 to 1 |

## CSS

```css
background: linear-gradient(300deg, #56b5a8 0.000% 33.333%, #03333b 33.333% 66.667%, #daedfe 66.667% 100.000%);
background: linear-gradient(300deg, oklch(71.26% 0.0923 183.52) 0.000% 33.333%, oklch(29.53% 0.0496 212.05) 33.333% 66.667%, oklch(93.70% 0.0303 244.81) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.713 | 0.092 | 183.5 |
| 2 | 0.295 | 0.05 | 212 |
| 3 | 0.937 | 0.03 | 244.8 |

## In these collections

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

## Other forms

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