# Teal Violet Estuary

The gradient travels from #167e91 to #76afc7, passing through cyan, blue, violet, blue, cyan, teal, and cyan. The cool progression leaves both quiet and saturated regions for presentation covers, data backdrops, or interface surfaces that need legible foreground content. The stated order preserves the native composition.

- Also called: Blue, purple and light blue linear gradient
- Seed: `kWi0KYNyTI8Ulv7tFDM3BlFY`
- Page: https://grabient.com/kWi0KYNyTI8Ulv7tFDM3BlFY?steps=32&angle=240
- Drawn as: linear gradient, 32 steps, 240 degrees
- Kinds: muted, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 5.5 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 | `#167e91` | `oklch(54.72% 0.0909 213.75)` | Pagoda | white, 4.7 to 1 |
| 2 | `#187993` | `oklch(53.65% 0.0918 220.41)` | Havasu | white, 4.9 to 1 |
| 3 | `#1e7294` | `oklch(52.03% 0.0929 229.91)` | Enchanted Blue | white, 5.3 to 1 |
| 4 | `#296994` | `oklch(50.10% 0.0943 241.26)` | Blue Oasis | white, 5.8 to 1 |
| 5 | `#346092` | `oklch(48.08% 0.0958 253.46)` | Running Water | white, 6.5 to 1 |
| 6 | `#3e568f` | `oklch(46.16% 0.0973 265.52)` | Demon Blue | white, 7.1 to 1 |
| 7 | `#464e8a` | `oklch(44.59% 0.0987 276.45)` | Beaded Blue | white, 7.7 to 1 |
| 8 | `#4d4886` | `oklch(43.57% 0.0999 285.24)` | Moonlight Sonata | white, 8.1 to 1 |
| 9 | `#524583` | `oklch(43.31% 0.1008 291.00)` | Gigas | white, 8.2 to 1 |
| 10 | `#564483` | `oklch(43.59% 0.1020 295.08)` | Harvest Night | white, 8.2 to 1 |
| 11 | `#5b4584` | `oklch(44.25% 0.1034 298.10)` | Gigas | white, 8 to 1 |
| 12 | `#5f4787` | `oklch(45.30% 0.1048 299.87)` | Lords of the Night | white, 7.6 to 1 |
| 13 | `#644a8c` | `oklch(46.71% 0.1059 300.23)` | Lords of the Night | white, 7.2 to 1 |
| 14 | `#685092` | `oklch(48.47% 0.1065 298.98)` | Pure Mauve | white, 6.6 to 1 |
| 15 | `#6b579a` | `oklch(50.57% 0.1061 295.96)` | Rollick | white, 6 to 1 |
| 16 | `#6c60a3` | `oklch(53.00% 0.1046 290.99)` | Scampi | white, 5.4 to 1 |
| 17 | `#6d6bae` | `oklch(55.87% 0.1016 283.45)` | Mediaeval | white, 4.8 to 1 |
| 18 | `#6b7cb9` | `oklch(59.82% 0.0963 271.18)` | Persian Jewel | black, 5.2 to 1 |
| 19 | `#6990c4` | `oklch(64.56% 0.0894 255.34)` | Cornflower Blue | black, 6.3 to 1 |
| 20 | `#6ba5ca` | `oklch(69.67% 0.0816 237.59)` | Wandering River | black, 7.8 to 1 |
| 21 | `#76b9cd` | `oklch(74.75% 0.0736 219.62)` | Blue Chrysocolla | black, 9.5 to 1 |
| 22 | `#88c9cf` | `oklch(79.35% 0.0661 203.11)` | Not a Cloud in Sight | black, 11.2 to 1 |
| 23 | `#9ad5d0` | `oklch(83.07% 0.0599 189.72)` | Fountain City | black, 12.7 to 1 |
| 24 | `#a8dcd1` | `oklch(85.48% 0.0558 181.13)` | Sparkling Mint | black, 13.8 to 1 |
| 25 | `#acded2` | `oklch(86.25% 0.0541 178.54)` | Jaded Clouds | black, 14.1 to 1 |
| 26 | `#a9dcd1` | `oklch(85.58% 0.0543 180.91)` | Prism | black, 13.8 to 1 |
| 27 | `#a1d6d0` | `oklch(83.85% 0.0560 186.93)` | Touch of Turquoise | black, 13 to 1 |
| 28 | `#96cfce` | `oklch(81.43% 0.0586 195.30)` | Clear Cove | black, 12 to 1 |
| 29 | `#8ac6cc` | `oklch(78.71% 0.0617 204.73)` | Cerulean Skies | black, 11 to 1 |
| 30 | `#80bcca` | `oklch(76.05% 0.0648 213.92)` | Azure Lake | black, 10 to 1 |
| 31 | `#7ab4c9` | `oklch(73.84% 0.0673 221.59)` | Tidal Basin | black, 9.2 to 1 |
| 32 | `#76afc7` | `oklch(72.44% 0.0689 226.43)` | Frisky Blue | black, 8.7 to 1 |

