# Retro orange avocado and sunny yellow bloom

Orange, red, teal and green linear gradient with 32 colors: #f3a63b, #f4a138, #f69835, #f98e37, #fa823c, #fa7545, #f8694d, #f55f53, #f05655, #eb4f51, #e64c45, #df4e2b, #cc5b00, #b06a00, #967300, #797a00, #51802c, #278152, #007f6b, #097c7a, #207b83, #2b7e89, #31848f, #348f93, #3a9c95, #47aa93, #60b88c, #80c380, #a3cc72, #c5d265, #e1d55d, #f4d85a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Orange, red, teal and green linear gradient
- Seed: `kUx2syz8U68UdVRwNTLA`
- Page: https://grabient.com/kUx2syz8U68UdVRwNTLA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#f3a63b` | `oklch(78.35% 0.1474 71.02)` | Acorn Squash | black, 10.3 to 1 |
| 2 | `#f4a138` | `oklch(77.41% 0.1505 67.66)` | Yellow Sea | black, 9.9 to 1 |
| 3 | `#f69835` | `oklch(76.18% 0.1553 62.16)` | Chat Orange | black, 9.4 to 1 |
| 4 | `#f98e37` | `oklch(74.70% 0.1613 55.23)` | Fire Flower | black, 8.9 to 1 |
| 5 | `#fa823c` | `oklch(73.05% 0.1679 47.58)` | Beniukon Bronze | black, 8.3 to 1 |
| 6 | `#fa7545` | `oklch(71.29% 0.1746 39.94)` | Precious Persimmon | black, 7.7 to 1 |
| 7 | `#f8694d` | `oklch(69.48% 0.1809 33.02)` | Sango Red | black, 7.1 to 1 |
| 8 | `#f55f53` | `oklch(67.68% 0.1862 27.52)` | Hot Coral | black, 6.6 to 1 |
| 9 | `#f05655` | `oklch(65.96% 0.1900 24.18)` | Khmer Curry | black, 6.1 to 1 |
| 10 | `#eb4f51` | `oklch(64.38% 0.1918 23.70)` | Fever | black, 5.7 to 1 |
| 11 | `#e64c45` | `oklch(63.00% 0.1911 26.79)` | Furious Piñata | black, 5.4 to 1 |
| 12 | `#df4e2b` | `oklch(61.77% 0.1870 34.60)` | Scoville High | black, 5.2 to 1 |
| 13 | `#cc5b00` | `oklch(60.38% 0.1641 48.15)` | Rusty Orange | black, 5 to 1 |
| 14 | `#b06a00` | `oklch(58.89% 0.1308 66.27)` | Pumpkin Spice | black, 4.9 to 1 |
| 15 | `#967300` | `oklch(57.40% 0.1174 87.55)` | Sandy Taupe | black, 4.7 to 1 |
| 16 | `#797a00` | `oklch(56.00% 0.1227 110.59)` | Mongolian Plateau | black, 4.5 to 1 |
| 17 | `#51802c` | `oklch(54.79% 0.1263 133.99)` | Emerald Clear Green | white, 4.6 to 1 |
| 18 | `#278152` | `oklch(53.85% 0.1122 156.38)` | Kākāriki Green | white, 4.8 to 1 |
| 19 | `#007f6b` | `oklch(53.29% 0.0993 176.35)` | Mediaeval Forest | white, 4.9 to 1 |
| 20 | `#097c7a` | `oklch(53.19% 0.0894 192.55)` | Parasailing | white, 5 to 1 |
| 21 | `#207b83` | `oklch(53.66% 0.0824 203.56)` | Caribe | white, 4.9 to 1 |
| 22 | `#2b7e89` | `oklch(54.80% 0.0794 208.08)` | Sea Swimmer | white, 4.7 to 1 |
| 23 | `#31848f` | `oklch(56.88% 0.0803 206.39)` | Sea Bed | black, 4.8 to 1 |
| 24 | `#348f93` | `oklch(59.79% 0.0842 199.69)` | Aqueous | black, 5.4 to 1 |
| 25 | `#3a9c95` | `oklch(63.33% 0.0905 189.06)` | Dreamy Teal | black, 6.3 to 1 |
| 26 | `#47aa93` | `oklch(67.28% 0.0986 175.61)` | Jewel Weed | black, 7.4 to 1 |
| 27 | `#60b88c` | `oklch(71.44% 0.1077 160.41)` | Crazy Eyes | black, 8.6 to 1 |
| 28 | `#80c380` | `oklch(75.61% 0.1172 144.56)` | Garden Stroll | black, 10 to 1 |
| 29 | `#a3cc72` | `oklch(79.57% 0.1264 129.14)` | Lick of Lime | black, 11.4 to 1 |
| 30 | `#c5d265` | `oklch(83.13% 0.1348 115.24)` | Soft Fern | black, 12.7 to 1 |
| 31 | `#e1d55d` | `oklch(86.07% 0.1415 103.96)` | Species | black, 13.9 to 1 |
| 32 | `#f4d85a` | `oklch(88.19% 0.1461 96.38)` | Energy Yellow | black, 14.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f3a63b 0.0%, #f4a138 3.2%, #f69835 6.5%, #f98e37 9.7%, #fa823c 12.9%, #fa7545 16.1%, #f8694d 19.4%, #f55f53 22.6%, #f05655 25.8%, #eb4f51 29.0%, #e64c45 32.3%, #df4e2b 35.5%, #cc5b00 38.7%, #b06a00 41.9%, #967300 45.2%, #797a00 48.4%, #51802c 51.6%, #278152 54.8%, #007f6b 58.1%, #097c7a 61.3%, #207b83 64.5%, #2b7e89 67.7%, #31848f 71.0%, #348f93 74.2%, #3a9c95 77.4%, #47aa93 80.6%, #60b88c 83.9%, #80c380 87.1%, #a3cc72 90.3%, #c5d265 93.5%, #e1d55d 96.8%, #f4d85a 100.0%);
background: linear-gradient(135deg in oklch, oklch(78.35% 0.1474 71.02) 0.0%, oklch(77.41% 0.1505 67.66) 3.2%, oklch(76.18% 0.1553 62.16) 6.5%, oklch(74.70% 0.1613 55.23) 9.7%, oklch(73.05% 0.1679 47.58) 12.9%, oklch(71.29% 0.1746 39.94) 16.1%, oklch(69.48% 0.1809 33.02) 19.4%, oklch(67.68% 0.1862 27.52) 22.6%, oklch(65.96% 0.1900 24.18) 25.8%, oklch(64.38% 0.1918 23.70) 29.0%, oklch(63.00% 0.1911 26.79) 32.3%, oklch(61.77% 0.1870 34.60) 35.5%, oklch(60.38% 0.1641 48.15) 38.7%, oklch(58.89% 0.1308 66.27) 41.9%, oklch(57.40% 0.1174 87.55) 45.2%, oklch(56.00% 0.1227 110.59) 48.4%, oklch(54.79% 0.1263 133.99) 51.6%, oklch(53.85% 0.1122 156.38) 54.8%, oklch(53.29% 0.0993 176.35) 58.1%, oklch(53.19% 0.0894 192.55) 61.3%, oklch(53.66% 0.0824 203.56) 64.5%, oklch(54.80% 0.0794 208.08) 67.7%, oklch(56.88% 0.0803 206.39) 71.0%, oklch(59.79% 0.0842 199.69) 74.2%, oklch(63.33% 0.0905 189.06) 77.4%, oklch(67.28% 0.0986 175.61) 80.6%, oklch(71.44% 0.1077 160.41) 83.9%, oklch(75.61% 0.1172 144.56) 87.1%, oklch(79.57% 0.1264 129.14) 90.3%, oklch(83.13% 0.1348 115.24) 93.5%, oklch(86.07% 0.1415 103.96) 96.8%, oklch(88.19% 0.1461 96.38) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.783 | 0.147 | 71 |
| 2 | 0.626 | 0.19 | 28.7 |
| 3 | 0.543 | 0.08 | 207.3 |
| 4 | 0.882 | 0.146 | 96.4 |

## In these collections

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

## Other forms

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