# Violet through spectrum to red The Violet through spectrum to red brings together purple, blue, teal, green, orange, and red. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits travel posters and environmental mood boards. Its darkest tone is purple, and its lightest tone is orange. - Also called: Rainbow from purple to pink linear gradient - Seed: `kYfpXSwMG8NYpujYPjgXLq1EvFuw` - Page: https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw?steps=32&angle=135 - Drawn as: linear gradient, 32 steps, 135 degrees - Kinds: vivid, rainbow - Hues: split-complementary - Contrast of its darkest and lightest colors: 2.7 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 | `#7139c6` | `oklch(49.61% 0.2053 296.02)` | Purple Rain | white, 6.7 to 1 | | 2 | `#6b3cc8` | `oklch(49.56% 0.2032 292.89)` | Dragonlord Purple | white, 6.7 to 1 | | 3 | `#6340c9` | `oklch(49.34% 0.2006 288.73)` | Dragonlord Purple | white, 6.7 to 1 | | 4 | `#5944ca` | `oklch(49.15% 0.1974 283.74)` | Dragonlord Purple | white, 6.7 to 1 | | 5 | `#4e49ca` | `oklch(49.16% 0.1934 278.10)` | Iris | white, 6.6 to 1 | | 6 | `#4150cb` | `oklch(49.55% 0.1883 271.99)` | Gorgonzola Blue | white, 6.4 to 1 | | 7 | `#3259cb` | `oklch(50.51% 0.1819 265.61)` | Free Speech Blue | white, 6.1 to 1 | | 8 | `#2065cb` | `oklch(52.31% 0.1731 259.00)` | Janitor | white, 5.5 to 1 | | 9 | `#0a72cb` | `oklch(55.01% 0.1607 251.97)` | Wizard Blue | white, 4.8 to 1 | | 10 | `#0081ca` | `oklch(58.22% 0.1451 244.53)` | Lvivian Rain | black, 4.9 to 1 | | 11 | `#038fca` | `oklch(61.56% 0.1330 236.60)` | Parrotfish Blue | black, 5.7 to 1 | | 12 | `#179bc8` | `oklch(64.62% 0.1218 228.23)` | Isle of Capri | black, 6.5 to 1 | | 13 | `#20a5c5` | `oklch(67.03% 0.1153 219.38)` | True Sky Blue | black, 7.2 to 1 | | 14 | `#16acc1` | `oklch(68.47% 0.1153 210.08)` | Future | black, 7.7 to 1 | | 15 | `#00b1b9` | `oklch(69.17% 0.1176 200.43)` | Marrakech Mile | black, 7.9 to 1 | | 16 | `#00b4ad` | `oklch(69.36% 0.1196 190.35)` | Glass Jar Blue | black, 8 to 1 | | 17 | `#00b59f` | `oklch(69.28% 0.1259 179.75)` | Aare River | black, 8.1 to 1 | | 18 | `#00b78c` | `oklch(69.13% 0.1391 168.55)` | Green Velour | black, 8.1 to 1 | | 19 | `#00b970` | `oklch(69.13% 0.1657 156.64)` | Fennel Fiesta | black, 8.1 to 1 | | 20 | `#4eb750` | `oklch(69.50% 0.1720 143.81)` | Classic Green | black, 8.2 to 1 | | 21 | `#7db327` | `oklch(70.29% 0.1724 129.08)` | Natural Order | black, 8.3 to 1 | | 22 | `#a4ac00` | `oklch(71.30% 0.1591 113.05)` | Honey and Thyme | black, 8.4 to 1 | | 23 | `#c0a400` | `oklch(72.27% 0.1489 96.68)` | Sulphine Yellow | black, 8.5 to 1 | | 24 | `#d89c00` | `oklch(72.99% 0.1508 80.92)` | Orange Satisfaction | black, 8.6 to 1 | | 25 | `#ea9106` | `oklch(73.19% 0.1610 66.75)` | Carrot Orange | black, 8.5 to 1 | | 26 | `#f2872e` | `oklch(72.65% 0.1616 55.07)` | Creole Sauce | black, 8.2 to 1 | | 27 | `#f37b3e` | `oklch(71.11% 0.1650 45.40)` | Mandarin | black, 7.7 to 1 | | 28 | `#f06e47` | `oklch(68.79% 0.1703 37.15)` | Fiery Sky | black, 7 to 1 | | 29 | `#ea5f4c` | `oklch(66.09% 0.1764 30.20)` | Opal Flame | black, 6.2 to 1 | | 30 | `#e45150` | `oklch(63.37% 0.1826 24.43)` | Red Arremer | black, 5.5 to 1 | | 31 | `#dd4553` | `oklch(61.03% 0.1879 19.73)` | Celestial Coral | black, 5 to 1 | | 32 | `#d83c56` | `oklch(59.45% 0.1915 15.98)` | Teaberry | black, 4.7 to 1 | ## CSS ```css background: linear-gradient(135deg, #7139c6 0.0%, #6b3cc8 3.2%, #6340c9 6.5%, #5944ca 9.7%, #4e49ca 12.9%, #4150cb 16.1%, #3259cb 19.4%, #2065cb 22.6%, #0a72cb 25.8%, #0081ca 29.0%, #038fca 32.3%, #179bc8 35.5%, #20a5c5 38.7%, #16acc1 41.9%, #00b1b9 45.2%, #00b4ad 48.4%, #00b59f 51.6%, #00b78c 54.8%, #00b970 58.1%, #4eb750 61.3%, #7db327 64.5%, #a4ac00 67.7%, #c0a400 71.0%, #d89c00 74.2%, #ea9106 77.4%, #f2872e 80.6%, #f37b3e 83.9%, #f06e47 87.1%, #ea5f4c 90.3%, #e45150 93.5%, #dd4553 96.8%, #d83c56 100.0%); background: linear-gradient(135deg in oklch, oklch(49.61% 0.2053 296.02) 0.0%, oklch(49.56% 0.2032 292.89) 3.2%, oklch(49.34% 0.2006 288.73) 6.5%, oklch(49.15% 0.1974 283.74) 9.7%, oklch(49.16% 0.1934 278.10) 12.9%, oklch(49.55% 0.1883 271.99) 16.1%, oklch(50.51% 0.1819 265.61) 19.4%, oklch(52.31% 0.1731 259.00) 22.6%, oklch(55.01% 0.1607 251.97) 25.8%, oklch(58.22% 0.1451 244.53) 29.0%, oklch(61.56% 0.1330 236.60) 32.3%, oklch(64.62% 0.1218 228.23) 35.5%, oklch(67.03% 0.1153 219.38) 38.7%, oklch(68.47% 0.1153 210.08) 41.9%, oklch(69.17% 0.1176 200.43) 45.2%, oklch(69.36% 0.1196 190.35) 48.4%, oklch(69.28% 0.1259 179.75) 51.6%, oklch(69.13% 0.1391 168.55) 54.8%, oklch(69.13% 0.1657 156.64) 58.1%, oklch(69.50% 0.1720 143.81) 61.3%, oklch(70.29% 0.1724 129.08) 64.5%, oklch(71.30% 0.1591 113.05) 67.7%, oklch(72.27% 0.1489 96.68) 71.0%, oklch(72.99% 0.1508 80.92) 74.2%, oklch(73.19% 0.1610 66.75) 77.4%, oklch(72.65% 0.1616 55.07) 80.6%, oklch(71.11% 0.1650 45.40) 83.9%, oklch(68.79% 0.1703 37.15) 87.1%, oklch(66.09% 0.1764 30.20) 90.3%, oklch(63.37% 0.1826 24.43) 93.5%, oklch(61.03% 0.1879 19.73) 96.8%, oklch(59.45% 0.1915 15.98) 100.0%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.496 | 0.205 | 296 | | 2 | 0.508 | 0.181 | 264.3 | | 3 | 0.677 | 0.114 | 215.7 | | 4 | 0.693 | 0.171 | 149.1 | | 5 | 0.728 | 0.161 | 57.2 | | 6 | 0.594 | 0.192 | 16 | ## In these collections - [Rainbow gradients](https://grabient.com/rainbow-gradients) ## Other forms - [JSON](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.json?steps=32&angle=135) - [PNG](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.png?steps=32&angle=135) - [SVG](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.svg?steps=32&angle=135) - [CSS](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.css?steps=32&angle=135) - [ASE](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.ase?steps=32&angle=135) - [GPL](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.gpl?steps=32&angle=135) - [GRD](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.grd?steps=32&angle=135) - [Design tokens](https://grabient.com/kYfpXSwMG8NYpujYPjgXLq1EvFuw.tokens.json?steps=32&angle=135) - [Social card](https://grabient.com/api/og?seed=kYfpXSwMG8NYpujYPjgXLq1EvFuw&steps=32&angle=135) - [Palettes like this one](https://grabient.com/palettes?q=kYfpXSwMG8NYpujYPjgXLq1EvFuw) - [Guide for agents](https://grabient.com/llms.txt)