# Sky through the Evergreen

This diagonal gradient moves through vivid cyan, vivid teal, deep green, deep teal, vivid teal, green, teal, and pale cyan. The complete visible route keeps the collection’s named color relationship clear while providing distinct light and dark areas for type, marks, and framing.

- Also called: Light blue, dark green, teal and green linear gradient
- Seed: `kWx1GvJRoxz6dylcOLecxvIA`
- Page: https://grabient.com/kWx1GvJRoxz6dylcOLecxvIA?steps=32&angle=30
- Drawn as: linear gradient, 32 steps, 30 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.9 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 | `#7abffc` | `oklch(78.35% 0.1116 246.09)` | Maya Blue | black, 10.7 to 1 |
| 2 | `#5fb5e5` | `oklch(73.90% 0.1081 235.03)` | Sea Frolic | black, 9.2 to 1 |
| 3 | `#3ba5c1` | `oklch(67.43% 0.1029 218.64)` | Gulf Waters | black, 7.3 to 1 |
| 4 | `#189095` | `oklch(59.69% 0.0968 199.04)` | Splashy | black, 5.4 to 1 |
| 5 | `#117868` | `oklch(51.45% 0.0902 178.33)` | Shady Glade | white, 5.3 to 1 |
| 6 | `#1e5f40` | `oklch(43.48% 0.0838 158.61)` | Greenbriar | white, 7.6 to 1 |
| 7 | `#244920` | `oklch(36.53% 0.0781 141.99)` | Cal Poly Pomona Green | white, 10.3 to 1 |
| 8 | `#24380a` | `oklch(31.37% 0.0737 130.57)` | Blind Forest | white, 12.7 to 1 |
| 9 | `#213102` | `oklch(28.73% 0.0712 126.46)` | Blind Forest | white, 14 to 1 |
| 10 | `#1d3006` | `oklch(28.41% 0.0697 130.81)` | Blind Forest | white, 14.1 to 1 |
| 11 | `#173613` | `oklch(29.80% 0.0689 141.74)` | Gameboy Contrast | white, 13.4 to 1 |
| 12 | `#0c3e25` | `oklch(32.49% 0.0689 156.91)` | Angel Green | white, 12 to 1 |
| 13 | `#00493a` | `oklch(36.06% 0.0686 173.93)` | Aqua Deep | white, 10.4 to 1 |
| 14 | `#005350` | `oklch(40.07% 0.0691 190.53)` | Pacific Storm | white, 8.8 to 1 |
| 15 | `#025e66` | `oklch(44.08% 0.0746 204.26)` | Petrol | white, 7.4 to 1 |
| 16 | `#116877` | `oklch(47.69% 0.0788 212.80)` | Cotton Indigo | white, 6.4 to 1 |
| 17 | `#127182` | `oklch(50.63% 0.0846 214.03)` | Caribbean Dream | white, 5.6 to 1 |
| 18 | `#007c8a` | `oklch(53.59% 0.0923 208.57)` | Metallic Seaweed | white, 4.9 to 1 |
| 19 | `#00878b` | `oklch(56.66% 0.0963 198.37)` | Well Blue | black, 4.8 to 1 |
| 20 | `#009388` | `oklch(59.78% 0.1051 185.38)` | Old Benchmark | black, 5.5 to 1 |
| 21 | `#00a080` | `oklch(62.90% 0.1226 171.51)` | Reptilian Green | black, 6.3 to 1 |
| 22 | `#22ac71` | `oklch(65.98% 0.1435 158.69)` | Bright Camouflage | black, 7.1 to 1 |
| 23 | `#4bb464` | `oklch(68.95% 0.1518 148.82)` | Samphire Green | black, 8 to 1 |
| 24 | `#60bc61` | `oklch(71.77% 0.1556 143.85)` | Drop Green | black, 8.8 to 1 |
| 25 | `#67c56c` | `oklch(74.47% 0.1537 145.02)` | Verdant Oasis | black, 9.8 to 1 |
| 26 | `#65cf84` | `oklch(77.23% 0.1465 151.02)` | Spring Bouquet | black, 10.8 to 1 |
| 27 | `#61d8a0` | `oklch(79.98% 0.1355 160.45)` | Medium Aquamarine | black, 11.8 to 1 |
| 28 | `#64e0bd` | `oklch(82.63% 0.1222 171.99)` | Ocean in a Bowl | black, 12.9 to 1 |
| 29 | `#71e5d6` | `oklch(85.09% 0.1080 184.28)` | Turquoise Chalk | black, 13.9 to 1 |
| 30 | `#84e9e9` | `oklch(87.29% 0.0945 195.98)` | Bath Water | black, 14.8 to 1 |
| 31 | `#97ecf6` | `oklch(89.14% 0.0833 205.76)` | Permafrost | black, 15.5 to 1 |
| 32 | `#a4eefd` | `oklch(90.55% 0.0758 212.28)` | Beyond the Clouds | black, 16.2 to 1 |

