# Sky blue and teal ocean palette

The Sky blue and teal ocean palette brings together light teal and blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is blue, and its lightest tone is light teal.

- Also called: Monochrome light blue to blue linear gradient
- Seed: `kU0DOUXipC1CsQDGrkDA`
- Page: https://grabient.com/kU0DOUXipC1CsQDGrkDA?steps=6&angle=225
- Drawn as: linear gradient, 6 steps, 225 degrees
- Kinds: vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.7 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 | `#8dd1dc` | `oklch(81.89% 0.0703 208.12)` | Foaming Surf | black, 12.2 to 1 |
| 2 | `#69c5e4` | `oklch(77.74% 0.0983 223.14)` | Candid Blue | black, 10.6 to 1 |
| 3 | `#4bb0e4` | `oklch(72.02% 0.1194 234.19)` | Summer Sky | black, 8.6 to 1 |
| 4 | `#309bcf` | `oklch(65.38% 0.1208 234.14)` | Blue Burst | black, 6.7 to 1 |
| 5 | `#1a88bf` | `oklch(59.66% 0.1237 237.48)` | Forget-Me-Not | black, 5.3 to 1 |
| 6 | `#107ab6` | `oklch(55.51% 0.1268 241.94)` | Star Command Blue | white, 4.6 to 1 |

## CSS

```css
background: linear-gradient(225deg, #8dd1dc 0.0%, #69c5e4 20.0%, #4bb0e4 40.0%, #309bcf 60.0%, #1a88bf 80.0%, #107ab6 100.0%);
background: linear-gradient(225deg in oklch, oklch(81.89% 0.0703 208.12) 0.0%, oklch(77.74% 0.0983 223.14) 20.0%, oklch(72.02% 0.1194 234.19) 40.0%, oklch(65.38% 0.1208 234.14) 60.0%, oklch(59.66% 0.1237 237.48) 80.0%, oklch(55.51% 0.1268 241.94) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.819 | 0.07 | 208.1 |
| 2 | 0.74 | 0.116 | 232.4 |
| 3 | 0.634 | 0.121 | 234.5 |
| 4 | 0.555 | 0.127 | 241.9 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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