# Teal and periwinkle vaporwave palette

The Teal and periwinkle vaporwave palette brings together blue, teal, light green, and light blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits album artwork and music event graphics. Its darkest tone is blue, and its lightest tone is light green.

- Also called: Tritone blue, teal and light blue angular gradient
- Seed: `kYYC-mw5681imvZooj46A3HOAfxu`
- Page: https://grabient.com/kYYC-mw5681imvZooj46A3HOAfxu?style=angularGradient&steps=32&angle=270
- Drawn as: angular gradient, 32 steps, 270 degrees
- Kinds: light center, pastel, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#18475f` | `oklch(37.80% 0.0648 234.14)` | Swallow Blue | white, 9.9 to 1 |
| 2 | `#184c63` | `oklch(39.39% 0.0668 231.31)` | Lazurite Blue | white, 9.3 to 1 |
| 3 | `#185369` | `oklch(41.57% 0.0695 227.35)` | Juggernaut | white, 8.4 to 1 |
| 4 | `#185c70` | `oklch(44.16% 0.0727 222.68)` | Deep Blue Sea | white, 7.5 to 1 |
| 5 | `#186577` | `oklch(46.99% 0.0762 217.70)` | Bold Bolection | white, 6.6 to 1 |
| 6 | `#196e7e` | `oklch(49.87% 0.0799 212.84)` | Billabong | white, 5.8 to 1 |
| 7 | `#1b7884` | `oklch(52.63% 0.0834 208.49)` | Blue Kelp | white, 5.1 to 1 |
| 8 | `#1d818a` | `oklch(55.25% 0.0870 204.78)` | Riviera Sea | white, 4.6 to 1 |
| 9 | `#1f8a91` | `oklch(57.98% 0.0913 201.27)` | Turkish Jade | black, 5.1 to 1 |
| 10 | `#219497` | `oklch(60.76% 0.0958 197.93)` | Sea Fantasy | black, 5.7 to 1 |
| 11 | `#259d9d` | `oklch(63.52% 0.0999 194.74)` | Baltic | black, 6.4 to 1 |
| 12 | `#2ca7a3` | `oklch(66.19% 0.1034 191.69)` | Royal Cloak | black, 7.1 to 1 |
| 13 | `#34afa7` | `oklch(68.73% 0.1056 188.78)` | Tropical Tree | black, 7.8 to 1 |
| 14 | `#3fb7ab` | `oklch(71.11% 0.1064 185.68)` | Message Green | black, 8.5 to 1 |
| 15 | `#4dbfae` | `oklch(73.54% 0.1064 181.57)` | Emerald Bliss | black, 9.3 to 1 |
| 16 | `#5bc7b0` | `oklch(75.91% 0.1056 177.18)` | Kauai | black, 10.2 to 1 |
| 17 | `#69ceb2` | `oklch(78.12% 0.1038 173.40)` | Aquarium Blue | black, 11 to 1 |
| 18 | `#74d3b5` | `oklch(80.05% 0.1009 171.13)` | Sea Treasure | black, 11.7 to 1 |
| 19 | `#7dd7bb` | `oklch(81.59% 0.0968 171.25)` | Mint Majesty | black, 12.3 to 1 |
| 20 | `#83dac2` | `oklch(82.64% 0.0911 174.66)` | Fresh Mist | black, 12.7 to 1 |
| 21 | `#89dacb` | `oklch(83.19% 0.0818 181.58)` | Riptide | black, 12.9 to 1 |
| 22 | `#92d8d3` | `oklch(83.35% 0.0702 191.14)` | Sweet Rhapsody | black, 12.9 to 1 |
| 23 | `#9bd4d8` | `oklch(83.20% 0.0580 202.35)` | Dulcet | black, 12.7 to 1 |
| 24 | `#a5cfda` | `oklch(82.82% 0.0472 214.23)` | Wave | black, 12.5 to 1 |
| 25 | `#abcbd9` | `oklch(82.32% 0.0396 225.78)` | Sailing on the Bay | black, 12.2 to 1 |
| 26 | `#adc8d9` | `oklch(81.77% 0.0372 236.11)` | Sonata | black, 12 to 1 |
| 27 | `#acc4da` | `oklch(80.95% 0.0409 246.62)` | Blue Prism | black, 11.6 to 1 |
| 28 | `#aabfdd` | `oklch(79.83% 0.0490 257.70)` | September Aster | black, 11.1 to 1 |
| 29 | `#a9b8e0` | `oklch(78.59% 0.0596 268.63)` | Lavender Phlox | black, 10.6 to 1 |
| 30 | `#abb1e3` | `oklch(77.36% 0.0707 278.68)` | Maximum Blue Purple | black, 10.1 to 1 |
| 31 | `#aeabe3` | `oklch(76.31% 0.0805 287.15)` | Maximum Blue Purple | black, 9.7 to 1 |
| 32 | `#b2a6e2` | `oklch(75.59% 0.0868 293.32)` | Maximum Blue Purple | black, 9.4 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #18475f 0.0%, #184c63 3.2%, #185369 6.5%, #185c70 9.7%, #186577 12.9%, #196e7e 16.1%, #1b7884 19.4%, #1d818a 22.6%, #1f8a91 25.8%, #219497 29.0%, #259d9d 32.3%, #2ca7a3 35.5%, #34afa7 38.7%, #3fb7ab 41.9%, #4dbfae 45.2%, #5bc7b0 48.4%, #69ceb2 51.6%, #74d3b5 54.8%, #7dd7bb 58.1%, #83dac2 61.3%, #89dacb 64.5%, #92d8d3 67.7%, #9bd4d8 71.0%, #a5cfda 74.2%, #abcbd9 77.4%, #adc8d9 80.6%, #acc4da 83.9%, #aabfdd 87.1%, #a9b8e0 90.3%, #abb1e3 93.5%, #aeabe3 96.8%, #b2a6e2 100.0%);
background: conic-gradient(from 270deg in oklch, oklch(37.80% 0.0648 234.14) 0.0%, oklch(39.39% 0.0668 231.31) 3.2%, oklch(41.57% 0.0695 227.35) 6.5%, oklch(44.16% 0.0727 222.68) 9.7%, oklch(46.99% 0.0762 217.70) 12.9%, oklch(49.87% 0.0799 212.84) 16.1%, oklch(52.63% 0.0834 208.49) 19.4%, oklch(55.25% 0.0870 204.78) 22.6%, oklch(57.98% 0.0913 201.27) 25.8%, oklch(60.76% 0.0958 197.93) 29.0%, oklch(63.52% 0.0999 194.74) 32.3%, oklch(66.19% 0.1034 191.69) 35.5%, oklch(68.73% 0.1056 188.78) 38.7%, oklch(71.11% 0.1064 185.68) 41.9%, oklch(73.54% 0.1064 181.57) 45.2%, oklch(75.91% 0.1056 177.18) 48.4%, oklch(78.12% 0.1038 173.40) 51.6%, oklch(80.05% 0.1009 171.13) 54.8%, oklch(81.59% 0.0968 171.25) 58.1%, oklch(82.64% 0.0911 174.66) 61.3%, oklch(83.19% 0.0818 181.58) 64.5%, oklch(83.35% 0.0702 191.14) 67.7%, oklch(83.20% 0.0580 202.35) 71.0%, oklch(82.82% 0.0472 214.23) 74.2%, oklch(82.32% 0.0396 225.78) 77.4%, oklch(81.77% 0.0372 236.11) 80.6%, oklch(80.95% 0.0409 246.62) 83.9%, oklch(79.83% 0.0490 257.70) 87.1%, oklch(78.59% 0.0596 268.63) 90.3%, oklch(77.36% 0.0707 278.68) 93.5%, oklch(76.31% 0.0805 287.15) 96.8%, oklch(75.59% 0.0868 293.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.378 | 0.065 | 234.1 |
| 2 | 0.531 | 0.084 | 207.7 |
| 3 | 0.697 | 0.106 | 187.6 |
| 4 | 0.823 | 0.094 | 172.8 |
| 5 | 0.819 | 0.037 | 234.1 |
| 6 | 0.756 | 0.087 | 293.3 |

## In these collections

- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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