# Vivid duotone orange to green linear gradient Vivid duotone orange to green linear gradient with 32 colors: #fe4d39, #fe5238, #ff5737, #ff5e38, #ff6539, #ff6c38, #ff7235, #fe7831, #fb7e2b, #f78522, #f08c19, #e89213, #df9914, #d69e1b, #cda423, #c5a929, #beae2d, #b7b32e, #b0b82f, #a7be2f, #9ec432, #93ca37, #87d03d, #7ad646, #6fdb4e, #65e055, #5ce55b, #54ea60, #4def64, #47f368, #40f66b, #39f96e. Edit it and copy or download CSS, SVG, PNG or shader code. - Seed: `kWqp0V3EDCF4zRfkyMR7dXBI` - Page: https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: vivid - Hues: wide - Contrast of its darkest and lightest colors: 2.3 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 | `#fe4d39` | `oklch(66.93% 0.2163 30.23)` | Orange Dusk | black, 6.3 to 1 | | 2 | `#fe5238` | `oklch(67.40% 0.2132 31.44)` | Ogre Odour | black, 6.4 to 1 | | 3 | `#ff5737` | `oklch(68.06% 0.2091 32.79)` | Poppy Surprise | black, 6.6 to 1 | | 4 | `#ff5e38` | `oklch(68.84% 0.2033 34.38)` | Toxic Orange | black, 6.9 to 1 | | 5 | `#ff6539` | `oklch(69.69% 0.1970 36.31)` | Halloween | black, 7.1 to 1 | | 6 | `#ff6c38` | `oklch(70.55% 0.1913 38.68)` | Smashed Pumpkin | black, 7.4 to 1 | | 7 | `#ff7235` | `oklch(71.35% 0.1870 41.57)` | Extreme Carrot | black, 7.6 to 1 | | 8 | `#fe7831` | `oklch(72.04% 0.1816 45.09)` | Temptatious Tangerine | black, 7.9 to 1 | | 9 | `#fb7e2b` | `oklch(72.55% 0.1765 49.35)` | Orange You Happy? | black, 8.1 to 1 | | 10 | `#f78522` | `oklch(72.88% 0.1706 54.66)` | Glorious Sunset | black, 8.3 to 1 | | 11 | `#f08c19` | `oklch(73.08% 0.1640 60.91)` | Elden Ring Orange | black, 8.4 to 1 | | 12 | `#e89213` | `oklch(73.20% 0.1571 67.80)` | Carrot Orange | black, 8.5 to 1 | | 13 | `#df9914` | `oklch(73.28% 0.1507 75.04)` | Golden Key | black, 8.6 to 1 | | 14 | `#d69e1b` | `oklch(73.38% 0.1454 82.34)` | Glitzy Gold | black, 8.7 to 1 | | 15 | `#cda423` | `oklch(73.55% 0.1417 89.41)` | Lemon Curry | black, 8.9 to 1 | | 16 | `#c5a929` | `oklch(73.82% 0.1402 95.94)` | Hippie Trail | black, 9 to 1 | | 17 | `#beae2d` | `oklch(74.24% 0.1417 101.79)` | Sharp Lime | black, 9.2 to 1 | | 18 | `#b7b32e` | `oklch(74.75% 0.1463 107.50)` | Citronelle | black, 9.5 to 1 | | 19 | `#b0b82f` | `oklch(75.34% 0.1534 113.10)` | Lush Bamboo | black, 9.7 to 1 | | 20 | `#a7be2f` | `oklch(75.98% 0.1621 118.50)` | Pea | black, 10 to 1 | | 21 | `#9ec432` | `oklch(76.67% 0.1717 123.60)` | Android Green | black, 10.4 to 1 | | 22 | `#93ca37` | `oklch(77.40% 0.1814 128.31)` | Midsummer Field | black, 10.7 to 1 | | 23 | `#87d03d` | `oklch(78.16% 0.1905 132.53)` | Overgrowth | black, 11.1 to 1 | | 24 | `#7ad646` | `oklch(78.94% 0.1982 136.16)` | Fresh Green | black, 11.4 to 1 | | 25 | `#6fdb4e` | `oklch(79.77% 0.2043 139.12)` | Fresh Green | black, 11.8 to 1 | | 26 | `#65e055` | `oklch(80.74% 0.2102 141.42)` | Lightish Green | black, 12.3 to 1 | | 27 | `#5ce55b` | `oklch(81.79% 0.2157 143.17)` | Lightish Green | black, 12.8 to 1 | | 28 | `#54ea60` | `oklch(82.86% 0.2208 144.49)` | Toxic Slime | black, 13.3 to 1 | | 29 | `#4def64` | `oklch(83.90% 0.2254 145.47)` | Acid Pops | black, 13.8 to 1 | | 30 | `#47f368` | `oklch(84.85% 0.2295 146.24)` | Synthetic Spearmint | black, 14.2 to 1 | | 31 | `#40f66b` | `oklch(85.64% 0.2329 146.89)` | Synthetic Spearmint | black, 14.6 to 1 | | 32 | `#39f96e` | `oklch(86.22% 0.2356 147.53)` | Synthetic Spearmint | black, 14.9 to 1 | ## CSS ```css background: linear-gradient(90deg, #fe4d39 0.0%, #fe5238 3.2%, #ff5737 6.5%, #ff5e38 9.7%, #ff6539 12.9%, #ff6c38 16.1%, #ff7235 19.4%, #fe7831 22.6%, #fb7e2b 25.8%, #f78522 29.0%, #f08c19 32.3%, #e89213 35.5%, #df9914 38.7%, #d69e1b 41.9%, #cda423 45.2%, #c5a929 48.4%, #beae2d 51.6%, #b7b32e 54.8%, #b0b82f 58.1%, #a7be2f 61.3%, #9ec432 64.5%, #93ca37 67.7%, #87d03d 71.0%, #7ad646 74.2%, #6fdb4e 77.4%, #65e055 80.6%, #5ce55b 83.9%, #54ea60 87.1%, #4def64 90.3%, #47f368 93.5%, #40f66b 96.8%, #39f96e 100.0%); background: linear-gradient(90deg in oklch, oklch(66.93% 0.2163 30.23) 0.0%, oklch(67.40% 0.2132 31.44) 3.2%, oklch(68.06% 0.2091 32.79) 6.5%, oklch(68.84% 0.2033 34.38) 9.7%, oklch(69.69% 0.1970 36.31) 12.9%, oklch(70.55% 0.1913 38.68) 16.1%, oklch(71.35% 0.1870 41.57) 19.4%, oklch(72.04% 0.1816 45.09) 22.6%, oklch(72.55% 0.1765 49.35) 25.8%, oklch(72.88% 0.1706 54.66) 29.0%, oklch(73.08% 0.1640 60.91) 32.3%, oklch(73.20% 0.1571 67.80) 35.5%, oklch(73.28% 0.1507 75.04) 38.7%, oklch(73.38% 0.1454 82.34) 41.9%, oklch(73.55% 0.1417 89.41) 45.2%, oklch(73.82% 0.1402 95.94) 48.4%, oklch(74.24% 0.1417 101.79) 51.6%, oklch(74.75% 0.1463 107.50) 54.8%, oklch(75.34% 0.1534 113.10) 58.1%, oklch(75.98% 0.1621 118.50) 61.3%, oklch(76.67% 0.1717 123.60) 64.5%, oklch(77.40% 0.1814 128.31) 67.7%, oklch(78.16% 0.1905 132.53) 71.0%, oklch(78.94% 0.1982 136.16) 74.2%, oklch(79.77% 0.2043 139.12) 77.4%, oklch(80.74% 0.2102 141.42) 80.6%, oklch(81.79% 0.2157 143.17) 83.9%, oklch(82.86% 0.2208 144.49) 87.1%, oklch(83.90% 0.2254 145.47) 90.3%, oklch(84.85% 0.2295 146.24) 93.5%, oklch(85.64% 0.2329 146.89) 96.8%, oklch(86.22% 0.2356 147.53) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.669 | 0.216 | 30.2 | | 2 | 0.724 | 0.178 | 48.2 | | 3 | 0.74 | 0.141 | 98.9 | | 4 | 0.791 | 0.2 | 137 | | 5 | 0.862 | 0.236 | 147.5 | ## In these collections - [Red and green gradients](https://grabient.com/red-and-green-gradients) ## Other forms - [JSON](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.json?steps=32) - [PNG](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.png?steps=32) - [SVG](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.svg?steps=32) - [CSS](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.css?steps=32) - [ASE](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.ase?steps=32) - [GPL](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.gpl?steps=32) - [GRD](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.grd?steps=32) - [Design tokens](https://grabient.com/kWqp0V3EDCF4zRfkyMR7dXBI.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kWqp0V3EDCF4zRfkyMR7dXBI&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kWqp0V3EDCF4zRfkyMR7dXBI) - [Guide for agents](https://grabient.com/llms.txt)