# Sky blue and teal color palette

The Sky blue and teal color palette brings together light teal and teal. 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 teal, and its lightest tone is light teal.

- Also called: Analogous light blue, blue and teal angular swatches
- Seed: `kY3jSS4SbAFGoQJGpECVCi-OOsPo`
- Page: https://grabient.com/kY3jSS4SbAFGoQJGpECVCi-OOsPo?style=angularSwatches&steps=6&angle=315
- Drawn as: angular swatches, 6 steps, 315 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#9de4ed` | `oklch(87.40% 0.0717 206.02)` | Blizzard Blue | black, 14.7 to 1 |
| 2 | `#50c5d4` | `oklch(76.38% 0.1061 207.07)` | Sea Serpent | black, 10.2 to 1 |
| 3 | `#0c9eb4` | `oklch(64.17% 0.1102 212.36)` | Lake Blue | black, 6.5 to 1 |
| 4 | `#028099` | `oklch(55.51% 0.0992 217.64)` | Amazing Sky | white, 4.5 to 1 |
| 5 | `#08a6b1` | `oklch(66.14% 0.1116 202.85)` | Exotic Sea | black, 7.1 to 1 |
| 6 | `#3cd1cb` | `oklch(78.35% 0.1213 191.22)` | Medium Turquoise | black, 11.1 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #9de4ed 0.000% 16.667%, #50c5d4 16.667% 33.333%, #0c9eb4 33.333% 50.000%, #028099 50.000% 66.667%, #08a6b1 66.667% 83.333%, #3cd1cb 83.333% 100.000%);
background: conic-gradient(from 315deg, oklch(87.40% 0.0717 206.02) 0.000% 16.667%, oklch(76.38% 0.1061 207.07) 16.667% 33.333%, oklch(64.17% 0.1102 212.36) 33.333% 50.000%, oklch(55.51% 0.0992 217.64) 50.000% 66.667%, oklch(66.14% 0.1116 202.85) 66.667% 83.333%, oklch(78.35% 0.1213 191.22) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.874 | 0.072 | 206 |
| 2 | 0.764 | 0.106 | 207.1 |
| 3 | 0.642 | 0.11 | 212.4 |
| 4 | 0.555 | 0.099 | 217.6 |
| 5 | 0.661 | 0.112 | 202.8 |
| 6 | 0.783 | 0.121 | 191.2 |

## In these collections

- [Cyan swatches](https://grabient.com/cyan-swatches)
- [Tint swatches](https://grabient.com/tint-swatches)

## Other forms

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