# Teal, gray blue, blue and dark gray angular gradient

Teal, gray blue, blue and dark gray angular gradient with 32 colors: #437575, #487979, #4e7e80, #568589, #5e8b91, #659099, #6a949f, #6d96a3, #7096a6, #7195a8, #7292a9, #728fa9, #718ba7, #6e86a4, #6980a0, #62789a, #5a7094, #52678d, #4c5f85, #46587e, #405176, #3b4a6d, #354364, #313d5b, #2d3854, #2a364e, #293549, #2a3646, #2d3843, #313940, #353b3f, #383b3d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYhieK0ZHCc8TRC8GEFKpFACyCPK`
- Page: https://grabient.com/kYhieK0ZHCc8TRC8GEFKpFACyCPK?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.8 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 | `#437575` | `oklch(52.76% 0.0537 194.77)` | Surf Green | white, 5.1 to 1 |
| 2 | `#487979` | `oklch(54.10% 0.0531 196.81)` | Lucky Shamrock | white, 4.9 to 1 |
| 3 | `#4e7e80` | `oklch(56.07% 0.0520 199.50)` | Nickel Ore Green | black, 4.6 to 1 |
| 4 | `#568589` | `oklch(58.35% 0.0508 202.74)` | Rainier Blue | black, 5 to 1 |
| 5 | `#5e8b91` | `oklch(60.65% 0.0497 206.45)` | Dusty Turquoise | black, 5.5 to 1 |
| 6 | `#659099` | `oklch(62.63% 0.0488 210.56)` | Secret Cove | black, 6 to 1 |
| 7 | `#6a949f` | `oklch(64.00% 0.0483 214.98)` | Silk Khimar | black, 6.3 to 1 |
| 8 | `#6d96a3` | `oklch(64.67% 0.0482 219.99)` | Silver Fir Blue | black, 6.5 to 1 |
| 9 | `#7096a6` | `oklch(64.97% 0.0484 225.98)` | Smoky Blue | black, 6.5 to 1 |
| 10 | `#7195a8` | `oklch(64.92% 0.0489 232.48)` | Architecture Blue | black, 6.5 to 1 |
| 11 | `#7292a9` | `oklch(64.53% 0.0496 239.01)` | American Anthem | black, 6.4 to 1 |
| 12 | `#728fa9` | `oklch(63.79% 0.0506 245.07)` | Blue Grey | black, 6.2 to 1 |
| 13 | `#718ba7` | `oklch(62.72% 0.0518 250.17)` | Starset | black, 5.9 to 1 |
| 14 | `#6e86a4` | `oklch(61.26% 0.0535 253.96)` | Cowgirl Blue | black, 5.6 to 1 |
| 15 | `#6980a0` | `oklch(59.24% 0.0561 256.82)` | Bay View | black, 5.1 to 1 |
| 16 | `#62789a` | `oklch(56.79% 0.0591 258.96)` | Chicory Flower | black, 4.6 to 1 |
| 17 | `#5a7094` | `oklch(54.10% 0.0622 260.57)` | Blue Jacket | white, 5 to 1 |
| 18 | `#52678d` | `oklch(51.34% 0.0647 261.81)` | UCLA Blue | white, 5.6 to 1 |
| 19 | `#4c5f85` | `oklch(48.70% 0.0661 262.85)` | Indigo Navy Blue | white, 6.3 to 1 |
| 20 | `#46587e` | `oklch(46.29% 0.0659 263.88)` | Sailor | white, 7 to 1 |
| 21 | `#405176` | `oklch(43.75% 0.0645 264.97)` | Astronaut | white, 7.8 to 1 |
| 22 | `#3b4a6d` | `oklch(41.12% 0.0621 265.94)` | Jazz Age Blues | white, 8.8 to 1 |
| 23 | `#354364` | `oklch(38.58% 0.0589 266.56)` | Stay the Night | white, 9.8 to 1 |
| 24 | `#313d5b` | `oklch(36.31% 0.0551 266.61)` | Gulf Blue | white, 10.7 to 1 |
| 25 | `#2d3854` | `oklch(34.48% 0.0507 265.85)` | Mediaeval Blue | white, 11.5 to 1 |
| 26 | `#2a364e` | `oklch(33.28% 0.0458 264.04)` | Bunting | white, 12.1 to 1 |
| 27 | `#293549` | `oklch(32.83% 0.0396 260.57)` | Aeronautic | white, 12.3 to 1 |
| 28 | `#2a3646` | `oklch(32.95% 0.0321 255.75)` | Pacific Line | white, 12.2 to 1 |
| 29 | `#2d3843` | `oklch(33.45% 0.0242 250.28)` | Precision | white, 11.9 to 1 |
| 30 | `#313940` | `oklch(34.11% 0.0166 244.87)` | Tempest in a Teapot | white, 11.6 to 1 |
| 31 | `#353b3f` | `oklch(34.71% 0.0101 240.22)` | Crypt | white, 11.4 to 1 |
| 32 | `#383b3d` | `oklch(35.04% 0.0055 237.04)` | Montana | white, 11.2 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #437575 0.0%, #487979 3.2%, #4e7e80 6.5%, #568589 9.7%, #5e8b91 12.9%, #659099 16.1%, #6a949f 19.4%, #6d96a3 22.6%, #7096a6 25.8%, #7195a8 29.0%, #7292a9 32.3%, #728fa9 35.5%, #718ba7 38.7%, #6e86a4 41.9%, #6980a0 45.2%, #62789a 48.4%, #5a7094 51.6%, #52678d 54.8%, #4c5f85 58.1%, #46587e 61.3%, #405176 64.5%, #3b4a6d 67.7%, #354364 71.0%, #313d5b 74.2%, #2d3854 77.4%, #2a364e 80.6%, #293549 83.9%, #2a3646 87.1%, #2d3843 90.3%, #313940 93.5%, #353b3f 96.8%, #383b3d 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(52.76% 0.0537 194.77) 0.0%, oklch(54.10% 0.0531 196.81) 3.2%, oklch(56.07% 0.0520 199.50) 6.5%, oklch(58.35% 0.0508 202.74) 9.7%, oklch(60.65% 0.0497 206.45) 12.9%, oklch(62.63% 0.0488 210.56) 16.1%, oklch(64.00% 0.0483 214.98) 19.4%, oklch(64.67% 0.0482 219.99) 22.6%, oklch(64.97% 0.0484 225.98) 25.8%, oklch(64.92% 0.0489 232.48) 29.0%, oklch(64.53% 0.0496 239.01) 32.3%, oklch(63.79% 0.0506 245.07) 35.5%, oklch(62.72% 0.0518 250.17) 38.7%, oklch(61.26% 0.0535 253.96) 41.9%, oklch(59.24% 0.0561 256.82) 45.2%, oklch(56.79% 0.0591 258.96) 48.4%, oklch(54.10% 0.0622 260.57) 51.6%, oklch(51.34% 0.0647 261.81) 54.8%, oklch(48.70% 0.0661 262.85) 58.1%, oklch(46.29% 0.0659 263.88) 61.3%, oklch(43.75% 0.0645 264.97) 64.5%, oklch(41.12% 0.0621 265.94) 67.7%, oklch(38.58% 0.0589 266.56) 71.0%, oklch(36.31% 0.0551 266.61) 74.2%, oklch(34.48% 0.0507 265.85) 77.4%, oklch(33.28% 0.0458 264.04) 80.6%, oklch(32.83% 0.0396 260.57) 83.9%, oklch(32.95% 0.0321 255.75) 87.1%, oklch(33.45% 0.0242 250.28) 90.3%, oklch(34.11% 0.0166 244.87) 93.5%, oklch(34.71% 0.0101 240.22) 96.8%, oklch(35.04% 0.0055 237.04) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.528 | 0.054 | 194.8 |
| 2 | 0.642 | 0.048 | 215.9 |
| 3 | 0.622 | 0.052 | 251.8 |
| 4 | 0.472 | 0.066 | 263.5 |
| 5 | 0.335 | 0.047 | 264.5 |
| 6 | 0.35 | 0.006 | 237 |

## In these collections

- [Navy and teal gradients](https://grabient.com/navy-and-teal-gradients)

## Other forms

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