# Duotone teal and navy linear swatches

Duotone teal and navy linear swatches with 32 colors: #22d4cd, #1ed0cb, #18cbc9, #11c5c7, #09bec3, #02b6c0, #00afbb, #00a7b7, #009fb3, #0098ae, #0391aa, #078aa6, #0b84a2, #0f7e9e, #13789a, #167196, #196b92, #1c658d, #1e6089, #205a85, #225580, #234f7c, #244a77, #254472, #263f6d, #273a68, #273563, #27305e, #272c5a, #272856, #262552, #26224f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUyF-HzCbDDYgw8kHUPg`
- Page: https://grabient.com/kUyF-HzCbDDYgw8kHUPg?style=linearSwatches&steps=32&angle=270
- Drawn as: linear swatches, 32 steps, 270 degrees
- Kinds: light to dark, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 7.9 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 | `#22d4cd` | `oklch(78.74% 0.1309 190.55)` | Turquoise Panic | black, 11.3 to 1 |
| 2 | `#1ed0cb` | `oklch(77.65% 0.1294 192.03)` | Blue Martina | black, 10.9 to 1 |
| 3 | `#18cbc9` | `oklch(76.25% 0.1275 193.90)` | Tilla Kari Mosque | black, 10.3 to 1 |
| 4 | `#11c5c7` | `oklch(74.59% 0.1253 196.10)` | Turquoise Surf | black, 9.7 to 1 |
| 5 | `#09bec3` | `oklch(72.73% 0.1227 198.56)` | Maximum Blue Green | black, 9.1 to 1 |
| 6 | `#02b6c0` | `oklch(70.72% 0.1200 201.24)` | Lago Blue | black, 8.4 to 1 |
| 7 | `#00afbb` | `oklch(68.62% 0.1170 204.09)` | Deep Turquoise | black, 7.8 to 1 |
| 8 | `#00a7b7` | `oklch(66.49% 0.1140 207.05)` | Bluebird | black, 7.1 to 1 |
| 9 | `#009fb3` | `oklch(64.38% 0.1114 210.06)` | Lake Blue | black, 6.6 to 1 |
| 10 | `#0098ae` | `oklch(62.34% 0.1091 213.05)` | Aquarium Diver | black, 6 to 1 |
| 11 | `#0391aa` | `oklch(60.44% 0.1068 216.00)` | Cape Pond | black, 5.6 to 1 |
| 12 | `#078aa6` | `oklch(58.67% 0.1048 218.90)` | Capri Breeze | black, 5.2 to 1 |
| 13 | `#0b84a2` | `oklch(56.92% 0.1029 221.88)` | Blue Arc | black, 4.8 to 1 |
| 14 | `#0f7e9e` | `oklch(55.18% 0.1011 224.94)` | Turkish Tile | white, 4.6 to 1 |
| 15 | `#13789a` | `oklch(53.45% 0.0993 228.08)` | Sea Sight | white, 5 to 1 |
| 16 | `#167196` | `oklch(51.74% 0.0977 231.27)` | Enchanted Blue | white, 5.4 to 1 |
| 17 | `#196b92` | `oklch(50.04% 0.0961 234.50)` | Cairns | white, 5.8 to 1 |
| 18 | `#1c658d` | `oklch(48.37% 0.0946 237.77)` | Traditional Blue | white, 6.3 to 1 |
| 19 | `#1e6089` | `oklch(46.73% 0.0931 241.04)` | Copenhagen Blue | white, 6.8 to 1 |
| 20 | `#205a85` | `oklch(45.12% 0.0918 244.31)` | Oceanic Motion | white, 7.3 to 1 |
| 21 | `#225580` | `oklch(43.55% 0.0904 247.57)` | Blueberry Twist | white, 7.8 to 1 |
| 22 | `#234f7c` | `oklch(42.01% 0.0891 250.82)` | Slumber | white, 8.4 to 1 |
| 23 | `#244a77` | `oklch(40.43% 0.0879 254.28)` | Sapphire Earrings | white, 9 to 1 |
| 24 | `#254472` | `oklch(38.83% 0.0867 257.96)` | Cold Current | white, 9.7 to 1 |
| 25 | `#263f6d` | `oklch(37.22% 0.0856 261.75)` | Limoges | white, 10.4 to 1 |
| 26 | `#273a68` | `oklch(35.63% 0.0845 265.56)` | Blue Depths | white, 11.1 to 1 |
| 27 | `#273563` | `oklch(34.10% 0.0836 269.29)` | Navy Trim | white, 11.8 to 1 |
| 28 | `#27305e` | `oklch(32.66% 0.0826 272.86)` | Underwater Realm | white, 12.5 to 1 |
| 29 | `#272c5a` | `oklch(31.33% 0.0818 276.16)` | Deep Sea Base | white, 13.2 to 1 |
| 30 | `#272856` | `oklch(30.15% 0.0811 279.11)` | Ceremonial Purple | white, 13.8 to 1 |
| 31 | `#262552` | `oklch(29.15% 0.0804 281.60)` | Pāua | white, 14.3 to 1 |
| 32 | `#26224f` | `oklch(28.35% 0.0799 283.54)` | Pāua | white, 14.7 to 1 |

