# Coral gear and river foam

Orange, light blue, teal and gray linear gradient with 32 colors: #f15a26, #ed554c, #e3526e, #d2538e, #b958a8, #9b5fb9, #7a66bf, #596dba, #3b72ae, #2075a0, #0f7894, #0c7a8d, #117e8b, #15828c, #188891, #1a8e97, #1c95a0, #209da9, #26a4b2, #2facb9, #3ab3bf, #47bac1, #58c1c3, #6bc8c3, #7fcfc4, #94d6c7, #a7dcca, #b9e2cf, #c9e7d5, #d6ecdc, #e0f0e2, #e8f3e8. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Orange, light blue, teal and gray linear gradient
- Seed: `kUqI4bQ6Iq1ulvf5Bzkg`
- Page: https://grabient.com/kUqI4bQ6Iq1ulvf5Bzkg?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark center, vivid, cool
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 4.4 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 | `#f15a26` | `oklch(66.14% 0.1957 37.97)` | Prometheus Orange | black, 6.2 to 1 |
| 2 | `#ed554c` | `oklch(65.26% 0.1894 27.05)` | Amour | black, 6 to 1 |
| 3 | `#e3526e` | `oklch(63.96% 0.1807 12.20)` | Camellia Rose | black, 5.6 to 1 |
| 4 | `#d2538e` | `oklch(62.37% 0.1702 354.34)` | Pretty in Plum | black, 5.3 to 1 |
| 5 | `#b958a8` | `oklch(60.59% 0.1585 334.40)` | Mazzy Star | black, 5 to 1 |
| 6 | `#9b5fb9` | `oklch(58.77% 0.1462 313.29)` | Trunks Hair | black, 4.7 to 1 |
| 7 | `#7a66bf` | `oklch(57.01% 0.1338 291.96)` | Ultra Violet | white, 4.6 to 1 |
| 8 | `#596dba` | `oklch(55.44% 0.1219 271.32)` | Amparo Blue | white, 4.8 to 1 |
| 9 | `#3b72ae` | `oklch(54.18% 0.1112 252.29)` | Athens | white, 5 to 1 |
| 10 | `#2075a0` | `oklch(53.36% 0.1021 235.80)` | In the Mood | white, 5.1 to 1 |
| 11 | `#0f7894` | `oklch(53.09% 0.0954 222.79)` | Celestial | white, 5.1 to 1 |
| 12 | `#0c7a8d` | `oklch(53.46% 0.0914 213.80)` | Bimini Blue | white, 5 to 1 |
| 13 | `#117e8b` | `oklch(54.34% 0.0899 207.92)` | Metallic Seaweed | white, 4.8 to 1 |
| 14 | `#15828c` | `oklch(55.65% 0.0906 204.52)` | Riviera Sea | black, 4.6 to 1 |
| 15 | `#188891` | `oklch(57.32% 0.0927 203.07)` | Tuscana Blue | black, 4.9 to 1 |
| 16 | `#1a8e97` | `oklch(59.28% 0.0957 203.01)` | Tempo Teal | black, 5.3 to 1 |
| 17 | `#1c95a0` | `oklch(61.44% 0.0991 203.79)` | Aqua Lake | black, 5.8 to 1 |
| 18 | `#209da9` | `oklch(63.73% 0.1023 204.87)` | Riviera | black, 6.4 to 1 |
| 19 | `#26a4b2` | `oklch(66.07% 0.1048 205.69)` | Marine Tinge | black, 7 to 1 |
| 20 | `#2facb9` | `oklch(68.41% 0.1059 205.71)` | Placid Sea | black, 7.7 to 1 |
| 21 | `#3ab3bf` | `oklch(70.64% 0.1052 204.38)` | Glassmith | black, 8.3 to 1 |
| 22 | `#47bac1` | `oklch(72.74% 0.1020 201.21)` | Montego Bay | black, 9 to 1 |
| 23 | `#58c1c3` | `oklch(75.00% 0.0965 196.66)` | Gem Turquoise | black, 9.8 to 1 |
| 24 | `#6bc8c3` | `oklch(77.46% 0.0890 191.18)` | Nile Stone | black, 10.6 to 1 |
| 25 | `#7fcfc4` | `oklch(80.04% 0.0802 185.02)` | Blue Green Gem | black, 11.6 to 1 |
| 26 | `#94d6c7` | `oklch(82.67% 0.0704 178.46)` | Pop Shop | black, 12.6 to 1 |
| 27 | `#a7dcca` | `oklch(85.27% 0.0602 171.77)` | Prism | black, 13.7 to 1 |
| 28 | `#b9e2cf` | `oklch(87.77% 0.0500 165.19)` | Desert Mirage | black, 14.8 to 1 |
| 29 | `#c9e7d5` | `oklch(90.10% 0.0404 159.00)` | Mint Smoothie | black, 15.8 to 1 |
| 30 | `#d6ecdc` | `oklch(92.18% 0.0317 153.46)` | Light Duck Egg Cream | black, 16.8 to 1 |
| 31 | `#e0f0e2` | `oklch(93.93% 0.0245 148.84)` | Ice-Cold White | black, 17.7 to 1 |
| 32 | `#e8f3e8` | `oklch(95.28% 0.0193 145.41)` | Aqua Spring | black, 18.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #f15a26 0.0%, #ed554c 3.2%, #e3526e 6.5%, #d2538e 9.7%, #b958a8 12.9%, #9b5fb9 16.1%, #7a66bf 19.4%, #596dba 22.6%, #3b72ae 25.8%, #2075a0 29.0%, #0f7894 32.3%, #0c7a8d 35.5%, #117e8b 38.7%, #15828c 41.9%, #188891 45.2%, #1a8e97 48.4%, #1c95a0 51.6%, #209da9 54.8%, #26a4b2 58.1%, #2facb9 61.3%, #3ab3bf 64.5%, #47bac1 67.7%, #58c1c3 71.0%, #6bc8c3 74.2%, #7fcfc4 77.4%, #94d6c7 80.6%, #a7dcca 83.9%, #b9e2cf 87.1%, #c9e7d5 90.3%, #d6ecdc 93.5%, #e0f0e2 96.8%, #e8f3e8 100.0%);
background: linear-gradient(45deg in oklch, oklch(66.14% 0.1957 37.97) 0.0%, oklch(65.26% 0.1894 27.05) 3.2%, oklch(63.96% 0.1807 12.20) 6.5%, oklch(62.37% 0.1702 354.34) 9.7%, oklch(60.59% 0.1585 334.40) 12.9%, oklch(58.77% 0.1462 313.29) 16.1%, oklch(57.01% 0.1338 291.96) 19.4%, oklch(55.44% 0.1219 271.32) 22.6%, oklch(54.18% 0.1112 252.29) 25.8%, oklch(53.36% 0.1021 235.80) 29.0%, oklch(53.09% 0.0954 222.79) 32.3%, oklch(53.46% 0.0914 213.80) 35.5%, oklch(54.34% 0.0899 207.92) 38.7%, oklch(55.65% 0.0906 204.52) 41.9%, oklch(57.32% 0.0927 203.07) 45.2%, oklch(59.28% 0.0957 203.01) 48.4%, oklch(61.44% 0.0991 203.79) 51.6%, oklch(63.73% 0.1023 204.87) 54.8%, oklch(66.07% 0.1048 205.69) 58.1%, oklch(68.41% 0.1059 205.71) 61.3%, oklch(70.64% 0.1052 204.38) 64.5%, oklch(72.74% 0.1020 201.21) 67.7%, oklch(75.00% 0.0965 196.66) 71.0%, oklch(77.46% 0.0890 191.18) 74.2%, oklch(80.04% 0.0802 185.02) 77.4%, oklch(82.67% 0.0704 178.46) 80.6%, oklch(85.27% 0.0602 171.77) 83.9%, oklch(87.77% 0.0500 165.19) 87.1%, oklch(90.10% 0.0404 159.00) 90.3%, oklch(92.18% 0.0317 153.46) 93.5%, oklch(93.93% 0.0245 148.84) 96.8%, oklch(95.28% 0.0193 145.41) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.661 | 0.196 | 38 |
| 2 | 0.531 | 0.094 | -140.6 |
| 3 | 0.72 | 0.103 | -157.5 |
| 4 | 0.953 | 0.019 | -214.6 |

## In these collections

- [Darecations](https://grabient.com/darecations)

## Other forms

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