# Teal black gradient

Light blue, cyan, black and teal linear gradient with 48 colors: #8dd1dc, #8cd4df, #8cd9e4, #8bdfea, #8be6f0, #8aeef7, #89f5fd, #94f9ff, #a2fbff, #a7fcff, #a1fdff, #8bfcff, #6df7fc, #65eaf0, #5cd8e0, #53c3cc, #49abb6, #3f939e, #347b86, #2a646f, #204f5a, #163e48, #0c303a, #032631, #00202c, #001d2a, #001b2a, #001c2e, #001e35, #00213f, #00254c, #00285c, #002a71, #00298a, #0124a4, #022aae, #0037aa, #0045a2, #00509d, #005b9b, #00659b, #006e9b, #00789c, #00819e, #00899f, #0090a0, #0096a1, #0c9aa1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Light blue, cyan, black and teal linear gradient
- Seed: `kW0DOU86u-p4QwywzERz6Y4Y`
- Page: https://grabient.com/kW0DOU86u-p4QwywzERz6Y4Y?steps=48&angle=135
- Drawn as: linear gradient, 48 steps, 135 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.1 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 | `#8dd1dc` | `oklch(81.89% 0.0703 208.83)` | Foaming Surf | black, 12.2 to 1 |
| 2 | `#8cd4df` | `oklch(82.59% 0.0731 208.18)` | Plunging Waterfall | black, 12.5 to 1 |
| 3 | `#8cd9e4` | `oklch(83.82% 0.0773 207.19)` | Tanager Turquoise | black, 13.1 to 1 |
| 4 | `#8bdfea` | `oklch(85.41% 0.0824 205.95)` | Photon Barrier | black, 13.8 to 1 |
| 5 | `#8be6f0` | `oklch(87.22% 0.0882 204.56)` | Aqua Fiesta | black, 14.7 to 1 |
| 6 | `#8aeef7` | `oklch(89.08% 0.0944 203.09)` | Shallow Water | black, 15.6 to 1 |
| 7 | `#89f5fd` | `oklch(90.83% 0.1005 201.65)` | Shallow Water | black, 16.5 to 1 |
| 8 | `#94f9ff` | `oklch(92.32% 0.0952 200.31)` | Eternal Winter | black, 17.2 to 1 |
| 9 | `#a2fbff` | `oklch(93.39% 0.0858 199.18)` | Eternal Winter | black, 17.8 to 1 |
| 10 | `#a7fcff` | `oklch(93.88% 0.0825 198.33)` | Affen Turquoise | black, 18 to 1 |
| 11 | `#a1fdff` | `oklch(93.63% 0.0878 197.87)` | Glitchy Shader Blue | black, 17.9 to 1 |
| 12 | `#8bfcff` | `oklch(92.49% 0.1038 197.88)` | Glitter Shower | black, 17.4 to 1 |
| 13 | `#6df7fc` | `oklch(90.27% 0.1195 198.46)` | Electric Blue | black, 16.3 to 1 |
| 14 | `#65eaf0` | `oklch(86.61% 0.1160 199.51)` | Poseidon Jr. | black, 14.5 to 1 |
| 15 | `#5cd8e0` | `oklch(81.62% 0.1099 200.98)` | Neon Nazar | black, 12.3 to 1 |
| 16 | `#53c3cc` | `oklch(75.59% 0.1017 202.81)` | Baharroth Blue | black, 10 to 1 |
| 17 | `#49abb6` | `oklch(68.80% 0.0922 204.95)` | Gone Fishing | black, 7.7 to 1 |
| 18 | `#3f939e` | `oklch(61.56% 0.0820 207.35)` | Asagi Blue | black, 5.8 to 1 |
| 19 | `#347b86` | `oklch(54.16% 0.0717 209.96)` | Panorama | white, 4.8 to 1 |
| 20 | `#2a646f` | `oklch(46.89% 0.0622 212.72)` | Pedigree | white, 6.6 to 1 |
| 21 | `#204f5a` | `oklch(40.04% 0.0540 215.59)` | Sunken Mystery | white, 9 to 1 |
| 22 | `#163e48` | `oklch(33.91% 0.0478 218.52)` | Sunken Harbour | white, 11.6 to 1 |
| 23 | `#0c303a` | `oklch(28.78% 0.0443 221.44)` | Artist Blue | white, 14 to 1 |
| 24 | `#032631` | `oklch(24.96% 0.0441 224.33)` | Daintree | white, 15.8 to 1 |
| 25 | `#00202c` | `oklch(22.65% 0.0439 227.48)` | Midnight Dreams | white, 16.9 to 1 |
| 26 | `#001d2a` | `oklch(21.45% 0.0433 231.10)` | Oxford by Night | white, 17.4 to 1 |
| 27 | `#001b2a` | `oklch(21.17% 0.0451 235.27)` | Oxford by Night | white, 17.5 to 1 |
| 28 | `#001c2e` | `oklch(21.66% 0.0494 239.77)` | Oxford by Night | white, 17.3 to 1 |
| 29 | `#001e35` | `oklch(22.80% 0.0567 244.39)` | Cyanophobia | white, 16.9 to 1 |
| 30 | `#00213f` | `oklch(24.46% 0.0674 248.97)` | Midnight Mirage | white, 16.2 to 1 |
| 31 | `#00254c` | `oklch(26.50% 0.0825 253.29)` | Oxford Blue | white, 15.3 to 1 |
| 32 | `#00285c` | `oklch(28.79% 0.1029 257.17)` | Blue Leviathan | white, 14.3 to 1 |
| 33 | `#002a71` | `oklch(31.19% 0.1300 260.39)` | Blue Jinn’s | white, 13.3 to 1 |
| 34 | `#00298a` | `oklch(33.58% 0.1652 262.75)` | Naval Adventures | white, 12.4 to 1 |
| 35 | `#0124a4` | `oklch(35.81% 0.2022 263.99)` | City Hunter Blue | white, 11.7 to 1 |
| 36 | `#022aae` | `oklch(37.76% 0.2086 264.00)` | International Blue | white, 10.8 to 1 |
| 37 | `#0037aa` | `oklch(39.52% 0.1900 262.49)` | Royal Azure | white, 9.8 to 1 |
| 38 | `#0045a2` | `oklch(41.53% 0.1629 259.25)` | Indian Peafowl | white, 8.8 to 1 |
| 39 | `#00509d` | `oklch(43.74% 0.1421 254.61)` | Freshwater Lake | white, 7.9 to 1 |
| 40 | `#005b9b` | `oklch(46.10% 0.1268 248.88)` | Parachuting | white, 7 to 1 |
| 41 | `#00659b` | `oklch(48.54% 0.1160 242.37)` | Impulse Blue | white, 6.3 to 1 |
| 42 | `#006e9b` | `oklch(51.00% 0.1088 235.37)` | Disarm | white, 5.6 to 1 |
| 43 | `#00789c` | `oklch(53.42% 0.1044 228.20)` | Sea Sight | white, 5 to 1 |
| 44 | `#00819e` | `oklch(55.72% 0.1023 221.16)` | Decore Splash | black, 4.6 to 1 |
| 45 | `#00899f` | `oklch(57.86% 0.1020 214.55)` | Teal Blue | black, 5 to 1 |
| 46 | `#0090a0` | `oklch(59.76% 0.1029 208.68)` | Coral Coast | black, 5.4 to 1 |
| 47 | `#0096a1` | `oklch(61.36% 0.1046 203.85)` | Tile Blue | black, 5.8 to 1 |
| 48 | `#0c9aa1` | `oklch(62.60% 0.1047 200.37)` | Island Dream | black, 6.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #8dd1dc 0.0%, #8cd4df 2.1%, #8cd9e4 4.3%, #8bdfea 6.4%, #8be6f0 8.5%, #8aeef7 10.6%, #89f5fd 12.8%, #94f9ff 14.9%, #a2fbff 17.0%, #a7fcff 19.1%, #a1fdff 21.3%, #8bfcff 23.4%, #6df7fc 25.5%, #65eaf0 27.7%, #5cd8e0 29.8%, #53c3cc 31.9%, #49abb6 34.0%, #3f939e 36.2%, #347b86 38.3%, #2a646f 40.4%, #204f5a 42.6%, #163e48 44.7%, #0c303a 46.8%, #032631 48.9%, #00202c 51.1%, #001d2a 53.2%, #001b2a 55.3%, #001c2e 57.4%, #001e35 59.6%, #00213f 61.7%, #00254c 63.8%, #00285c 66.0%, #002a71 68.1%, #00298a 70.2%, #0124a4 72.3%, #022aae 74.5%, #0037aa 76.6%, #0045a2 78.7%, #00509d 80.9%, #005b9b 83.0%, #00659b 85.1%, #006e9b 87.2%, #00789c 89.4%, #00819e 91.5%, #00899f 93.6%, #0090a0 95.7%, #0096a1 97.9%, #0c9aa1 100.0%);
background: linear-gradient(135deg in oklch, oklch(81.89% 0.0703 208.83) 0.0%, oklch(82.59% 0.0731 208.18) 2.1%, oklch(83.82% 0.0773 207.19) 4.3%, oklch(85.41% 0.0824 205.95) 6.4%, oklch(87.22% 0.0882 204.56) 8.5%, oklch(89.08% 0.0944 203.09) 10.6%, oklch(90.83% 0.1005 201.65) 12.8%, oklch(92.32% 0.0952 200.31) 14.9%, oklch(93.39% 0.0858 199.18) 17.0%, oklch(93.88% 0.0825 198.33) 19.1%, oklch(93.63% 0.0878 197.87) 21.3%, oklch(92.49% 0.1038 197.88) 23.4%, oklch(90.27% 0.1195 198.46) 25.5%, oklch(86.61% 0.1160 199.51) 27.7%, oklch(81.62% 0.1099 200.98) 29.8%, oklch(75.59% 0.1017 202.81) 31.9%, oklch(68.80% 0.0922 204.95) 34.0%, oklch(61.56% 0.0820 207.35) 36.2%, oklch(54.16% 0.0717 209.96) 38.3%, oklch(46.89% 0.0622 212.72) 40.4%, oklch(40.04% 0.0540 215.59) 42.6%, oklch(33.91% 0.0478 218.52) 44.7%, oklch(28.78% 0.0443 221.44) 46.8%, oklch(24.96% 0.0441 224.33) 48.9%, oklch(22.65% 0.0439 227.48) 51.1%, oklch(21.45% 0.0433 231.10) 53.2%, oklch(21.17% 0.0451 235.27) 55.3%, oklch(21.66% 0.0494 239.77) 57.4%, oklch(22.80% 0.0567 244.39) 59.6%, oklch(24.46% 0.0674 248.97) 61.7%, oklch(26.50% 0.0825 253.29) 63.8%, oklch(28.79% 0.1029 257.17) 66.0%, oklch(31.19% 0.1300 260.39) 68.1%, oklch(33.58% 0.1652 262.75) 70.2%, oklch(35.81% 0.2022 263.99) 72.3%, oklch(37.76% 0.2086 264.00) 74.5%, oklch(39.52% 0.1900 262.49) 76.6%, oklch(41.53% 0.1629 259.25) 78.7%, oklch(43.74% 0.1421 254.61) 80.9%, oklch(46.10% 0.1268 248.88) 83.0%, oklch(48.54% 0.1160 242.37) 85.1%, oklch(51.00% 0.1088 235.37) 87.2%, oklch(53.42% 0.1044 228.20) 89.4%, oklch(55.72% 0.1023 221.16) 91.5%, oklch(57.86% 0.1020 214.55) 93.6%, oklch(59.76% 0.1029 208.68) 95.7%, oklch(61.36% 0.1046 203.85) 97.9%, oklch(62.60% 0.1047 200.37) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.819 | 0.07 | 208.8 |
| 2 | 0.909 | 0.12 | 198.3 |
| 3 | 0.236 | 0.045 | 225.7 |
| 4 | 0.382 | 0.209 | 263.8 |
| 5 | 0.626 | 0.105 | 200.4 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)

## Other forms

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