## CSS

```css
background: linear-gradient(30deg, #7abffc 0.0%, #5fb5e5 3.2%, #3ba5c1 6.5%, #189095 9.7%, #117868 12.9%, #1e5f40 16.1%, #244920 19.4%, #24380a 22.6%, #213102 25.8%, #1d3006 29.0%, #173613 32.3%, #0c3e25 35.5%, #00493a 38.7%, #005350 41.9%, #025e66 45.2%, #116877 48.4%, #127182 51.6%, #007c8a 54.8%, #00878b 58.1%, #009388 61.3%, #00a080 64.5%, #22ac71 67.7%, #4bb464 71.0%, #60bc61 74.2%, #67c56c 77.4%, #65cf84 80.6%, #61d8a0 83.9%, #64e0bd 87.1%, #71e5d6 90.3%, #84e9e9 93.5%, #97ecf6 96.8%, #a4eefd 100.0%);
background: linear-gradient(30deg in oklch, oklch(78.35% 0.1116 246.09) 0.0%, oklch(73.90% 0.1081 235.03) 3.2%, oklch(67.43% 0.1029 218.64) 6.5%, oklch(59.69% 0.0968 199.04) 9.7%, oklch(51.45% 0.0902 178.33) 12.9%, oklch(43.48% 0.0838 158.61) 16.1%, oklch(36.53% 0.0781 141.99) 19.4%, oklch(31.37% 0.0737 130.57) 22.6%, oklch(28.73% 0.0712 126.46) 25.8%, oklch(28.41% 0.0697 130.81) 29.0%, oklch(29.80% 0.0689 141.74) 32.3%, oklch(32.49% 0.0689 156.91) 35.5%, oklch(36.06% 0.0686 173.93) 38.7%, oklch(40.07% 0.0691 190.53) 41.9%, oklch(44.08% 0.0746 204.26) 45.2%, oklch(47.69% 0.0788 212.80) 48.4%, oklch(50.63% 0.0846 214.03) 51.6%, oklch(53.59% 0.0923 208.57) 54.8%, oklch(56.66% 0.0963 198.37) 58.1%, oklch(59.78% 0.1051 185.38) 61.3%, oklch(62.90% 0.1226 171.51) 64.5%, oklch(65.98% 0.1435 158.69) 67.7%, oklch(68.95% 0.1518 148.82) 71.0%, oklch(71.77% 0.1556 143.85) 74.2%, oklch(74.47% 0.1537 145.02) 77.4%, oklch(77.23% 0.1465 151.02) 80.6%, oklch(79.98% 0.1355 160.45) 83.9%, oklch(82.63% 0.1222 171.99) 87.1%, oklch(85.09% 0.1080 184.28) 90.3%, oklch(87.29% 0.0945 195.98) 93.5%, oklch(89.14% 0.0833 205.76) 96.8%, oklch(90.55% 0.0758 212.28) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.783 | 0.112 | 246.1 |
| 2 | 0.291 | 0.072 | 126.7 |
| 3 | 0.492 | 0.081 | 214.4 |
| 4 | 0.724 | 0.156 | 143.6 |
| 5 | 0.906 | 0.076 | 212.3 |

## In these collections

- [Blue and green gradients](https://grabient.com/blue-and-green-gradients)

## Other forms

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