# Dark purple to gray linear gradient Dark purple to gray linear gradient with 32 colors: #2e0f32, #301033, #321133, #341334, #371434, #3a1635, #3d1836, #401a36, #431c38, #461f3a, #49223c, #4c253f, #4f2942, #522d46, #56314a, #59364e, #5c3a53, #5f3f58, #63445d, #664962, #684d68, #6b516d, #6d5673, #6f5b79, #705f80, #716487, #71698d, #716e93, #717399, #70779d, #707ba1, #707da3. Edit it and copy or download CSS, SVG, PNG or shader code. - Seed: `kUPDblqJnCLuTvfLljlA` - Page: https://grabient.com/kUPDblqJnCLuTvfLljlA?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: dark to light, muted - Hues: analogous - Contrast of its darkest and lightest colors: 4.1 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 | `#2e0f32` | `oklch(23.62% 0.0744 322.73)` | Dark Prom Queen | white, 17 to 1 | | 2 | `#301033` | `oklch(24.07% 0.0742 323.98)` | Synallactida | white, 16.8 to 1 | | 3 | `#321133` | `oklch(24.60% 0.0741 325.76)` | Synallactida | white, 16.6 to 1 | | 4 | `#341334` | `oklch(25.22% 0.0739 327.94)` | Cultist Robe | white, 16.3 to 1 | | 5 | `#371434` | `oklch(25.91% 0.0737 330.36)` | Nightly Voyager | white, 16 to 1 | | 6 | `#3a1635` | `oklch(26.69% 0.0734 332.88)` | Nightly Voyager | white, 15.6 to 1 | | 7 | `#3d1836` | `oklch(27.53% 0.0731 335.35)` | Nightly Voyager | white, 15.2 to 1 | | 8 | `#401a36` | `oklch(28.44% 0.0727 337.61)` | Blackberry | white, 14.8 to 1 | | 9 | `#431c38` | `oklch(29.41% 0.0721 339.52)` | Juice Violet | white, 14.3 to 1 | | 10 | `#461f3a` | `oklch(30.44% 0.0714 340.92)` | Juice Violet | white, 13.8 to 1 | | 11 | `#49223c` | `oklch(31.52% 0.0706 341.68)` | Prestige Mauve | white, 13.3 to 1 | | 12 | `#4c253f` | `oklch(32.67% 0.0695 341.76)` | Prestige Mauve | white, 12.7 to 1 | | 13 | `#4f2942` | `oklch(33.95% 0.0681 341.49)` | Potent Purple | white, 12.1 to 1 | | 14 | `#522d46` | `oklch(35.33% 0.0663 340.91)` | Potent Purple | white, 11.5 to 1 | | 15 | `#56314a` | `oklch(36.80% 0.0644 340.00)` | Winter Bloom | white, 10.8 to 1 | | 16 | `#59364e` | `oklch(38.32% 0.0623 338.75)` | Italian Plum | white, 10.2 to 1 | | 17 | `#5c3a53` | `oklch(39.88% 0.0603 337.15)` | Bruised Bear | white, 9.5 to 1 | | 18 | `#5f3f58` | `oklch(41.44% 0.0584 335.19)` | Mature Grape | white, 8.9 to 1 | | 19 | `#63445d` | `oklch(42.99% 0.0566 332.88)` | Grape Fizz | white, 8.3 to 1 | | 20 | `#664962` | `oklch(44.50% 0.0552 330.19)` | Bunchberry | white, 7.8 to 1 | | 21 | `#684d68` | `oklch(45.94% 0.0542 327.11)` | Vicarious Violet | white, 7.3 to 1 | | 22 | `#6b516d` | `oklch(47.30% 0.0536 323.60)` | Basil Mauve | white, 6.9 to 1 | | 23 | `#6d5673` | `oklch(48.68% 0.0535 319.13)` | Basil Mauve | white, 6.5 to 1 | | 24 | `#6f5b79` | `oklch(50.10% 0.0538 313.74)` | Princely Violet | white, 6.1 to 1 | | 25 | `#705f80` | `oklch(51.53% 0.0545 307.70)` | Grape Compote | white, 5.7 to 1 | | 26 | `#716487` | `oklch(52.94% 0.0553 301.27)` | Posy Purple | white, 5.4 to 1 | | 27 | `#71698d` | `oklch(54.31% 0.0563 294.69)` | Bureaucracy | white, 5 to 1 | | 28 | `#716e93` | `oklch(55.60% 0.0574 288.24)` | Bureaucracy | white, 4.8 to 1 | | 29 | `#717399` | `oklch(56.78% 0.0584 282.18)` | Silk Crepe Mauve | black, 4.6 to 1 | | 30 | `#70779d` | `oklch(57.84% 0.0594 276.75)` | Velvet Morning | black, 4.8 to 1 | | 31 | `#707ba1` | `oklch(58.74% 0.0601 272.21)` | Inky Violet | black, 5 to 1 | | 32 | `#707da3` | `oklch(59.45% 0.0606 268.84)` | Inky Violet | black, 5.1 to 1 | ## CSS ```css background: linear-gradient(90deg, #2e0f32 0.0%, #301033 3.2%, #321133 6.5%, #341334 9.7%, #371434 12.9%, #3a1635 16.1%, #3d1836 19.4%, #401a36 22.6%, #431c38 25.8%, #461f3a 29.0%, #49223c 32.3%, #4c253f 35.5%, #4f2942 38.7%, #522d46 41.9%, #56314a 45.2%, #59364e 48.4%, #5c3a53 51.6%, #5f3f58 54.8%, #63445d 58.1%, #664962 61.3%, #684d68 64.5%, #6b516d 67.7%, #6d5673 71.0%, #6f5b79 74.2%, #705f80 77.4%, #716487 80.6%, #71698d 83.9%, #716e93 87.1%, #717399 90.3%, #70779d 93.5%, #707ba1 96.8%, #707da3 100.0%); background: linear-gradient(90deg in oklch, oklch(23.62% 0.0744 322.73) 0.0%, oklch(24.07% 0.0742 323.98) 3.2%, oklch(24.60% 0.0741 325.76) 6.5%, oklch(25.22% 0.0739 327.94) 9.7%, oklch(25.91% 0.0737 330.36) 12.9%, oklch(26.69% 0.0734 332.88) 16.1%, oklch(27.53% 0.0731 335.35) 19.4%, oklch(28.44% 0.0727 337.61) 22.6%, oklch(29.41% 0.0721 339.52) 25.8%, oklch(30.44% 0.0714 340.92) 29.0%, oklch(31.52% 0.0706 341.68) 32.3%, oklch(32.67% 0.0695 341.76) 35.5%, oklch(33.95% 0.0681 341.49) 38.7%, oklch(35.33% 0.0663 340.91) 41.9%, oklch(36.80% 0.0644 340.00) 45.2%, oklch(38.32% 0.0623 338.75) 48.4%, oklch(39.88% 0.0603 337.15) 51.6%, oklch(41.44% 0.0584 335.19) 54.8%, oklch(42.99% 0.0566 332.88) 58.1%, oklch(44.50% 0.0552 330.19) 61.3%, oklch(45.94% 0.0542 327.11) 64.5%, oklch(47.30% 0.0536 323.60) 67.7%, oklch(48.68% 0.0535 319.13) 71.0%, oklch(50.10% 0.0538 313.74) 74.2%, oklch(51.53% 0.0545 307.70) 77.4%, oklch(52.94% 0.0553 301.27) 80.6%, oklch(54.31% 0.0563 294.69) 83.9%, oklch(55.60% 0.0574 288.24) 87.1%, oklch(56.78% 0.0584 282.18) 90.3%, oklch(57.84% 0.0594 276.75) 93.5%, oklch(58.74% 0.0601 272.21) 96.8%, oklch(59.45% 0.0606 268.84) 100.0%); ``` ## Keyframes 4 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.236 | 0.074 | 322.7 | | 2 | 0.319 | 0.07 | 341.8 | | 3 | 0.469 | 0.054 | 324.8 | | 4 | 0.594 | 0.061 | 268.8 | ## In these collections - [Weathered garden gradients](https://grabient.com/weathered-garden-gradients) - [Dusk swatches](https://grabient.com/dusk-swatches) - [Muted gradients](https://grabient.com/muted-gradients) - [Dark mode UI gradients](https://grabient.com/dark-mode-ui-gradients) ## Other forms - [JSON](https://grabient.com/kUPDblqJnCLuTvfLljlA.json?steps=32) - [PNG](https://grabient.com/kUPDblqJnCLuTvfLljlA.png?steps=32) - [SVG](https://grabient.com/kUPDblqJnCLuTvfLljlA.svg?steps=32) - [CSS](https://grabient.com/kUPDblqJnCLuTvfLljlA.css?steps=32) - [ASE](https://grabient.com/kUPDblqJnCLuTvfLljlA.ase?steps=32) - [GPL](https://grabient.com/kUPDblqJnCLuTvfLljlA.gpl?steps=32) - [GRD](https://grabient.com/kUPDblqJnCLuTvfLljlA.grd?steps=32) - [Design tokens](https://grabient.com/kUPDblqJnCLuTvfLljlA.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kUPDblqJnCLuTvfLljlA&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kUPDblqJnCLuTvfLljlA) - [Guide for agents](https://grabient.com/llms.txt)