# Teal and coral color palette

The Teal and coral color palette brings together green, teal, light blue, light magenta, and light red. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is green, and its lightest tone is light red.

- Also called: Dark green, teal, light blue and pink linear gradient
- Seed: `kcUCh1MxfCkKdwhRIsDXKJA2ITwLkCk5ZLFEg`
- Page: https://grabient.com/kcUCh1MxfCkKdwhRIsDXKJA2ITwLkCk5ZLFEg?steps=8&angle=180
- Drawn as: linear gradient, 8 steps, 180 degrees
- Kinds: dark to light, vivid, cool, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.3 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 | `#103a2a` | `oklch(31.50% 0.0551 164.53)` | Deep Fir | white, 12.6 to 1 |
| 2 | `#0f534e` | `oklch(40.16% 0.0648 186.72)` | Plankton Green | white, 8.8 to 1 |
| 3 | `#1d7780` | `oklch(52.36% 0.0813 204.69)` | Blue Kelp | white, 5.2 to 1 |
| 4 | `#359bad` | `oklch(63.78% 0.0951 212.09)` | Rainy Mood | black, 6.4 to 1 |
| 5 | `#5bb5cf` | `oklch(72.83% 0.0937 219.48)` | Water Baby | black, 8.9 to 1 |
| 6 | `#91bccf` | `oklch(77.17% 0.0537 225.82)` | Reef Blue | black, 10.3 to 1 |
| 7 | `#c8b3bd` | `oklch(78.74% 0.0276 347.35)` | Masked Mauve | black, 10.6 to 1 |
| 8 | `#ff9c92` | `oklch(79.13% 0.1204 26.45)` | Peach Amber | black, 10.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #103a2a 0.0%, #0f534e 14.3%, #1d7780 28.6%, #359bad 42.9%, #5bb5cf 57.1%, #91bccf 71.4%, #c8b3bd 85.7%, #ff9c92 100.0%);
background: linear-gradient(180deg in oklch, oklch(31.50% 0.0551 164.53) 0.0%, oklch(40.16% 0.0648 186.72) 14.3%, oklch(52.36% 0.0813 204.69) 28.6%, oklch(63.78% 0.0951 212.09) 42.9%, oklch(72.83% 0.0937 219.48) 57.1%, oklch(77.17% 0.0537 225.82) 71.4%, oklch(78.74% 0.0276 347.35) 85.7%, oklch(79.13% 0.1204 26.45) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.315 | 0.055 | 164.5 |
| 2 | 0.402 | 0.065 | 186.7 |
| 3 | 0.524 | 0.081 | 204.7 |
| 4 | 0.638 | 0.095 | 212.1 |
| 5 | 0.728 | 0.094 | 219.5 |
| 6 | 0.772 | 0.054 | 225.8 |
| 7 | 0.787 | 0.028 | 347.3 |
| 8 | 0.791 | 0.135 | 386.4 |

## In these collections

- [Wallpaper gradients](https://grabient.com/wallpaper-gradients)
- [Soft multicolor gradients](https://grabient.com/soft-multicolor-gradients)
- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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