# Teal color palette

The Teal color palette brings together blue 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 lightest and darkest tones both fall within the blue color family.

- Also called: Monochrome blue and light blue angular swatches
- Seed: `kWZkGqxy8_V-rv1Nsz9OqS_Q`
- Page: https://grabient.com/kWZkGqxy8_V-rv1Nsz9OqS_Q?style=angularSwatches&steps=5&angle=210
- Drawn as: angular swatches, 5 steps, 210 degrees
- Kinds: light center, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#044d73` | `oklch(40.16% 0.0896 239.77)` | Dignity Blue | white, 9 to 1 |
| 2 | `#007eaf` | `oklch(55.91% 0.1178 234.50)` | Capstan | black, 4.5 to 1 |
| 3 | `#4dbdeb` | `oklch(75.20% 0.1199 229.20)` | Clean Pool | black, 9.7 to 1 |
| 4 | `#0091b6` | `oklch(61.03% 0.1145 223.93)` | Cool Tide | black, 5.7 to 1 |
| 5 | `#006377` | `oklch(46.07% 0.0831 218.65)` | Atlantis Myth | white, 6.9 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #044d73 0.000% 20.000%, #007eaf 20.000% 40.000%, #4dbdeb 40.000% 60.000%, #0091b6 60.000% 80.000%, #006377 80.000% 100.000%);
background: conic-gradient(from 210deg, oklch(40.16% 0.0896 239.77) 0.000% 20.000%, oklch(55.91% 0.1178 234.50) 20.000% 40.000%, oklch(75.20% 0.1199 229.20) 40.000% 60.000%, oklch(61.03% 0.1145 223.93) 60.000% 80.000%, oklch(46.07% 0.0831 218.65) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.09 | 239.8 |
| 2 | 0.559 | 0.13 | 234.5 |
| 3 | 0.752 | 0.12 | 229.2 |
| 4 | 0.61 | 0.141 | 223.9 |
| 5 | 0.461 | 0.101 | 218.6 |

## In these collections

- [Blue swatches](https://grabient.com/blue-swatches)
- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)
- [Ocean swatches](https://grabient.com/ocean-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

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