Skip to content

Grabient palettes

Plum magenta and orange angular gradient

Seamless dark purple and purple color palette

Dark plum sweeps through violet and vivid magenta into coral pink and bright orange, then returns through muted wine to plum. Angular gradient, 96 colors at 315°: #28152c, #9626b8, #ff607e, #d35d3d, #28152c. Edit and export CSS, SVG, PNG or a shader.

4 editable OKLCH keyframes.

  • #28152c
  • #2a162e
  • #2d1631
  • #2f1735
  • #331838
  • #36193d
  • #3a1a41
  • #3e1b46
  • #421b4c
  • #461c52
  • #4b1d58
  • #501e5e
  • #551f65
  • #5a206c
  • #5f2173
  • #64217a
  • #692281
  • #6f2388
  • #742390
  • #7a2497
  • #7f249e
  • #8525a5
  • #8b25ac
  • #9026b2
  • #9626b8
  • #9b26be
  • #a126c3
  • #a726c8
  • #ac26cb
  • #b126cf
  • #b726d1
  • #bc26d2
  • #c126d3
  • #c626d3
  • #cc26d1
  • #d226cf
  • #d826cc
  • #de26c8
  • #e527c3
  • #eb27be
  • #f128b7
  • #f729b0
  • #fc2ba9
  • #ff34a1
  • #ff4199
  • #ff4b91
  • #ff538a
  • #ff5a84
  • #ff607e
  • #ff6578
  • #ff6972
  • #ff6d6c
  • #ff7066
  • #ff7261
  • #ff755a
  • #ff7654
  • #ff774d
  • #ff7846
  • #ff783e
  • #ff7735
  • #ff762a
  • #ff741d
  • #fe7313
  • #fb7315
  • #f77219
  • #f3701f
  • #ef6e24
  • #ea6c2a
  • #e5692f
  • #df6534
  • #d96139
  • #d35d3d
  • #cc5941
  • #c45544
  • #bc5147
  • #b44d4a
  • #ac494c
  • #a3454d
  • #9b414e
  • #923d4e
  • #893a4e
  • #80364e
  • #77334d
  • #6f304b
  • #662d49
  • #5e2a47
  • #562745
  • #4f2442
  • #48223f
  • #42203c
  • #3c1d39
  • #371b36
  • #321933
  • #2e1830
  • #2b162e
  • #28152c

CSS

