# Vivid analogous teal and green radial swatches

Vivid analogous teal and green radial swatches with 32 colors: #0f818a, #0e828a, #0c838a, #0a858a, #08868a, #06888a, #058a8a, #038b8a, #038d8a, #028f8a, #03918a, #04938a, #059589, #079789, #099889, #0b9a88, #0e9c88, #0f9d87, #119e87, #13a086, #15a185, #17a385, #19a484, #1ba683, #1da782, #20a882, #22a981, #24ab80, #26ac7f, #28ac7f, #29ad7e, #2bae7d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSjEKQzqg9NUwPe`
- Page: https://grabient.com/kSjEKQzqg9NUwPe?style=radialSwatches&steps=32&angle=270
- Drawn as: radial swatches, 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.000% 3.125%, #0e828a 3.125% 6.250%, #0c838a 6.250% 9.375%, #0a858a 9.375% 12.500%, #08868a 12.500% 15.625%, #06888a 15.625% 18.750%, #058a8a 18.750% 21.875%, #038b8a 21.875% 25.000%, #038d8a 25.000% 28.125%, #028f8a 28.125% 31.250%, #03918a 31.250% 34.375%, #04938a 34.375% 37.500%, #059589 37.500% 40.625%, #079789 40.625% 43.750%, #099889 43.750% 46.875%, #0b9a88 46.875% 50.000%, #0e9c88 50.000% 53.125%, #0f9d87 53.125% 56.250%, #119e87 56.250% 59.375%, #13a086 59.375% 62.500%, #15a185 62.500% 65.625%, #17a385 65.625% 68.750%, #19a484 68.750% 71.875%, #1ba683 71.875% 75.000%, #1da782 75.000% 78.125%, #20a882 78.125% 81.250%, #22a981 81.250% 84.375%, #24ab80 84.375% 87.500%, #26ac7f 87.500% 90.625%, #28ac7f 90.625% 93.750%, #29ad7e 93.750% 96.875%, #2bae7d 96.875% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(55.12% 0.0909 203.20) 0.000% 3.125%, oklch(55.36% 0.0916 202.35) 3.125% 6.250%, oklch(55.67% 0.0925 201.30) 6.250% 9.375%, oklch(56.02% 0.0934 200.07) 9.375% 12.500%, oklch(56.41% 0.0945 198.70) 12.500% 15.625%, oklch(56.84% 0.0956 197.20) 15.625% 18.750%, oklch(57.29% 0.0969 195.60) 18.750% 21.875%, oklch(57.77% 0.0982 193.93) 21.875% 25.000%, oklch(58.27% 0.0996 192.20) 25.000% 28.125%, oklch(58.77% 0.1010 190.44) 28.125% 31.250%, oklch(59.28% 0.1024 188.68) 31.250% 34.375%, oklch(59.78% 0.1039 186.94) 34.375% 37.500%, oklch(60.27% 0.1053 185.23) 37.500% 40.625%, oklch(60.75% 0.1068 183.60) 40.625% 43.750%, oklch(61.20% 0.1082 182.05) 43.750% 46.875%, oklch(61.62% 0.1096 180.62) 46.875% 50.000%, oklch(62.00% 0.1109 179.30) 50.000% 53.125%, oklch(62.39% 0.1124 178.00) 53.125% 56.250%, oklch(62.78% 0.1139 176.68) 56.250% 59.375%, oklch(63.17% 0.1155 175.37) 59.375% 62.500%, oklch(63.57% 0.1171 174.08) 62.500% 65.625%, oklch(63.95% 0.1188 172.80) 65.625% 68.750%, oklch(64.33% 0.1204 171.55) 68.750% 71.875%, oklch(64.70% 0.1221 170.34) 71.875% 75.000%, oklch(65.05% 0.1237 169.18) 75.000% 78.125%, oklch(65.39% 0.1252 168.07) 78.125% 81.250%, oklch(65.71% 0.1267 167.03) 81.250% 84.375%, oklch(66.01% 0.1281 166.05) 84.375% 87.500%, oklch(66.28% 0.1294 165.16) 87.500% 90.625%, oklch(66.53% 0.1305 164.35) 90.625% 93.750%, oklch(66.75% 0.1315 163.65) 93.750% 96.875%, oklch(66.93% 0.1323 163.05) 96.875% 100.000%);
```

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