# Teal summer palette

The Teal summer palette brings together pale teal, light teal, teal, and blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is blue, and its lightest tone is pale teal.

- Also called: Analogous light blue, cyan and blue linear swatches
- Seed: `kW-RWA7Si_l6tQZKJ8QOKRBg`
- Page: https://grabient.com/kW-RWA7Si_l6tQZKJ8QOKRBg?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: light to dark, pastel, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.1 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 | `#e6fff9` | `oklch(98.03% 0.0271 180.73)` | Placebo Turquoise | black, 20 to 1 |
| 2 | `#76e9d0` | `oklch(85.83% 0.1116 177.53)` | Turquoise Chalk | black, 14.2 to 1 |
| 3 | `#1dc4bf` | `oklch(74.41% 0.1240 191.27)` | Swimmers Pool | black, 9.7 to 1 |
| 4 | `#0e87ac` | `oklch(58.27% 0.1089 226.14)` | Lyrebird | black, 5.1 to 1 |
| 5 | `#065a85` | `oklch(44.49% 0.0992 239.88)` | High Profile | white, 7.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #e6fff9 0.000% 20.000%, #76e9d0 20.000% 40.000%, #1dc4bf 40.000% 60.000%, #0e87ac 60.000% 80.000%, #065a85 80.000% 100.000%);
background: linear-gradient(135deg, oklch(98.03% 0.0271 180.73) 0.000% 20.000%, oklch(85.83% 0.1116 177.53) 20.000% 40.000%, oklch(74.41% 0.1240 191.27) 40.000% 60.000%, oklch(58.27% 0.1089 226.14) 60.000% 80.000%, oklch(44.49% 0.0992 239.88) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.029 | 180.7 |
| 2 | 0.858 | 0.112 | 177.5 |
| 3 | 0.744 | 0.124 | 191.3 |
| 4 | 0.583 | 0.109 | 226.1 |
| 5 | 0.445 | 0.099 | 239.9 |

## In these collections

- [Summer swatches](https://grabient.com/summer-swatches)

## Other forms

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