background: conic-gradient(from 315deg in oklch, oklch(23.23% 0.0496 320.63) 0.0%, oklch(23.84% 0.0532 320.62) 1.1%, oklch(24.54% 0.0574 320.55) 2.1%, oklch(25.33% 0.0623 320.41) 3.2%, oklch(26.20% 0.0677 320.22) 4.2%, oklch(27.14% 0.0736 319.98) 5.3%, oklch(28.14% 0.0799 319.69) 6.3%, oklch(29.21% 0.0867 319.38) 7.4%, oklch(30.33% 0.0938 319.04) 8.4%, oklch(31.51% 0.1013 318.69) 9.5%, oklch(32.73% 0.1090 318.32) 10.5%, oklch(33.98% 0.1170 317.96) 11.6%, oklch(35.28% 0.1251 317.60) 12.6%, oklch(36.59% 0.1334 317.25) 13.7%, oklch(37.93% 0.1418 316.92) 14.7%, oklch(39.29% 0.1502 316.62) 15.8%, oklch(40.66% 0.1587 316.36) 16.8%, oklch(42.03% 0.1671 316.14) 17.9%, oklch(43.40% 0.1754 315.97) 18.9%, oklch(44.76% 0.1835 315.86) 20.0%, oklch(46.11% 0.1915 315.81) 21.1%, oklch(47.45% 0.1993 315.84) 22.1%, oklch(48.76% 0.2068 315.95) 23.2%, oklch(50.04% 0.2140 316.15) 24.2%, oklch(51.28% 0.2208 316.45) 25.3%, oklch(52.49% 0.2272 316.85) 26.3%, oklch(53.65% 0.2332 317.36) 27.4%, oklch(54.75% 0.2387 317.99) 28.4%, oklch(55.80% 0.2436 318.75) 29.5%, oklch(56.78% 0.2480 319.64) 30.5%, oklch(57.70% 0.2517 320.68) 31.6%, oklch(58.54% 0.2547 321.86) 32.6%, oklch(59.30% 0.2570 323.21) 33.7%, oklch(60.06% 0.2588 324.85) 34.7%, oklch(60.82% 0.2601 326.79) 35.8%, oklch(61.58% 0.2610 329.01) 36.8%, oklch(62.34% 0.2615 331.49) 37.9%, oklch(63.09% 0.2616 334.20) 38.9%, oklch(63.84% 0.2613 337.11) 40.0%, oklch(64.58% 0.2606 340.21) 41.1%, oklch(65.30% 0.2596 343.47) 42.1%, oklch(66.01% 0.2583 346.86) 43.2%, oklch(66.69% 0.2567 350.36) 44.2%, oklch(67.35% 0.2483 353.95) 45.3%, oklch(67.99% 0.2336 357.61) 46.3%, oklch(68.59% 0.2210 1.30) 47.4%, oklch(69.17% 0.2102 5.01) 48.4%, oklch(69.70% 0.2012 8.71) 49.5%, oklch(70.20% 0.1937 12.38) 50.5%, oklch(70.65% 0.1876 16.00) 51.6%, oklch(71.06% 0.1828 19.53) 52.6%, oklch(71.41% 0.1791 22.96) 53.7%, oklch(71.72% 0.1766 26.26) 54.7%, oklch(71.96% 0.1750 29.41) 55.8%, oklch(72.15% 0.1744 32.39) 56.8%, oklch(72.28% 0.1746 35.16) 57.9%, oklch(72.34% 0.1757 37.71) 58.9%, oklch(72.33% 0.1774 40.01) 60.0%, oklch(72.25% 0.1798 42.04) 61.1%, oklch(72.10% 0.1828 43.77) 62.1%, oklch(71.86% 0.1864 45.19) 63.2%, oklch(71.55% 0.1903 46.26) 64.2%, oklch(71.15% 0.1919 46.96) 65.3%, oklch(70.66% 0.1885 47.27) 66.3%, oklch(70.06% 0.1852 47.16) 67.4%, oklch(69.31% 0.1816 46.65) 68.4%, oklch(68.41% 0.1778 45.75) 69.5%, oklch(67.38% 0.1737 44.48) 70.5%, oklch(66.22% 0.1695 42.88) 71.6%, oklch(64.94% 0.1651 40.96) 72.6%, oklch(63.55% 0.1605 38.75) 73.7%, oklch(62.06% 0.1558 36.28) 74.7%, oklch(60.49% 0.1509 33.56) 75.8%, oklch(58.84% 0.1460 30.63) 76.8%, oklch(57.13% 0.1409 27.51) 77.9%, oklch(55.35% 0.1358 24.22) 78.9%, oklch(53.53% 0.1306 20.78) 80.0%, oklch(51.67% 0.1254 17.23) 81.1%, oklch(49.79% 0.1202 13.58) 82.1%, oklch(47.88% 0.1151 9.86) 83.2%, oklch(45.97% 0.1099 6.09) 84.2%, oklch(44.06% 0.1048 2.31) 85.3%, oklch(42.17% 0.0998 358.52) 86.3%, oklch(40.29% 0.0948 354.76) 87.4%, oklch(38.45% 0.0900 351.06) 88.4%, oklch(36.66% 0.0853 347.42) 89.5%, oklch(34.91% 0.0807 343.89) 90.5%, oklch(33.23% 0.0763 340.49) 91.6%, oklch(31.62% 0.0721 337.23) 92.6%, oklch(30.09% 0.0681 334.14) 93.7%, oklch(28.66% 0.0644 331.25) 94.7%, oklch(27.33% 0.0608 328.59) 95.8%, oklch(26.11% 0.0576 326.17) 96.8%, oklch(25.01% 0.0546 324.02) 97.9%, oklch(24.05% 0.0520 322.16) 98.9%, oklch(23.23% 0.0496 320.63) 100.0%);

In these collections

Hero section gradients

Similar palettesCollectionsDownload PNGPalette JSONMarkdownHow it works