## CSS

```css
background: linear-gradient(240deg, #167e91 0.0%, #187993 3.2%, #1e7294 6.5%, #296994 9.7%, #346092 12.9%, #3e568f 16.1%, #464e8a 19.4%, #4d4886 22.6%, #524583 25.8%, #564483 29.0%, #5b4584 32.3%, #5f4787 35.5%, #644a8c 38.7%, #685092 41.9%, #6b579a 45.2%, #6c60a3 48.4%, #6d6bae 51.6%, #6b7cb9 54.8%, #6990c4 58.1%, #6ba5ca 61.3%, #76b9cd 64.5%, #88c9cf 67.7%, #9ad5d0 71.0%, #a8dcd1 74.2%, #acded2 77.4%, #a9dcd1 80.6%, #a1d6d0 83.9%, #96cfce 87.1%, #8ac6cc 90.3%, #80bcca 93.5%, #7ab4c9 96.8%, #76afc7 100.0%);
background: linear-gradient(240deg in oklch, oklch(54.72% 0.0909 213.75) 0.0%, oklch(53.65% 0.0918 220.41) 3.2%, oklch(52.03% 0.0929 229.91) 6.5%, oklch(50.10% 0.0943 241.26) 9.7%, oklch(48.08% 0.0958 253.46) 12.9%, oklch(46.16% 0.0973 265.52) 16.1%, oklch(44.59% 0.0987 276.45) 19.4%, oklch(43.57% 0.0999 285.24) 22.6%, oklch(43.31% 0.1008 291.00) 25.8%, oklch(43.59% 0.1020 295.08) 29.0%, oklch(44.25% 0.1034 298.10) 32.3%, oklch(45.30% 0.1048 299.87) 35.5%, oklch(46.71% 0.1059 300.23) 38.7%, oklch(48.47% 0.1065 298.98) 41.9%, oklch(50.57% 0.1061 295.96) 45.2%, oklch(53.00% 0.1046 290.99) 48.4%, oklch(55.87% 0.1016 283.45) 51.6%, oklch(59.82% 0.0963 271.18) 54.8%, oklch(64.56% 0.0894 255.34) 58.1%, oklch(69.67% 0.0816 237.59) 61.3%, oklch(74.75% 0.0736 219.62) 64.5%, oklch(79.35% 0.0661 203.11) 67.7%, oklch(83.07% 0.0599 189.72) 71.0%, oklch(85.48% 0.0558 181.13) 74.2%, oklch(86.25% 0.0541 178.54) 77.4%, oklch(85.58% 0.0543 180.91) 80.6%, oklch(83.85% 0.0560 186.93) 83.9%, oklch(81.43% 0.0586 195.30) 87.1%, oklch(78.71% 0.0617 204.73) 90.3%, oklch(76.05% 0.0648 213.92) 93.5%, oklch(73.84% 0.0673 221.59) 96.8%, oklch(72.44% 0.0689 226.43) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.547 | 0.091 | 213.8 |
| 2 | 0.433 | 0.101 | 289.8 |
| 3 | 0.543 | 0.103 | 287.7 |
| 4 | 0.858 | 0.055 | 179.9 |
| 5 | 0.724 | 0.069 | 226.4 |

## In these collections

- [Cool gradients](https://grabient.com/cool-gradients)

## Other forms

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