# Icy Blue Teal Bands

These five vertical bands move through pale icy blue, deep navy, muted teal, deep blue-teal, and pale blue. Their alternating light and dark values support clear text and icon placement while keeping both named color families visible. Use them for dashboards, aquatic branding, presentation graphics, or crisp interface accents.

- Also called: Seamless light blue, navy and teal linear swatches
- Seed: `kW5x-yGA-_F8guGqFcVdozBY`
- Page: https://grabient.com/kW5x-yGA-_F8guGqFcVdozBY?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark center, vivid, cool, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.2 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 | `#cde4fd` | `oklch(90.94% 0.0427 250.31)` | Fresh Water | black, 16 to 1 |
| 2 | `#011525` | `oklch(18.90% 0.0427 242.92)` | Creeping Death | white, 18.4 to 1 |
| 3 | `#68c0af` | `oklch(74.80% 0.0896 179.51)` | Blue Energy | black, 9.7 to 1 |
| 4 | `#063c4c` | `oklch(33.07% 0.0593 224.95)` | Ghostlands Coal | white, 11.9 to 1 |
| 5 | `#d4edfe` | `oklch(93.31% 0.0344 237.63)` | Ice Castle | black, 17.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #cde4fd 0.000% 20.000%, #011525 20.000% 40.000%, #68c0af 40.000% 60.000%, #063c4c 60.000% 80.000%, #d4edfe 80.000% 100.000%);
background: linear-gradient(90deg, oklch(90.94% 0.0427 250.31) 0.000% 20.000%, oklch(18.90% 0.0427 242.92) 20.000% 40.000%, oklch(74.80% 0.0896 179.51) 40.000% 60.000%, oklch(33.07% 0.0593 224.95) 60.000% 80.000%, oklch(93.31% 0.0344 237.63) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.909 | 0.043 | 250.3 |
| 2 | 0.189 | 0.043 | 242.9 |
| 3 | 0.748 | 0.09 | 179.5 |
| 4 | 0.331 | 0.059 | 225 |
| 5 | 0.933 | 0.034 | 237.6 |

## In these collections

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

## Other forms

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