# Cool blue, teal, green and light blue linear gradient

Cool blue, teal, green and light blue linear gradient with 32 colors: #1f647e, #1c687f, #186e81, #167481, #167c81, #1c8381, #268a80, #2f917f, #38987f, #3e9e80, #43a581, #48ac83, #4cb386, #51ba88, #56c18b, #5cc78e, #64cc90, #6cd193, #74d697, #7dda9b, #85de9f, #8ce1a4, #93e4a8, #9ae6ad, #a0e7b3, #a6e8b8, #ade7be, #b3e6c4, #b9e4c9, #bfe3cd, #c4e1d0, #c8e1d2. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWeDmiTaM5mCvvftpz9cIxA4`
- Page: https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 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 | `#1c687f` | `oklch(48.34% 0.0799 223.23)` | Hanaasagi Blue | white, 6.2 to 1 |
| 3 | `#186e81` | `oklch(49.79% 0.0815 216.82)` | Billabong | white, 5.8 to 1 |
| 4 | `#167481` | `oklch(51.52% 0.0834 209.17)` | Night Scape | white, 5.4 to 1 |
| 5 | `#167c81` | `oklch(53.45% 0.0856 200.87)` | Macquarie | white, 4.9 to 1 |
| 6 | `#1c8381` | `oklch(55.49% 0.0882 192.50)` | Bayou | black, 4.6 to 1 |
| 7 | `#268a80` | `oklch(57.56% 0.0909 184.65)` | Porcelain Green | black, 5 to 1 |
| 8 | `#2f917f` | `oklch(59.59% 0.0940 177.90)` | Miami Jade | black, 5.4 to 1 |
| 9 | `#38987f` | `oklch(61.49% 0.0973 172.81)` | Green Jelly | black, 5.9 to 1 |
| 10 | `#3e9e80` | `oklch(63.42% 0.1017 168.97)` | Gossamer | black, 6.4 to 1 |
| 11 | `#43a581` | `oklch(65.42% 0.1070 165.96)` | Funk | black, 6.9 to 1 |
| 12 | `#48ac83` | `oklch(67.46% 0.1127 163.62)` | Julep | black, 7.5 to 1 |
| 13 | `#4cb386` | `oklch(69.48% 0.1184 161.79)` | Mint | black, 8.1 to 1 |
| 14 | `#51ba88` | `oklch(71.47% 0.1235 160.30)` | Bleached Olive | black, 8.7 to 1 |
| 15 | `#56c18b` | `oklch(73.37% 0.1276 158.99)` | Garish Green | black, 9.4 to 1 |
| 16 | `#5cc78e` | `oklch(75.15% 0.1303 157.70)` | Enamelled Dragon | black, 10 to 1 |
| 17 | `#64cc90` | `oklch(76.79% 0.1311 156.31)` | Van Gogh Green | black, 10.6 to 1 |
| 18 | `#6cd193` | `oklch(78.38% 0.1308 155.05)` | Van Gogh Green | black, 11.2 to 1 |
| 19 | `#74d697` | `oklch(79.91% 0.1294 153.96)` | Enchanted Emerald | black, 11.7 to 1 |
| 20 | `#7dda9b` | `oklch(81.37% 0.1271 153.07)` | Enchanted Emerald | black, 12.3 to 1 |
| 21 | `#85de9f` | `oklch(82.73% 0.1239 152.38)` | Patrice | black, 12.9 to 1 |
| 22 | `#8ce1a4` | `oklch(83.97% 0.1197 151.91)` | Jovial Jade | black, 13.4 to 1 |
| 23 | `#93e4a8` | `oklch(85.07% 0.1148 151.67)` | Hospital Green | black, 13.8 to 1 |
| 24 | `#9ae6ad` | `oklch(86.01% 0.1090 151.68)` | Hospital Green | black, 14.2 to 1 |
| 25 | `#a0e7b3` | `oklch(86.77% 0.1020 152.04)` | Teal Deer | black, 14.6 to 1 |
| 26 | `#a6e8b8` | `oklch(87.33% 0.0927 152.87)` | Overtone | black, 14.8 to 1 |
| 27 | `#ade7be` | `oklch(87.74% 0.0818 154.06)` | Glaucous Green | black, 14.9 to 1 |
| 28 | `#b3e6c4` | `oklch(88.01% 0.0703 155.44)` | Glaucous Green | black, 15 to 1 |
| 29 | `#b9e4c9` | `oklch(88.20% 0.0588 156.89)` | Spearmints | black, 15 to 1 |
| 30 | `#bfe3cd` | `oklch(88.34% 0.0482 158.26)` | Spearmints | black, 15 to 1 |
| 31 | `#c4e1d0` | `oklch(88.45% 0.0394 159.40)` | Icy Mint | black, 15 to 1 |
| 32 | `#c8e1d2` | `oklch(88.58% 0.0331 160.18)` | Icy Mint | black, 15 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1f647e 0.0%, #1c687f 3.2%, #186e81 6.5%, #167481 9.7%, #167c81 12.9%, #1c8381 16.1%, #268a80 19.4%, #2f917f 22.6%, #38987f 25.8%, #3e9e80 29.0%, #43a581 32.3%, #48ac83 35.5%, #4cb386 38.7%, #51ba88 41.9%, #56c18b 45.2%, #5cc78e 48.4%, #64cc90 51.6%, #6cd193 54.8%, #74d697 58.1%, #7dda9b 61.3%, #85de9f 64.5%, #8ce1a4 67.7%, #93e4a8 71.0%, #9ae6ad 74.2%, #a0e7b3 77.4%, #a6e8b8 80.6%, #ade7be 83.9%, #b3e6c4 87.1%, #b9e4c9 90.3%, #bfe3cd 93.5%, #c4e1d0 96.8%, #c8e1d2 100.0%);
background: linear-gradient(135deg in oklch, oklch(47.24% 0.0785 227.81) 0.0%, oklch(48.34% 0.0799 223.23) 3.2%, oklch(49.79% 0.0815 216.82) 6.5%, oklch(51.52% 0.0834 209.17) 9.7%, oklch(53.45% 0.0856 200.87) 12.9%, oklch(55.49% 0.0882 192.50) 16.1%, oklch(57.56% 0.0909 184.65) 19.4%, oklch(59.59% 0.0940 177.90) 22.6%, oklch(61.49% 0.0973 172.81) 25.8%, oklch(63.42% 0.1017 168.97) 29.0%, oklch(65.42% 0.1070 165.96) 32.3%, oklch(67.46% 0.1127 163.62) 35.5%, oklch(69.48% 0.1184 161.79) 38.7%, oklch(71.47% 0.1235 160.30) 41.9%, oklch(73.37% 0.1276 158.99) 45.2%, oklch(75.15% 0.1303 157.70) 48.4%, oklch(76.79% 0.1311 156.31) 51.6%, oklch(78.38% 0.1308 155.05) 54.8%, oklch(79.91% 0.1294 153.96) 58.1%, oklch(81.37% 0.1271 153.07) 61.3%, oklch(82.73% 0.1239 152.38) 64.5%, oklch(83.97% 0.1197 151.91) 67.7%, oklch(85.07% 0.1148 151.67) 71.0%, oklch(86.01% 0.1090 151.68) 74.2%, oklch(86.77% 0.1020 152.04) 77.4%, oklch(87.33% 0.0927 152.87) 80.6%, oklch(87.74% 0.0818 154.06) 83.9%, oklch(88.01% 0.0703 155.44) 87.1%, oklch(88.20% 0.0588 156.89) 90.3%, oklch(88.34% 0.0482 158.26) 93.5%, oklch(88.45% 0.0394 159.40) 96.8%, 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=32&angle=135)
- [PNG](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.png?steps=32&angle=135)
- [SVG](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.svg?steps=32&angle=135)
- [CSS](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.css?steps=32&angle=135)
- [ASE](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.ase?steps=32&angle=135)
- [GPL](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.gpl?steps=32&angle=135)
- [GRD](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.grd?steps=32&angle=135)
- [Design tokens](https://grabient.com/kWeDmiTaM5mCvvftpz9cIxA4.tokens.json?steps=32&angle=135)
- [Social card](https://grabient.com/api/og?seed=kWeDmiTaM5mCvvftpz9cIxA4&steps=32&angle=135)
- [Palettes like this one](https://grabient.com/palettes?q=kWeDmiTaM5mCvvftpz9cIxA4)
- [Guide for agents](https://grabient.com/llms.txt)