# Cyan Green Teal Quiet Field

This diagonal gradient moves through pale cyan, teal, deep yellow, deep green, deep cyan, and vivid teal. 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, navy and teal linear gradient
- Seed: `kU0j6trR2xaUZTpuuTdg`
- Page: https://grabient.com/kU0j6trR2xaUZTpuuTdg?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: dark center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.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 | `#96cdfa` | `oklch(82.68% 0.0854 243.98)` | Long Island Sound | black, 12.4 to 1 |
| 2 | `#86c6ed` | `oklch(79.80% 0.0852 235.92)` | Fish Pond | black, 11.3 to 1 |
| 3 | `#71bdd9` | `oklch(75.89% 0.0850 224.25)` | Bluebrite | black, 9.9 to 1 |
| 4 | `#5cb1bf` | `oklch(71.19% 0.0848 209.99)` | Finnish Fiord | black, 8.4 to 1 |
| 5 | `#4aa2a1` | `oklch(65.94% 0.0845 194.14)` | Aqua Fresco | black, 6.9 to 1 |
| 6 | `#409281` | `oklch(60.39% 0.0842 177.69)` | Highlands | black, 5.6 to 1 |
| 7 | `#3e8061` | `oklch(54.76% 0.0838 161.66)` | Leisure Green | white, 4.6 to 1 |
| 8 | `#3f6e45` | `oklch(49.31% 0.0834 147.04)` | Jungle Adventure | white, 5.9 to 1 |
| 9 | `#3f5d2c` | `oklch(44.26% 0.0829 134.84)` | Obscure Olive | white, 7.4 to 1 |
| 10 | `#3c4f18` | `oklch(39.87% 0.0823 126.06)` | Godzilla | white, 9 to 1 |
| 11 | `#374408` | `oklch(36.36% 0.0816 121.70)` | Garden Shadow | white, 10.4 to 1 |
| 12 | `#303d02` | `oklch(33.75% 0.0805 122.81)` | Dark Olive | white, 11.6 to 1 |
| 13 | `#243905` | `oklch(31.39% 0.0787 129.51)` | Melancholia | white, 12.6 to 1 |
| 14 | `#13350d` | `oklch(29.31% 0.0762 140.65)` | Dark Serpent | white, 13.6 to 1 |
| 15 | `#003118` | `oklch(27.58% 0.0683 154.93)` | Nightly Woods | white, 14.4 to 1 |
| 16 | `#002c21` | `oklch(26.23% 0.0512 171.36)` | Bush | white, 15.1 to 1 |
| 17 | `#002927` | `oklch(25.34% 0.0440 188.69)` | Deep Slate Green | white, 15.5 to 1 |
| 18 | `#00272b` | `oklch(24.98% 0.0427 205.69)` | Daintree | white, 15.8 to 1 |
| 19 | `#002732` | `oklch(25.20% 0.0462 221.09)` | Daintree | white, 15.7 to 1 |
| 20 | `#00283a` | `oklch(26.08% 0.0543 233.68)` | Murky Depths | white, 15.3 to 1 |
| 21 | `#002b45` | `oklch(27.66% 0.0660 242.25)` | Royal Blue Metallic | white, 14.6 to 1 |
| 22 | `#06304f` | `oklch(30.06% 0.0703 245.64)` | Beyond the Stars | white, 13.5 to 1 |
| 23 | `#0b3b5c` | `oklch(33.88% 0.0760 244.82)` | Poseidon | white, 11.7 to 1 |
| 24 | `#0c4a6d` | `oklch(39.00% 0.0837 240.63)` | Tanzanite Blue | white, 9.5 to 1 |
| 25 | `#035d81` | `oklch(45.09% 0.0930 233.80)` | Royal Blood | white, 7.2 to 1 |
| 26 | `#007393` | `oklch(51.83% 0.0983 225.08)` | Enchanted Blue | white, 5.3 to 1 |
| 27 | `#008ca3` | `oklch(58.86% 0.1041 215.14)` | Parrot Flight | black, 5.2 to 1 |
| 28 | `#00a5b2` | `oklch(65.87% 0.1124 204.76)` | Garish Blue | black, 7 to 1 |
| 29 | `#00bebe` | `oklch(72.52% 0.1238 194.64)` | Maximum Blue Green | black, 9 to 1 |
| 30 | `#00d5c5` | `oklch(78.48% 0.1380 185.52)` | Turquoise Panic | black, 11.3 to 1 |
| 31 | `#13e8c9` | `oklch(83.42% 0.1516 178.13)` | Fake Jade | black, 13.4 to 1 |
| 32 | `#36f5cb` | `oklch(87.01% 0.1571 173.18)` | Bright Teal | black, 15 to 1 |

