Skip to content

Grabient palettes

Violet Violet Magenta Field

Lavender, purple, blue and pink color palette

This diagonal gradient moves through pale violet, purple, magenta, deep purple, deep violet, blue, purple, and pale magenta. Linear gradient, 32 colors at 60°: #bda7fc, #882c60, #3a0055, #443195, #fdc6e0. Edit and export CSS, SVG, PNG or a shader.

4 editable OKLCH keyframes.

  • #bda7fc
  • #ba9ef1
  • #b790e2
  • #b281d0
  • #ad70ba
  • #a55ea3
  • #9c4d8b
  • #923c74
  • #882c60
  • #7f1e51
  • #760f46
  • #6f0142
  • #640042
  • #590044
  • #4e0049
  • #44004f
  • #3a0055
  • #32005c
  • #2b0065
  • #26006f
  • #24007b
  • #261082
  • #31208b
  • #443195
  • #5d42a0
  • #7955ab
  • #9669b5
  • #b27ebf
  • #cc93c8
  • #e1a7d1
  • #f2b9d9
  • #fdc6e0

CSS

background: linear-gradient(60deg in oklch, oklch(77.95% 0.1199 295.31) 0.0%, oklch(75.46% 0.1212 299.28) 3.2%, oklch(72.09% 0.1229 305.08) 6.5%, oklch(68.05% 0.1248 312.21) 9.7%, oklch(63.53% 0.1270 320.13) 12.9%, oklch(58.73% 0.1294 328.31) 16.1%, oklch(53.88% 0.1319 336.21) 19.4%, oklch(49.15% 0.1345 343.33) 22.6%, oklch(44.77% 0.1372 349.11) 25.8%, oklch(40.93% 0.1398 353.05) 29.0%, oklch(37.84% 0.1425 354.60) 32.3%, oklch(35.47% 0.1453 353.12) 35.5%, oklch(33.25% 0.1396 348.33) 38.7%, oklch(31.18% 0.1349 340.88) 41.9%, oklch(29.36% 0.1328 331.56) 45.2%, oklch(27.88% 0.1330 321.14) 48.4%, oklch(26.82% 0.1354 310.39) 51.6%, oklch(26.27% 0.1401 300.08) 54.8%, oklch(26.30% 0.1479 290.98) 58.1%, oklch(27.02% 0.1591 283.85) 61.3%, oklch(28.49% 0.1731 279.44) 64.5%, oklch(30.84% 0.1709 278.49) 67.7%, oklch(34.66% 0.1649 280.77) 71.0%, oklch(39.81% 0.1563 285.66) 74.2%, oklch(45.93% 0.1458 292.57) 77.4%, oklch(52.71% 0.1341 300.90) 80.6%, oklch(59.80% 0.1217 310.09) 83.9%, oklch(66.87% 0.1092 319.53) 87.1%, oklch(73.58% 0.0974 328.64) 90.3%, oklch(79.59% 0.0867 336.84) 93.5%, oklch(84.57% 0.0780 343.54) 96.8%, oklch(88.19% 0.0717 348.15) 100.0%);

In these collections

Purple and pink gradients

Similar palettesCollectionsDownload PNGPalette JSONMarkdownHow it works