# Teal cobalt aqua diagonal

Beige, blue, teal and navy linear gradient with 48 colors: #fcffb1, #eaf7ac, #d2eba6, #b5dca1, #97ca9b, #79b694, #5ea28d, #478d84, #367a7b, #296971, #205c69, #1a5363, #164f60, #125161, #0e5766, #0a606b, #0b6d71, #167c77, #288c7b, #3d9b7d, #54a97e, #68b67e, #78c07f, #80c780, #7fcb84, #75ce8c, #63d097, #47d0a4, #18cdb4, #00c6c2, #00becd, #00b4d7, #00aae0, #309de1, #4591dd, #4f86d6, #527ccc, #5072bf, #4b67b0, #435c9f, #3a518e, #30467c, #273c6b, #1e325b, #16294d, #0f2241, #0a1b37, #07172f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Beige, blue, teal and navy linear gradient
- Seed: `kW-UdOMxdNOItNtOMM1mhO_4`
- Page: https://grabient.com/kW-UdOMxdNOItNtOMM1mhO_4?steps=48&angle=135
- Drawn as: linear gradient, 48 steps, 135 degrees
- Kinds: cool
- Hues: wide
- Contrast of its darkest and lightest colors: 17.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 | `#fcffb1` | `oklch(98.03% 0.0977 109.68)` | VIC 20 Creme | black, 20 to 1 |
| 2 | `#eaf7ac` | `oklch(94.85% 0.0958 115.86)` | Australian Mint | black, 18.3 to 1 |
| 3 | `#d2eba6` | `oklch(90.43% 0.0928 124.46)` | Faith | black, 16.1 to 1 |
| 4 | `#b5dca1` | `oklch(85.05% 0.0892 134.95)` | Green Gooseberry | black, 13.6 to 1 |
| 5 | `#97ca9b` | `oklch(78.99% 0.0850 146.76)` | Kettle Drum | black, 11.2 to 1 |
| 6 | `#79b694` | `oklch(72.53% 0.0806 159.33)` | Mountain Lake Green | black, 8.9 to 1 |
| 7 | `#5ea28d` | `oklch(65.96% 0.0763 172.11)` | Polished Pine | black, 6.9 to 1 |
| 8 | `#478d84` | `oklch(59.56% 0.0722 184.54)` | Royal Palm | black, 5.4 to 1 |
| 9 | `#367a7b` | `oklch(53.62% 0.0685 196.06)` | Grand Canal | white, 4.9 to 1 |
| 10 | `#296971` | `oklch(48.40% 0.0656 206.12)` | Persian Mosaic | white, 6.2 to 1 |
| 11 | `#205c69` | `oklch(44.21% 0.0637 214.17)` | Legion Blue | white, 7.5 to 1 |
| 12 | `#1a5363` | `oklch(41.31% 0.0630 219.63)` | Genetic Code | white, 8.5 to 1 |
| 13 | `#164f60` | `oklch(39.99% 0.0637 221.95)` | Genetic Code | white, 9 to 1 |
| 14 | `#125161` | `oklch(40.33% 0.0661 220.56)` | Genetic Code | white, 8.8 to 1 |
| 15 | `#0e5766` | `oklch(42.09% 0.0698 215.93)` | Abyssal Waters | white, 8.2 to 1 |
| 16 | `#0a606b` | `oklch(44.99% 0.0747 208.76)` | Petrol | white, 7.2 to 1 |
| 17 | `#0b6d71` | `oklch(48.75% 0.0804 199.75)` | Teal Motif | white, 6 to 1 |
| 18 | `#167c77` | `oklch(53.12% 0.0868 189.61)` | Navajo Turquoise | white, 5 to 1 |
| 19 | `#288c7b` | `oklch(57.81% 0.0935 179.03)` | Porcelain Green | black, 5.1 to 1 |
| 20 | `#3d9b7d` | `oklch(62.54% 0.1002 168.72)` | Greenway | black, 6.1 to 1 |
| 21 | `#54a97e` | `oklch(67.06% 0.1067 159.39)` | Julep | black, 7.3 to 1 |
| 22 | `#68b67e` | `oklch(71.08% 0.1128 151.73)` | Appleton | black, 8.5 to 1 |
| 23 | `#78c07f` | `oklch(74.33% 0.1181 146.46)` | Rally Green | black, 9.6 to 1 |
| 24 | `#80c780` | `oklch(76.54% 0.1223 144.28)` | Exhilarating Green | black, 10.4 to 1 |
| 25 | `#7fcb84` | `oklch(77.55% 0.1255 145.79)` | Serengeti Green | black, 10.8 to 1 |
| 26 | `#75ce8c` | `oklch(77.90% 0.1284 150.65)` | Serengeti Green | black, 10.9 to 1 |
| 27 | `#63d097` | `oklch(77.74% 0.1310 158.27)` | Van Gogh Green | black, 10.9 to 1 |
| 28 | `#47d0a4` | `oklch(77.13% 0.1334 168.07)` | Mint Jelly | black, 10.7 to 1 |
| 29 | `#18cdb4` | `oklch(76.12% 0.1355 179.49)` | Mint Leaf | black, 10.4 to 1 |
| 30 | `#00c6c2` | `oklch(74.76% 0.1284 191.97)` | Swimmers Pool | black, 9.8 to 1 |
| 31 | `#00becd` | `oklch(73.09% 0.1248 204.94)` | Panorama Blue | black, 9.2 to 1 |
| 32 | `#00b4d7` | `oklch(71.17% 0.1278 217.84)` | Ocean Sigh | black, 8.5 to 1 |
| 33 | `#00aae0` | `oklch(69.06% 0.1378 230.10)` | Blue Fire | black, 7.8 to 1 |
| 34 | `#309de1` | `oklch(66.79% 0.1382 241.14)` | Flax Flower Blue | black, 7 to 1 |
| 35 | `#4591dd` | `oklch(64.43% 0.1367 250.43)` | Oregon Blue | black, 6.3 to 1 |
| 36 | `#4f86d6` | `oklch(62.02% 0.1344 257.38)` | Blue Jay | black, 5.7 to 1 |
| 37 | `#527ccc` | `oklch(59.43% 0.1309 261.88)` | Serenity’s Reign | black, 5.1 to 1 |
| 38 | `#5072bf` | `oklch(56.29% 0.1258 264.85)` | Diva Violet | white, 4.6 to 1 |
| 39 | `#4b67b0` | `oklch(52.71% 0.1194 266.53)` | Azraq Blue | white, 5.4 to 1 |
| 40 | `#435c9f` | `oklch(48.79% 0.1120 267.13)` | Blue Dahlia | white, 6.4 to 1 |
| 41 | `#3a518e` | `oklch(44.68% 0.1039 266.88)` | Chinese Blue | white, 7.6 to 1 |
| 42 | `#30467c` | `oklch(40.48% 0.0954 265.97)` | Indigo Night | white, 9.1 to 1 |
| 43 | `#273c6b` | `oklch(36.33% 0.0868 264.63)` | Limoges | white, 10.8 to 1 |
| 44 | `#1e325b` | `oklch(32.34% 0.0785 263.05)` | Ending Navy Blue | white, 12.6 to 1 |
| 45 | `#16294d` | `oklch(28.64% 0.0707 261.46)` | Rurikon Blue | white, 14.3 to 1 |
| 46 | `#0f2241` | `oklch(25.35% 0.0637 260.06)` | Dark Eclipse | white, 15.9 to 1 |
| 47 | `#0a1b37` | `oklch(22.58% 0.0580 259.07)` | Naval Night | white, 17.1 to 1 |
| 48 | `#07172f` | `oklch(20.47% 0.0537 258.69)` | Liberty Blue | white, 17.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #fcffb1 0.0%, #eaf7ac 2.1%, #d2eba6 4.3%, #b5dca1 6.4%, #97ca9b 8.5%, #79b694 10.6%, #5ea28d 12.8%, #478d84 14.9%, #367a7b 17.0%, #296971 19.1%, #205c69 21.3%, #1a5363 23.4%, #164f60 25.5%, #125161 27.7%, #0e5766 29.8%, #0a606b 31.9%, #0b6d71 34.0%, #167c77 36.2%, #288c7b 38.3%, #3d9b7d 40.4%, #54a97e 42.6%, #68b67e 44.7%, #78c07f 46.8%, #80c780 48.9%, #7fcb84 51.1%, #75ce8c 53.2%, #63d097 55.3%, #47d0a4 57.4%, #18cdb4 59.6%, #00c6c2 61.7%, #00becd 63.8%, #00b4d7 66.0%, #00aae0 68.1%, #309de1 70.2%, #4591dd 72.3%, #4f86d6 74.5%, #527ccc 76.6%, #5072bf 78.7%, #4b67b0 80.9%, #435c9f 83.0%, #3a518e 85.1%, #30467c 87.2%, #273c6b 89.4%, #1e325b 91.5%, #16294d 93.6%, #0f2241 95.7%, #0a1b37 97.9%, #07172f 100.0%);
background: linear-gradient(135deg in oklch, oklch(98.03% 0.0977 109.68) 0.0%, oklch(94.85% 0.0958 115.86) 2.1%, oklch(90.43% 0.0928 124.46) 4.3%, oklch(85.05% 0.0892 134.95) 6.4%, oklch(78.99% 0.0850 146.76) 8.5%, oklch(72.53% 0.0806 159.33) 10.6%, oklch(65.96% 0.0763 172.11) 12.8%, oklch(59.56% 0.0722 184.54) 14.9%, oklch(53.62% 0.0685 196.06) 17.0%, oklch(48.40% 0.0656 206.12) 19.1%, oklch(44.21% 0.0637 214.17) 21.3%, oklch(41.31% 0.0630 219.63) 23.4%, oklch(39.99% 0.0637 221.95) 25.5%, oklch(40.33% 0.0661 220.56) 27.7%, oklch(42.09% 0.0698 215.93) 29.8%, oklch(44.99% 0.0747 208.76) 31.9%, oklch(48.75% 0.0804 199.75) 34.0%, oklch(53.12% 0.0868 189.61) 36.2%, oklch(57.81% 0.0935 179.03) 38.3%, oklch(62.54% 0.1002 168.72) 40.4%, oklch(67.06% 0.1067 159.39) 42.6%, oklch(71.08% 0.1128 151.73) 44.7%, oklch(74.33% 0.1181 146.46) 46.8%, oklch(76.54% 0.1223 144.28) 48.9%, oklch(77.55% 0.1255 145.79) 51.1%, oklch(77.90% 0.1284 150.65) 53.2%, oklch(77.74% 0.1310 158.27) 55.3%, oklch(77.13% 0.1334 168.07) 57.4%, oklch(76.12% 0.1355 179.49) 59.6%, oklch(74.76% 0.1284 191.97) 61.7%, oklch(73.09% 0.1248 204.94) 63.8%, oklch(71.17% 0.1278 217.84) 66.0%, oklch(69.06% 0.1378 230.10) 68.1%, oklch(66.79% 0.1382 241.14) 70.2%, oklch(64.43% 0.1367 250.43) 72.3%, oklch(62.02% 0.1344 257.38) 74.5%, oklch(59.43% 0.1309 261.88) 76.6%, oklch(56.29% 0.1258 264.85) 78.7%, oklch(52.71% 0.1194 266.53) 80.9%, oklch(48.79% 0.1120 267.13) 83.0%, oklch(44.68% 0.1039 266.88) 85.1%, oklch(40.48% 0.0954 265.97) 87.2%, oklch(36.33% 0.0868 264.63) 89.4%, oklch(32.34% 0.0785 263.05) 91.5%, oklch(28.64% 0.0707 261.46) 93.6%, oklch(25.35% 0.0637 260.06) 95.7%, oklch(22.58% 0.0580 259.07) 97.9%, oklch(20.47% 0.0537 258.69) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.098 | 109.7 |
| 2 | 0.402 | 0.063 | 221.7 |
| 3 | 0.772 | 0.124 | 144.6 |
| 4 | 0.614 | 0.134 | 258.7 |
| 5 | 0.205 | 0.054 | 258.7 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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