# Rainbow Plastic Side Fade

Blue, green, yellow and orange linear gradient with 32 colors: #2e6f8c, #2b728c, #26768c, #227a8c, #1e7f8a, #1d8488, #218985, #288e81, #33937d, #3f9879, #4b9d74, #57a270, #64a86d, #73af6a, #83b667, #93bd64, #a4c35f, #b4c95a, #c4cc54, #d3ce4c, #e0cd43, #ebc939, #f2c22d, #f7b820, #faac14, #fa9f0d, #f79111, #f3831a, #ee7623, #e96b2a, #e46231, #e15b36. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, green, yellow and orange linear gradient
- Seed: `kUgjqkUSW3Ws4uNRP7ig`
- Page: https://grabient.com/kUgjqkUSW3Ws4uNRP7ig?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 3.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 | `#2e6f8c` | `oklch(51.18% 0.0799 230.62)` | Faience | white, 5.5 to 1 |
| 2 | `#2b728c` | `oklch(51.87% 0.0811 226.39)` | Living Stream | white, 5.4 to 1 |
| 3 | `#26768c` | `oklch(52.71% 0.0825 220.91)` | Thousand Herb | white, 5.2 to 1 |
| 4 | `#227a8c` | `oklch(53.68% 0.0841 214.41)` | Bermuda | white, 4.9 to 1 |
| 5 | `#1e7f8a` | `oklch(54.78% 0.0860 207.12)` | Riviera Sea | white, 4.7 to 1 |
| 6 | `#1d8488` | `oklch(55.99% 0.0880 199.28)` | Milky Aquamarine | black, 4.6 to 1 |
| 7 | `#218985` | `oklch(57.30% 0.0903 191.11)` | Greenish Blue | black, 4.9 to 1 |
| 8 | `#288e81` | `oklch(58.69% 0.0928 182.86)` | Ocean Liner | black, 5.2 to 1 |
| 9 | `#33937d` | `oklch(60.15% 0.0956 174.76)` | Illuminating Emerald | black, 5.6 to 1 |
| 10 | `#3f9879` | `oklch(61.68% 0.0987 167.03)` | Greenway | black, 5.9 to 1 |
| 11 | `#4b9d74` | `oklch(63.25% 0.1021 159.91)` | Natural Orchestra | black, 6.3 to 1 |
| 12 | `#57a270` | `oklch(64.96% 0.1060 153.47)` | Great Gazoo | black, 6.7 to 1 |
| 13 | `#64a86d` | `oklch(67.08% 0.1105 147.29)` | Happy Cricket | black, 7.3 to 1 |
| 14 | `#73af6a` | `oklch(69.52% 0.1156 141.29)` | Alfalfa Bug | black, 8 to 1 |
| 15 | `#83b667` | `oklch(72.13% 0.1211 135.44)` | Broccoli | black, 8.8 to 1 |
| 16 | `#93bd64` | `oklch(74.78% 0.1269 129.70)` | Green Pepper | black, 9.7 to 1 |
| 17 | `#a4c35f` | `oklch(77.35% 0.1327 124.04)` | Jungle Juice | black, 10.5 to 1 |
| 18 | `#b4c95a` | `oklch(79.69% 0.1384 118.41)` | Asparagus Fern | black, 11.4 to 1 |
| 19 | `#c4cc54` | `oklch(81.68% 0.1438 112.78)` | Wild Lime | black, 12.1 to 1 |
| 20 | `#d3ce4c` | `oklch(83.19% 0.1488 107.11)` | Advertisement Green | black, 12.7 to 1 |
| 21 | `#e0cd43` | `oklch(84.07% 0.1532 101.37)` | Confetti | black, 13 to 1 |
| 22 | `#ebc939` | `oklch(84.20% 0.1568 95.48)` | Tank Yellow | black, 12.9 to 1 |
| 23 | `#f2c22d` | `oklch(83.47% 0.1600 89.17)` | Freesia | black, 12.5 to 1 |
| 24 | `#f7b820` | `oklch(82.00% 0.1627 82.50)` | Glistening Dawn | black, 11.8 to 1 |
| 25 | `#faac14` | `oklch(79.96% 0.1651 75.62)` | Tangerine Twist | black, 10.9 to 1 |
| 26 | `#fa9f0d` | `oklch(77.52% 0.1671 68.72)` | Pencil Me In | black, 9.9 to 1 |
| 27 | `#f79111` | `oklch(74.84% 0.1689 61.95)` | Jú Huáng Tangerine | black, 8.9 to 1 |
| 28 | `#f3831a` | `oklch(72.10% 0.1705 55.50)` | Consumed by Fire | black, 8 to 1 |
| 29 | `#ee7623` | `oklch(69.45% 0.1718 49.53)` | Orange Gluttony | black, 7.2 to 1 |
| 30 | `#e96b2a` | `oklch(67.07% 0.1730 44.20)` | Glazed Carrot | black, 6.5 to 1 |
| 31 | `#e46231` | `oklch(65.13% 0.1740 39.70)` | Startling Orange | black, 6 to 1 |
| 32 | `#e15b36` | `oklch(63.78% 0.1750 36.18)` | Sohi Red | black, 5.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2e6f8c 0.0%, #2b728c 3.2%, #26768c 6.5%, #227a8c 9.7%, #1e7f8a 12.9%, #1d8488 16.1%, #218985 19.4%, #288e81 22.6%, #33937d 25.8%, #3f9879 29.0%, #4b9d74 32.3%, #57a270 35.5%, #64a86d 38.7%, #73af6a 41.9%, #83b667 45.2%, #93bd64 48.4%, #a4c35f 51.6%, #b4c95a 54.8%, #c4cc54 58.1%, #d3ce4c 61.3%, #e0cd43 64.5%, #ebc939 67.7%, #f2c22d 71.0%, #f7b820 74.2%, #faac14 77.4%, #fa9f0d 80.6%, #f79111 83.9%, #f3831a 87.1%, #ee7623 90.3%, #e96b2a 93.5%, #e46231 96.8%, #e15b36 100.0%);
background: linear-gradient(90deg in oklch, oklch(51.18% 0.0799 230.62) 0.0%, oklch(51.87% 0.0811 226.39) 3.2%, oklch(52.71% 0.0825 220.91) 6.5%, oklch(53.68% 0.0841 214.41) 9.7%, oklch(54.78% 0.0860 207.12) 12.9%, oklch(55.99% 0.0880 199.28) 16.1%, oklch(57.30% 0.0903 191.11) 19.4%, oklch(58.69% 0.0928 182.86) 22.6%, oklch(60.15% 0.0956 174.76) 25.8%, oklch(61.68% 0.0987 167.03) 29.0%, oklch(63.25% 0.1021 159.91) 32.3%, oklch(64.96% 0.1060 153.47) 35.5%, oklch(67.08% 0.1105 147.29) 38.7%, oklch(69.52% 0.1156 141.29) 41.9%, oklch(72.13% 0.1211 135.44) 45.2%, oklch(74.78% 0.1269 129.70) 48.4%, oklch(77.35% 0.1327 124.04) 51.6%, oklch(79.69% 0.1384 118.41) 54.8%, oklch(81.68% 0.1438 112.78) 58.1%, oklch(83.19% 0.1488 107.11) 61.3%, oklch(84.07% 0.1532 101.37) 64.5%, oklch(84.20% 0.1568 95.48) 67.7%, oklch(83.47% 0.1600 89.17) 71.0%, oklch(82.00% 0.1627 82.50) 74.2%, oklch(79.96% 0.1651 75.62) 77.4%, oklch(77.52% 0.1671 68.72) 80.6%, oklch(74.84% 0.1689 61.95) 83.9%, oklch(72.10% 0.1705 55.50) 87.1%, oklch(69.45% 0.1718 49.53) 90.3%, oklch(67.07% 0.1730 44.20) 93.5%, oklch(65.13% 0.1740 39.70) 96.8%, oklch(63.78% 0.1750 36.18) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.512 | 0.08 | 230.6 |
| 2 | 0.638 | 0.103 | 157.7 |
| 3 | 0.843 | 0.156 | 97.5 |
| 4 | 0.638 | 0.175 | 36.2 |

## In these collections

- [Throwback kid](https://grabient.com/throwback-kid)

## Other forms

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