## CSS

```css
background: linear-gradient(225deg, #96cdfa 0.0%, #86c6ed 3.2%, #71bdd9 6.5%, #5cb1bf 9.7%, #4aa2a1 12.9%, #409281 16.1%, #3e8061 19.4%, #3f6e45 22.6%, #3f5d2c 25.8%, #3c4f18 29.0%, #374408 32.3%, #303d02 35.5%, #243905 38.7%, #13350d 41.9%, #003118 45.2%, #002c21 48.4%, #002927 51.6%, #00272b 54.8%, #002732 58.1%, #00283a 61.3%, #002b45 64.5%, #06304f 67.7%, #0b3b5c 71.0%, #0c4a6d 74.2%, #035d81 77.4%, #007393 80.6%, #008ca3 83.9%, #00a5b2 87.1%, #00bebe 90.3%, #00d5c5 93.5%, #13e8c9 96.8%, #36f5cb 100.0%);
background: linear-gradient(225deg in oklch, oklch(82.68% 0.0854 243.98) 0.0%, oklch(79.80% 0.0852 235.92) 3.2%, oklch(75.89% 0.0850 224.25) 6.5%, oklch(71.19% 0.0848 209.99) 9.7%, oklch(65.94% 0.0845 194.14) 12.9%, oklch(60.39% 0.0842 177.69) 16.1%, oklch(54.76% 0.0838 161.66) 19.4%, oklch(49.31% 0.0834 147.04) 22.6%, oklch(44.26% 0.0829 134.84) 25.8%, oklch(39.87% 0.0823 126.06) 29.0%, oklch(36.36% 0.0816 121.70) 32.3%, oklch(33.75% 0.0805 122.81) 35.5%, oklch(31.39% 0.0787 129.51) 38.7%, oklch(29.31% 0.0762 140.65) 41.9%, oklch(27.58% 0.0683 154.93) 45.2%, oklch(26.23% 0.0512 171.36) 48.4%, oklch(25.34% 0.0440 188.69) 51.6%, oklch(24.98% 0.0427 205.69) 54.8%, oklch(25.20% 0.0462 221.09) 58.1%, oklch(26.08% 0.0543 233.68) 61.3%, oklch(27.66% 0.0660 242.25) 64.5%, oklch(30.06% 0.0703 245.64) 67.7%, oklch(33.88% 0.0760 244.82) 71.0%, oklch(39.00% 0.0837 240.63) 74.2%, oklch(45.09% 0.0930 233.80) 77.4%, oklch(51.83% 0.0983 225.08) 80.6%, oklch(58.86% 0.1041 215.14) 83.9%, oklch(65.87% 0.1124 204.76) 87.1%, oklch(72.52% 0.1238 194.64) 90.3%, oklch(78.48% 0.1380 185.52) 93.5%, oklch(83.42% 0.1516 178.13) 96.8%, oklch(87.01% 0.1571 173.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.827 | 0.085 | 244 |
| 2 | 0.354 | 0.081 | 121.4 |
| 3 | 0.291 | 0.069 | 245 |
| 4 | 0.87 | 0.157 | 173.2 |

## In these collections

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

## Other forms

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