# Dark green, teal, light blue and pink linear gradient

Dark green, teal, light blue and pink linear gradient with 32 colors: #103a2a, #0f3e2f, #0f4337, #0e4a40, #0f504a, #105753, #125f5e, #15686a, #197076, #1d7882, #22818c, #278997, #2c91a1, #3299aa, #3aa0b4, #41a6bd, #4aadc5, #53b2cc, #5fb6d0, #6abad0, #76bccd, #83bdcc, #8fbdcf, #9ebad2, #b0b7cf, #bcb5c6, #c4b4c0, #ccb2bb, #dbacb4, #eda4a8, #fc9c99, #ff9c92. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcUCh1MxfCkKdwhRIsDXKJA2ITwLkCk5ZLFEg`
- Page: https://grabient.com/kcUCh1MxfCkKdwhRIsDXKJA2ITwLkCk5ZLFEg?steps=32&angle=180
- Drawn as: linear gradient, 32 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 | `#0f3e2f` | `oklch(32.80% 0.0565 168.12)` | Mizukaze Green | white, 11.9 to 1 |
| 3 | `#0f4337` | `oklch(34.62% 0.0584 173.28)` | MSU Green | white, 11.1 to 1 |
| 4 | `#0e4a40` | `oklch(36.80% 0.0608 179.10)` | Country Squire | white, 10.1 to 1 |
| 5 | `#0f504a` | `oklch(39.14% 0.0635 184.65)` | Stockade Green | white, 9.2 to 1 |
| 6 | `#105753` | `oklch(41.56% 0.0666 189.32)` | Baltic Prince | white, 8.3 to 1 |
| 7 | `#125f5e` | `oklch(44.26% 0.0702 193.84)` | Emerald Pool | white, 7.4 to 1 |
| 8 | `#15686a` | `oklch(47.12% 0.0742 198.12)` | Bath Green | white, 6.5 to 1 |
| 9 | `#197076` | `oklch(50.00% 0.0782 201.94)` | Marine Wonder | white, 5.7 to 1 |
| 10 | `#1d7882` | `oklch(52.74% 0.0818 205.09)` | Blue Kelp | white, 5.1 to 1 |
| 11 | `#22818c` | `oklch(55.42% 0.0854 207.35)` | Riviera Sea | white, 4.5 to 1 |
| 12 | `#278997` | `oklch(58.08% 0.0891 208.95)` | Precious Stone | black, 5.1 to 1 |
| 13 | `#2c91a1` | `oklch(60.66% 0.0923 210.25)` | Scooter | black, 5.6 to 1 |
| 14 | `#3299aa` | `oklch(63.11% 0.0946 211.63)` | Aqua Dance | black, 6.2 to 1 |
| 15 | `#3aa0b4` | `oklch(65.43% 0.0961 213.29)` | Aquatic Cool | black, 6.8 to 1 |
| 16 | `#41a6bd` | `oklch(67.67% 0.0974 215.00)` | Moonstone | black, 7.4 to 1 |
| 17 | `#4aadc5` | `oklch(69.78% 0.0977 216.70)` | Dragonfly Blue | black, 8 to 1 |
| 18 | `#53b2cc` | `oklch(71.67% 0.0963 218.35)` | Blue Bobbin | black, 8.6 to 1 |
| 19 | `#5fb6d0` | `oklch(73.25% 0.0922 219.70)` | Fitness Blue | black, 9.1 to 1 |
| 20 | `#6abad0` | `oklch(74.52% 0.0845 217.96)` | Revelry Blue | black, 9.5 to 1 |
| 21 | `#76bccd` | `oklch(75.53% 0.0745 215.40)` | Azure Lake | black, 9.8 to 1 |
| 22 | `#83bdcc` | `oklch(76.36% 0.0640 216.03)` | Aftercare | black, 10.1 to 1 |
| 23 | `#8fbdcf` | `oklch(77.07% 0.0548 223.88)` | Reef Blue | black, 10.3 to 1 |
| 24 | `#9ebad2` | `oklch(77.66% 0.0458 243.34)` | Novella Blue | black, 10.4 to 1 |
| 25 | `#b0b7cf` | `oklch(78.08% 0.0350 272.85)` | Hundred Waters | black, 10.4 to 1 |
| 26 | `#bcb5c6` | `oklch(78.38% 0.0264 305.64)` | Perplexed | black, 10.5 to 1 |
| 27 | `#c4b4c0` | `oklch(78.61% 0.0243 334.87)` | Pink Bravado | black, 10.6 to 1 |
| 28 | `#ccb2bb` | `oklch(78.83% 0.0331 354.55)` | Candlelight Dinner | black, 10.6 to 1 |
| 29 | `#dbacb4` | `oklch(78.97% 0.0561 7.44)` | Pale Chestnut | black, 10.5 to 1 |
| 30 | `#eda4a8` | `oklch(79.05% 0.0863 16.06)` | Pink Icing | black, 10.4 to 1 |
| 31 | `#fc9c99` | `oklch(79.09% 0.1154 21.89)` | Rubber Radish | black, 10.3 to 1 |
| 32 | `#ff9c92` | `oklch(79.13% 0.1204 26.45)` | Peach Amber | black, 10.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #103a2a 0.0%, #0f3e2f 3.2%, #0f4337 6.5%, #0e4a40 9.7%, #0f504a 12.9%, #105753 16.1%, #125f5e 19.4%, #15686a 22.6%, #197076 25.8%, #1d7882 29.0%, #22818c 32.3%, #278997 35.5%, #2c91a1 38.7%, #3299aa 41.9%, #3aa0b4 45.2%, #41a6bd 48.4%, #4aadc5 51.6%, #53b2cc 54.8%, #5fb6d0 58.1%, #6abad0 61.3%, #76bccd 64.5%, #83bdcc 67.7%, #8fbdcf 71.0%, #9ebad2 74.2%, #b0b7cf 77.4%, #bcb5c6 80.6%, #c4b4c0 83.9%, #ccb2bb 87.1%, #dbacb4 90.3%, #eda4a8 93.5%, #fc9c99 96.8%, #ff9c92 100.0%);
background: linear-gradient(180deg in oklch, oklch(31.50% 0.0551 164.53) 0.0%, oklch(32.80% 0.0565 168.12) 3.2%, oklch(34.62% 0.0584 173.28) 6.5%, oklch(36.80% 0.0608 179.10) 9.7%, oklch(39.14% 0.0635 184.65) 12.9%, oklch(41.56% 0.0666 189.32) 16.1%, oklch(44.26% 0.0702 193.84) 19.4%, oklch(47.12% 0.0742 198.12) 22.6%, oklch(50.00% 0.0782 201.94) 25.8%, oklch(52.74% 0.0818 205.09) 29.0%, oklch(55.42% 0.0854 207.35) 32.3%, oklch(58.08% 0.0891 208.95) 35.5%, oklch(60.66% 0.0923 210.25) 38.7%, oklch(63.11% 0.0946 211.63) 41.9%, oklch(65.43% 0.0961 213.29) 45.2%, oklch(67.67% 0.0974 215.00) 48.4%, oklch(69.78% 0.0977 216.70) 51.6%, oklch(71.67% 0.0963 218.35) 54.8%, oklch(73.25% 0.0922 219.70) 58.1%, oklch(74.52% 0.0845 217.96) 61.3%, oklch(75.53% 0.0745 215.40) 64.5%, oklch(76.36% 0.0640 216.03) 67.7%, oklch(77.07% 0.0548 223.88) 71.0%, oklch(77.66% 0.0458 243.34) 74.2%, oklch(78.08% 0.0350 272.85) 77.4%, oklch(78.38% 0.0264 305.64) 80.6%, oklch(78.61% 0.0243 334.87) 83.9%, oklch(78.83% 0.0331 354.55) 87.1%, oklch(78.97% 0.0561 7.44) 90.3%, oklch(79.05% 0.0863 16.06) 93.5%, oklch(79.09% 0.1154 21.89) 96.8%, 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

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

## Other forms

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