## CSS

```css
background: linear-gradient(270deg, #22d4cd 0.000% 3.125%, #1ed0cb 3.125% 6.250%, #18cbc9 6.250% 9.375%, #11c5c7 9.375% 12.500%, #09bec3 12.500% 15.625%, #02b6c0 15.625% 18.750%, #00afbb 18.750% 21.875%, #00a7b7 21.875% 25.000%, #009fb3 25.000% 28.125%, #0098ae 28.125% 31.250%, #0391aa 31.250% 34.375%, #078aa6 34.375% 37.500%, #0b84a2 37.500% 40.625%, #0f7e9e 40.625% 43.750%, #13789a 43.750% 46.875%, #167196 46.875% 50.000%, #196b92 50.000% 53.125%, #1c658d 53.125% 56.250%, #1e6089 56.250% 59.375%, #205a85 59.375% 62.500%, #225580 62.500% 65.625%, #234f7c 65.625% 68.750%, #244a77 68.750% 71.875%, #254472 71.875% 75.000%, #263f6d 75.000% 78.125%, #273a68 78.125% 81.250%, #273563 81.250% 84.375%, #27305e 84.375% 87.500%, #272c5a 87.500% 90.625%, #272856 90.625% 93.750%, #262552 93.750% 96.875%, #26224f 96.875% 100.000%);
background: linear-gradient(270deg, oklch(78.74% 0.1309 190.55) 0.000% 3.125%, oklch(77.65% 0.1294 192.03) 3.125% 6.250%, oklch(76.25% 0.1275 193.90) 6.250% 9.375%, oklch(74.59% 0.1253 196.10) 9.375% 12.500%, oklch(72.73% 0.1227 198.56) 12.500% 15.625%, oklch(70.72% 0.1200 201.24) 15.625% 18.750%, oklch(68.62% 0.1170 204.09) 18.750% 21.875%, oklch(66.49% 0.1140 207.05) 21.875% 25.000%, oklch(64.38% 0.1114 210.06) 25.000% 28.125%, oklch(62.34% 0.1091 213.05) 28.125% 31.250%, oklch(60.44% 0.1068 216.00) 31.250% 34.375%, oklch(58.67% 0.1048 218.90) 34.375% 37.500%, oklch(56.92% 0.1029 221.88) 37.500% 40.625%, oklch(55.18% 0.1011 224.94) 40.625% 43.750%, oklch(53.45% 0.0993 228.08) 43.750% 46.875%, oklch(51.74% 0.0977 231.27) 46.875% 50.000%, oklch(50.04% 0.0961 234.50) 50.000% 53.125%, oklch(48.37% 0.0946 237.77) 53.125% 56.250%, oklch(46.73% 0.0931 241.04) 56.250% 59.375%, oklch(45.12% 0.0918 244.31) 59.375% 62.500%, oklch(43.55% 0.0904 247.57) 62.500% 65.625%, oklch(42.01% 0.0891 250.82) 65.625% 68.750%, oklch(40.43% 0.0879 254.28) 68.750% 71.875%, oklch(38.83% 0.0867 257.96) 71.875% 75.000%, oklch(37.22% 0.0856 261.75) 75.000% 78.125%, oklch(35.63% 0.0845 265.56) 78.125% 81.250%, oklch(34.10% 0.0836 269.29) 81.250% 84.375%, oklch(32.66% 0.0826 272.86) 84.375% 87.500%, oklch(31.33% 0.0818 276.16) 87.500% 90.625%, oklch(30.15% 0.0811 279.11) 90.625% 93.750%, oklch(29.15% 0.0804 281.60) 93.750% 96.875%, oklch(28.35% 0.0799 283.54) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.787 | 0.131 | 190.5 |
| 2 | 0.598 | 0.106 | 217 |
| 3 | 0.425 | 0.09 | 249.7 |
| 4 | 0.283 | 0.08 | 283.5 |

## In these collections

- [Turquoise](https://grabient.com/turquoise)

## Other forms

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