# Deep cyan and emerald hero section palette

The Deep cyan and emerald hero section palette brings together blue, teal, green, light green, and pale green. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is blue, and its lightest tone is pale green.

- Also called: Cool blue, teal, green and light blue linear gradient
- Seed: `kWeDmiTaM5mCvvftpz9cIxA4`
- Page: https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4?steps=8&angle=225
- Drawn as: linear gradient, 8 steps, 225 degrees
- Kinds: dark to light, pastel, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.7 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 | `#1f647e` | `oklch(47.24% 0.0785 227.81)` | Georgian Bay | white, 6.6 to 1 |
| 2 | `#187f81` | `oklch(54.31% 0.0867 197.26)` | Jade Jewel | white, 4.7 to 1 |
| 3 | `#3d9d80` | `oklch(63.14% 0.1010 169.46)` | Greenway | black, 6.3 to 1 |
| 4 | `#52bc89` | `oklch(72.02% 0.1248 159.92)` | Bleached Olive | black, 8.9 to 1 |
| 5 | `#72d596` | `oklch(79.48% 0.1299 154.25)` | Enchanted Emerald | black, 11.6 to 1 |
| 6 | `#94e4a9` | `oklch(85.21% 0.1140 151.66)` | Hospital Green | black, 13.9 to 1 |
| 7 | `#b0e6c2` | `oklch(87.91% 0.0753 154.83)` | Glaucous Green | black, 15 to 1 |
| 8 | `#c8e1d2` | `oklch(88.58% 0.0331 160.18)` | Icy Mint | black, 15 to 1 |

## CSS

```css
background: linear-gradient(225deg, #1f647e 0.0%, #187f81 14.3%, #3d9d80 28.6%, #52bc89 42.9%, #72d596 57.1%, #94e4a9 71.4%, #b0e6c2 85.7%, #c8e1d2 100.0%);
background: linear-gradient(225deg in oklch, oklch(47.24% 0.0785 227.81) 0.0%, oklch(54.31% 0.0867 197.26) 14.3%, oklch(63.14% 0.1010 169.46) 28.6%, oklch(72.02% 0.1248 159.92) 42.9%, oklch(79.48% 0.1299 154.25) 57.1%, oklch(85.21% 0.1140 151.66) 71.4%, oklch(87.91% 0.0753 154.83) 85.7%, oklch(88.58% 0.0331 160.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.472 | 0.079 | 227.8 |
| 2 | 0.61 | 0.096 | 173.9 |
| 3 | 0.76 | 0.131 | 157 |
| 4 | 0.862 | 0.107 | 151.7 |
| 5 | 0.886 | 0.033 | 160.2 |

## In these collections

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

## Other forms

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