# Teal color palette

The Teal color palette brings together teal and green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is teal, and its lightest tone is green.

- Also called: Vivid analogous teal to green radial gradient
- Seed: `kSjEKQzqg9NUwPe`
- Page: https://grabient.com/kSjEKQzqg9NUwPe?style=radialGradient&steps=32&angle=270
- Drawn as: radial gradient, 32 steps, 270 degrees
- Kinds: even lightness, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.6 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 | `#0f818a` | `oklch(55.12% 0.0909 203.20)` | Riviera Sea | white, 4.6 to 1 |
| 2 | `#0e828a` | `oklch(55.36% 0.0916 202.35)` | Precious Blue | white, 4.5 to 1 |
| 3 | `#0c838a` | `oklch(55.67% 0.0925 201.30)` | Precious Blue | black, 4.6 to 1 |
| 4 | `#0a858a` | `oklch(56.02% 0.0934 200.07)` | Gulf Stream | black, 4.7 to 1 |
| 5 | `#08868a` | `oklch(56.41% 0.0945 198.70)` | Totally Teal | black, 4.7 to 1 |
| 6 | `#06888a` | `oklch(56.84% 0.0956 197.20)` | Old Truck | black, 4.8 to 1 |
| 7 | `#058a8a` | `oklch(57.29% 0.0969 195.60)` | Dark Cyan | black, 4.9 to 1 |
| 8 | `#038b8a` | `oklch(57.77% 0.0982 193.93)` | Dark Cyan | black, 5 to 1 |
| 9 | `#038d8a` | `oklch(58.27% 0.0996 192.20)` | Corfu Shallows | black, 5.2 to 1 |
| 10 | `#028f8a` | `oklch(58.77% 0.1010 190.44)` | Corfu Shallows | black, 5.3 to 1 |
| 11 | `#03918a` | `oklch(59.28% 0.1024 188.68)` | Supermint | black, 5.4 to 1 |
| 12 | `#04938a` | `oklch(59.78% 0.1039 186.94)` | Torrid Turquoise | black, 5.5 to 1 |
| 13 | `#059589` | `oklch(60.27% 0.1053 185.23)` | Lights at Sea | black, 5.6 to 1 |
| 14 | `#079789` | `oklch(60.75% 0.1068 183.60)` | Intense Teal | black, 5.7 to 1 |
| 15 | `#099889` | `oklch(61.20% 0.1082 182.05)` | Plumage | black, 5.8 to 1 |
| 16 | `#0b9a88` | `oklch(61.62% 0.1096 180.62)` | Flamboyant Teal | black, 5.9 to 1 |
| 17 | `#0e9c88` | `oklch(62.00% 0.1109 179.30)` | Flamboyant Teal | black, 6 to 1 |
| 18 | `#0f9d87` | `oklch(62.39% 0.1124 178.00)` | Flamboyant Teal | black, 6.1 to 1 |
| 19 | `#119e87` | `oklch(62.78% 0.1139 176.68)` | Reptilian Green | black, 6.2 to 1 |
| 20 | `#13a086` | `oklch(63.17% 0.1155 175.37)` | Reptilian Green | black, 6.3 to 1 |
| 21 | `#15a185` | `oklch(63.57% 0.1171 174.08)` | Reptilian Green | black, 6.5 to 1 |
| 22 | `#17a385` | `oklch(63.95% 0.1188 172.80)` | Congo Green | black, 6.6 to 1 |
| 23 | `#19a484` | `oklch(64.33% 0.1204 171.55)` | Congo Green | black, 6.7 to 1 |
| 24 | `#1ba683` | `oklch(64.70% 0.1221 170.34)` | Congo Green | black, 6.8 to 1 |
| 25 | `#1da782` | `oklch(65.05% 0.1237 169.18)` | Gumdrop Green | black, 6.9 to 1 |
| 26 | `#20a882` | `oklch(65.39% 0.1252 168.07)` | Gumdrop Green | black, 7 to 1 |
| 27 | `#22a981` | `oklch(65.71% 0.1267 167.03)` | Simply Green | black, 7 to 1 |
| 28 | `#24ab80` | `oklch(66.01% 0.1281 166.05)` | Simply Green | black, 7.1 to 1 |
| 29 | `#26ac7f` | `oklch(66.28% 0.1294 165.16)` | Crayola Green | black, 7.2 to 1 |
| 30 | `#28ac7f` | `oklch(66.53% 0.1305 164.35)` | Crayola Green | black, 7.3 to 1 |
| 31 | `#29ad7e` | `oklch(66.75% 0.1315 163.65)` | Crayola Green | black, 7.3 to 1 |
| 32 | `#2bae7d` | `oklch(66.93% 0.1323 163.05)` | Crayola Green | black, 7.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #0f818a 0.0%, #0e828a 3.2%, #0c838a 6.5%, #0a858a 9.7%, #08868a 12.9%, #06888a 16.1%, #058a8a 19.4%, #038b8a 22.6%, #038d8a 25.8%, #028f8a 29.0%, #03918a 32.3%, #04938a 35.5%, #059589 38.7%, #079789 41.9%, #099889 45.2%, #0b9a88 48.4%, #0e9c88 51.6%, #0f9d87 54.8%, #119e87 58.1%, #13a086 61.3%, #15a185 64.5%, #17a385 67.7%, #19a484 71.0%, #1ba683 74.2%, #1da782 77.4%, #20a882 80.6%, #22a981 83.9%, #24ab80 87.1%, #26ac7f 90.3%, #28ac7f 93.5%, #29ad7e 96.8%, #2bae7d 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(55.12% 0.0909 203.20) 0.0%, oklch(55.36% 0.0916 202.35) 3.2%, oklch(55.67% 0.0925 201.30) 6.5%, oklch(56.02% 0.0934 200.07) 9.7%, oklch(56.41% 0.0945 198.70) 12.9%, oklch(56.84% 0.0956 197.20) 16.1%, oklch(57.29% 0.0969 195.60) 19.4%, oklch(57.77% 0.0982 193.93) 22.6%, oklch(58.27% 0.0996 192.20) 25.8%, oklch(58.77% 0.1010 190.44) 29.0%, oklch(59.28% 0.1024 188.68) 32.3%, oklch(59.78% 0.1039 186.94) 35.5%, oklch(60.27% 0.1053 185.23) 38.7%, oklch(60.75% 0.1068 183.60) 41.9%, oklch(61.20% 0.1082 182.05) 45.2%, oklch(61.62% 0.1096 180.62) 48.4%, oklch(62.00% 0.1109 179.30) 51.6%, oklch(62.39% 0.1124 178.00) 54.8%, oklch(62.78% 0.1139 176.68) 58.1%, oklch(63.17% 0.1155 175.37) 61.3%, oklch(63.57% 0.1171 174.08) 64.5%, oklch(63.95% 0.1188 172.80) 67.7%, oklch(64.33% 0.1204 171.55) 71.0%, oklch(64.70% 0.1221 170.34) 74.2%, oklch(65.05% 0.1237 169.18) 77.4%, oklch(65.39% 0.1252 168.07) 80.6%, oklch(65.71% 0.1267 167.03) 83.9%, oklch(66.01% 0.1281 166.05) 87.1%, oklch(66.28% 0.1294 165.16) 90.3%, oklch(66.53% 0.1305 164.35) 93.5%, oklch(66.75% 0.1315 163.65) 96.8%, oklch(66.93% 0.1323 163.05) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.091 | 203.2 |
| 2 | 0.618 | 0.11 | 180 |
| 3 | 0.669 | 0.132 | 163 |

## In these collections

- [Teal gradients](https://grabient.com/teal-gradients)
- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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