# Teal and forest green hero section palette

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

- Also called: Vivid analogous teal to green radial gradient
- Seed: `kSk3uHS0U9kjBvY`
- Page: https://grabient.com/kSk3uHS0U9kjBvY?style=radialGradient&steps=32
- Drawn as: radial gradient, 32 steps, 90 degrees
- Kinds: even lightness, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#008c87` | `oklch(57.88% 0.1000 189.84)` | Greenish Blue | black, 5.1 to 1 |
| 2 | `#008d86` | `oklch(57.93% 0.1003 189.11)` | Aqua Experience | black, 5.1 to 1 |
| 3 | `#008d86` | `oklch(57.99% 0.1008 188.23)` | Aqua Experience | black, 5.1 to 1 |
| 4 | `#008d85` | `oklch(58.08% 0.1013 187.22)` | Aqua Experience | black, 5.1 to 1 |
| 5 | `#008e84` | `oklch(58.18% 0.1020 186.09)` | Aqua Experience | black, 5.1 to 1 |
| 6 | `#008e83` | `oklch(58.28% 0.1028 184.85)` | Aqua Experience | black, 5.2 to 1 |
| 7 | `#008f82` | `oklch(58.39% 0.1037 183.53)` | Philips Green | black, 5.2 to 1 |
| 8 | `#009081` | `oklch(58.51% 0.1047 182.14)` | Philips Green | black, 5.2 to 1 |
| 9 | `#00907f` | `oklch(58.62% 0.1059 180.69)` | Philips Green | black, 5.3 to 1 |
| 10 | `#00917e` | `oklch(58.72% 0.1071 179.20)` | Miami Jade | black, 5.3 to 1 |
| 11 | `#00917c` | `oklch(58.82% 0.1085 177.70)` | Aqua Waters | black, 5.3 to 1 |
| 12 | `#00927b` | `oklch(58.91% 0.1100 176.19)` | Aqua Waters | black, 5.3 to 1 |
| 13 | `#009279` | `oklch(58.98% 0.1115 174.69)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 14 | `#009377` | `oklch(59.03% 0.1131 173.22)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 15 | `#009375` | `oklch(59.06% 0.1148 171.79)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 16 | `#009373` | `oklch(59.07% 0.1164 170.41)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 17 | `#009371` | `oklch(59.04% 0.1181 169.10)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 18 | `#00936f` | `oklch(58.98% 0.1198 167.73)` | Viridian | black, 5.4 to 1 |
| 19 | `#00936c` | `oklch(58.90% 0.1218 166.30)` | Viridian | black, 5.4 to 1 |
| 20 | `#00936a` | `oklch(58.79% 0.1239 164.83)` | Viridian | black, 5.3 to 1 |
| 21 | `#009367` | `oklch(58.66% 0.1262 163.33)` | Emerald Lake | black, 5.3 to 1 |
| 22 | `#009363` | `oklch(58.51% 0.1287 161.82)` | Emerald Lake | black, 5.3 to 1 |
| 23 | `#009260` | `oklch(58.35% 0.1314 160.31)` | Emerald Lake | black, 5.3 to 1 |
| 24 | `#00925d` | `oklch(58.19% 0.1342 158.83)` | Emerald Lake | black, 5.2 to 1 |
| 25 | `#009259` | `oklch(58.02% 0.1372 157.38)` | Emerald Isle | black, 5.2 to 1 |
| 26 | `#009155` | `oklch(57.85% 0.1403 155.99)` | Emerald Isle | black, 5.2 to 1 |
| 27 | `#009151` | `oklch(57.69% 0.1436 154.67)` | Moss | black, 5.1 to 1 |
| 28 | `#00914d` | `oklch(57.54% 0.1468 153.43)` | Capitalino Cactus | black, 5.1 to 1 |
| 29 | `#00914a` | `oklch(57.39% 0.1500 152.30)` | Jade Sylph | black, 5.1 to 1 |
| 30 | `#009046` | `oklch(57.27% 0.1531 151.28)` | Jade Sylph | black, 5 to 1 |
| 31 | `#009043` | `oklch(57.17% 0.1559 150.40)` | Jade Sylph | black, 5 to 1 |
| 32 | `#009040` | `oklch(57.09% 0.1585 149.68)` | Viper Green | black, 5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #008c87 0.0%, #008d86 3.2%, #008d86 6.5%, #008d85 9.7%, #008e84 12.9%, #008e83 16.1%, #008f82 19.4%, #009081 22.6%, #00907f 25.8%, #00917e 29.0%, #00917c 32.3%, #00927b 35.5%, #009279 38.7%, #009377 41.9%, #009375 45.2%, #009373 48.4%, #009371 51.6%, #00936f 54.8%, #00936c 58.1%, #00936a 61.3%, #009367 64.5%, #009363 67.7%, #009260 71.0%, #00925d 74.2%, #009259 77.4%, #009155 80.6%, #009151 83.9%, #00914d 87.1%, #00914a 90.3%, #009046 93.5%, #009043 96.8%, #009040 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(57.88% 0.1000 189.84) 0.0%, oklch(57.93% 0.1003 189.11) 3.2%, oklch(57.99% 0.1008 188.23) 6.5%, oklch(58.08% 0.1013 187.22) 9.7%, oklch(58.18% 0.1020 186.09) 12.9%, oklch(58.28% 0.1028 184.85) 16.1%, oklch(58.39% 0.1037 183.53) 19.4%, oklch(58.51% 0.1047 182.14) 22.6%, oklch(58.62% 0.1059 180.69) 25.8%, oklch(58.72% 0.1071 179.20) 29.0%, oklch(58.82% 0.1085 177.70) 32.3%, oklch(58.91% 0.1100 176.19) 35.5%, oklch(58.98% 0.1115 174.69) 38.7%, oklch(59.03% 0.1131 173.22) 41.9%, oklch(59.06% 0.1148 171.79) 45.2%, oklch(59.07% 0.1164 170.41) 48.4%, oklch(59.04% 0.1181 169.10) 51.6%, oklch(58.98% 0.1198 167.73) 54.8%, oklch(58.90% 0.1218 166.30) 58.1%, oklch(58.79% 0.1239 164.83) 61.3%, oklch(58.66% 0.1262 163.33) 64.5%, oklch(58.51% 0.1287 161.82) 67.7%, oklch(58.35% 0.1314 160.31) 71.0%, oklch(58.19% 0.1342 158.83) 74.2%, oklch(58.02% 0.1372 157.38) 77.4%, oklch(57.85% 0.1403 155.99) 80.6%, oklch(57.69% 0.1436 154.67) 83.9%, oklch(57.54% 0.1468 153.43) 87.1%, oklch(57.39% 0.1500 152.30) 90.3%, oklch(57.27% 0.1531 151.28) 93.5%, oklch(57.17% 0.1559 150.40) 96.8%, oklch(57.09% 0.1585 149.68) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.579 | 0.169 | 189.8 |
| 2 | 0.591 | 0.19 | 169.8 |
| 3 | 0.571 | 0.181 | 149.7 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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