# Teal and navy synthwave palette

The Teal and navy synthwave palette brings together teal, blue, and dark blue. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits album artwork and music event graphics. Its darkest tone is dark blue, and its lightest tone is teal.

- Also called: Cool light blue, blue and navy angular gradient
- Seed: `kSy0mKv8xFxwXxK`
- Page: https://grabient.com/kSy0mKv8xFxwXxK?style=angularGradient&steps=48&angle=30
- Drawn as: angular gradient, 48 steps, 30 degrees
- Kinds: light to dark, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 9.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 | `#64d2d1` | `oklch(79.92% 0.1006 194.77)` | Hidden Sea Glass | black, 11.6 to 1 |
| 2 | `#5ed0d1` | `oklch(79.23% 0.1033 195.92)` | Blue Radiance | black, 11.4 to 1 |
| 3 | `#55ced0` | `oklch(78.43% 0.1068 197.26)` | Blue Radiance | black, 11.1 to 1 |
| 4 | `#4bcbd0` | `oklch(77.54% 0.1110 198.76)` | Sea Serpent | black, 10.7 to 1 |
| 5 | `#3dc9d0` | `oklch(76.56% 0.1158 200.42)` | Sea Serpent | black, 10.4 to 1 |
| 6 | `#2ac6d0` | `oklch(75.49% 0.1211 202.23)` | Turquoise Surf | black, 10 to 1 |
| 7 | `#00c2d1` | `oklch(74.35% 0.1268 204.16)` | The Crowd Roars! | black, 9.6 to 1 |
| 8 | `#00becf` | `oklch(73.15% 0.1252 206.21)` | Holiday Blue | black, 9.2 to 1 |
| 9 | `#00b9cd` | `oklch(71.88% 0.1237 208.36)` | Utopia Beckons | black, 8.8 to 1 |
| 10 | `#00b4cb` | `oklch(70.56% 0.1223 210.60)` | Antigua Blue | black, 8.3 to 1 |
| 11 | `#00afc8` | `oklch(69.19% 0.1210 212.91)` | Havasupai Falls | black, 7.9 to 1 |
| 12 | `#00a9c6` | `oklch(67.78% 0.1199 215.29)` | Gummy Dolphins | black, 7.5 to 1 |
| 13 | `#00a4c3` | `oklch(66.35% 0.1190 217.71)` | Scuba Blue | black, 7.1 to 1 |
| 14 | `#009fc0` | `oklch(64.89% 0.1183 220.16)` | Delos Blue | black, 6.7 to 1 |
| 15 | `#0099be` | `oklch(63.41% 0.1178 222.63)` | Serene Blue | black, 6.3 to 1 |
| 16 | `#0094bb` | `oklch(61.93% 0.1174 225.11)` | Blue Danube | black, 5.9 to 1 |
| 17 | `#008eb8` | `oklch(60.44% 0.1174 227.58)` | Hawaiian Ocean | black, 5.5 to 1 |
| 18 | `#0089b5` | `oklch(58.96% 0.1175 230.02)` | Stomy Shower | black, 5.2 to 1 |
| 19 | `#0084b2` | `oklch(57.50% 0.1179 232.44)` | Lucario Blue | black, 4.9 to 1 |
| 20 | `#007eb0` | `oklch(56.05% 0.1186 234.80)` | Capstan | black, 4.6 to 1 |
| 21 | `#0079ad` | `oklch(54.64% 0.1195 237.10)` | Sixties Blue | white, 4.8 to 1 |
| 22 | `#0074aa` | `oklch(53.25% 0.1206 239.32)` | Methyl Blue | white, 5.1 to 1 |
| 23 | `#006fa8` | `oklch(51.92% 0.1220 241.46)` | Bowen Blue | white, 5.4 to 1 |
| 24 | `#006ba6` | `oklch(50.63% 0.1236 243.49)` | Indigo Bunting | white, 5.7 to 1 |
| 25 | `#0066a3` | `oklch(49.38% 0.1254 245.42)` | LED Blue | white, 6.1 to 1 |
| 26 | `#0061a1` | `oklch(48.11% 0.1276 247.37)` | Brigadier Blue | white, 6.4 to 1 |
| 27 | `#005d9f` | `oklch(46.81% 0.1302 249.34)` | Drakenhof Nightshade | white, 6.8 to 1 |
| 28 | `#00589d` | `oklch(45.47% 0.1335 251.34)` | Parachuting | white, 7.3 to 1 |
| 29 | `#00529c` | `oklch(44.11% 0.1375 253.35)` | Freshwater Lake | white, 7.7 to 1 |
| 30 | `#004d9a` | `oklch(42.74% 0.1426 255.36)` | Freshwater Lake | white, 8.3 to 1 |
| 31 | `#00479a` | `oklch(41.36% 0.1491 257.38)` | Fright Night | white, 8.8 to 1 |
| 32 | `#00419a` | `oklch(39.97% 0.1579 259.39)` | Fright Night | white, 9.4 to 1 |
| 33 | `#00399c` | `oklch(38.58% 0.1698 261.34)` | Amalfitan Azure | white, 10.1 to 1 |
| 34 | `#0d3594` | `oklch(37.20% 0.1621 263.30)` | Dark Seashore Night | white, 10.7 to 1 |
| 35 | `#14318c` | `oklch(35.83% 0.1541 265.24)` | US Air Force Blue | white, 11.3 to 1 |
| 36 | `#182e83` | `oklch(34.49% 0.1460 267.15)` | Bavarian Blue | white, 11.9 to 1 |
| 37 | `#1b2a7b` | `oklch(33.17% 0.1377 269.01)` | St. Patrick’s Blue | white, 12.5 to 1 |
| 38 | `#1d2773` | `oklch(31.88% 0.1294 270.82)` | Impression of Obscurity | white, 13.1 to 1 |
| 39 | `#1e256b` | `oklch(30.63% 0.1211 272.57)` | After Work Blue | white, 13.7 to 1 |
| 40 | `#1e2263` | `oklch(29.42% 0.1130 274.26)` | Intergalactic Cowboy | white, 14.3 to 1 |
| 41 | `#1e205c` | `oklch(28.26% 0.1051 275.87)` | Spacescape | white, 14.8 to 1 |
| 42 | `#1d1e55` | `oklch(27.16% 0.0976 277.41)` | Fly-by-Night | white, 15.3 to 1 |
| 43 | `#1d1c4e` | `oklch(26.12% 0.0905 278.86)` | Fly-by-Night | white, 15.8 to 1 |
| 44 | `#1c1a49` | `oklch(25.14% 0.0840 280.22)` | Tetsu-Kon Blue | white, 16.2 to 1 |
| 45 | `#1b1943` | `oklch(24.24% 0.0780 281.48)` | Prune Plum | white, 16.6 to 1 |
| 46 | `#1a173e` | `oklch(23.42% 0.0728 282.63)` | Prune Plum | white, 16.9 to 1 |
| 47 | `#19163a` | `oklch(22.69% 0.0683 283.67)` | Lost in Sadness | white, 17.2 to 1 |
| 48 | `#181537` | `oklch(22.05% 0.0648 284.59)` | Lost in Sadness | white, 17.5 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #64d2d1 0.0%, #5ed0d1 2.1%, #55ced0 4.3%, #4bcbd0 6.4%, #3dc9d0 8.5%, #2ac6d0 10.6%, #00c2d1 12.8%, #00becf 14.9%, #00b9cd 17.0%, #00b4cb 19.1%, #00afc8 21.3%, #00a9c6 23.4%, #00a4c3 25.5%, #009fc0 27.7%, #0099be 29.8%, #0094bb 31.9%, #008eb8 34.0%, #0089b5 36.2%, #0084b2 38.3%, #007eb0 40.4%, #0079ad 42.6%, #0074aa 44.7%, #006fa8 46.8%, #006ba6 48.9%, #0066a3 51.1%, #0061a1 53.2%, #005d9f 55.3%, #00589d 57.4%, #00529c 59.6%, #004d9a 61.7%, #00479a 63.8%, #00419a 66.0%, #00399c 68.1%, #0d3594 70.2%, #14318c 72.3%, #182e83 74.5%, #1b2a7b 76.6%, #1d2773 78.7%, #1e256b 80.9%, #1e2263 83.0%, #1e205c 85.1%, #1d1e55 87.2%, #1d1c4e 89.4%, #1c1a49 91.5%, #1b1943 93.6%, #1a173e 95.7%, #19163a 97.9%, #181537 100.0%);
background: conic-gradient(from 30deg in oklch, oklch(79.92% 0.1006 194.77) 0.0%, oklch(79.23% 0.1033 195.92) 2.1%, oklch(78.43% 0.1068 197.26) 4.3%, oklch(77.54% 0.1110 198.76) 6.4%, oklch(76.56% 0.1158 200.42) 8.5%, oklch(75.49% 0.1211 202.23) 10.6%, oklch(74.35% 0.1268 204.16) 12.8%, oklch(73.15% 0.1252 206.21) 14.9%, oklch(71.88% 0.1237 208.36) 17.0%, oklch(70.56% 0.1223 210.60) 19.1%, oklch(69.19% 0.1210 212.91) 21.3%, oklch(67.78% 0.1199 215.29) 23.4%, oklch(66.35% 0.1190 217.71) 25.5%, oklch(64.89% 0.1183 220.16) 27.7%, oklch(63.41% 0.1178 222.63) 29.8%, oklch(61.93% 0.1174 225.11) 31.9%, oklch(60.44% 0.1174 227.58) 34.0%, oklch(58.96% 0.1175 230.02) 36.2%, oklch(57.50% 0.1179 232.44) 38.3%, oklch(56.05% 0.1186 234.80) 40.4%, oklch(54.64% 0.1195 237.10) 42.6%, oklch(53.25% 0.1206 239.32) 44.7%, oklch(51.92% 0.1220 241.46) 46.8%, oklch(50.63% 0.1236 243.49) 48.9%, oklch(49.38% 0.1254 245.42) 51.1%, oklch(48.11% 0.1276 247.37) 53.2%, oklch(46.81% 0.1302 249.34) 55.3%, oklch(45.47% 0.1335 251.34) 57.4%, oklch(44.11% 0.1375 253.35) 59.6%, oklch(42.74% 0.1426 255.36) 61.7%, oklch(41.36% 0.1491 257.38) 63.8%, oklch(39.97% 0.1579 259.39) 66.0%, oklch(38.58% 0.1698 261.34) 68.1%, oklch(37.20% 0.1621 263.30) 70.2%, oklch(35.83% 0.1541 265.24) 72.3%, oklch(34.49% 0.1460 267.15) 74.5%, oklch(33.17% 0.1377 269.01) 76.6%, oklch(31.88% 0.1294 270.82) 78.7%, oklch(30.63% 0.1211 272.57) 80.9%, oklch(29.42% 0.1130 274.26) 83.0%, oklch(28.26% 0.1051 275.87) 85.1%, oklch(27.16% 0.0976 277.41) 87.2%, oklch(26.12% 0.0905 278.86) 89.4%, oklch(25.14% 0.0840 280.22) 91.5%, oklch(24.24% 0.0780 281.48) 93.6%, oklch(23.42% 0.0728 282.63) 95.7%, oklch(22.69% 0.0683 283.67) 97.9%, oklch(22.05% 0.0648 284.59) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.799 | 0.101 | 194.8 |
| 2 | 0.5 | 0.209 | 244.4 |
| 3 | 0.22 | 0.065 | 284.6 |

## In these collections

- [Synthwave gradients](https://grabient.com/synthwave-gradients)

## Other forms

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