Skip to content

Grabient palettes

Purple Purple Purple Field

Pink, blue, navy and purple color palette

This vertical gradient moves through vivid purple, vivid blue, cyan, muted violet, deep purple, deep blue, muted violet, and pale purple. Linear gradient, 32 colors at 90°: #f47fd7, #1d8da0, #733253, #011b3a, #fcaedc. Edit and export CSS, SVG, PNG or a shader.

5 editable OKLCH keyframes.

  • #f47fd7
  • #e182e5
  • #c289f4
  • #9991f8
  • #6d98ed
  • #439bd7
  • #2499be
  • #1b94aa
  • #1d8da0
  • #25849f
  • #3679a3
  • #4e6ba3
  • #645b9a
  • #744d87
  • #7b4170
  • #7a385d
  • #733253
  • #642a4f
  • #51234e
  • #3b1d4b
  • #261945
  • #14173e
  • #061739
  • #011b3a
  • #092344
  • #203259
  • #3f4675
  • #665c93
  • #9274ae
  • #bd8bc4
  • #e39fd3
  • #fcaedc

CSS

background: linear-gradient(90deg in oklch, oklch(75.59% 0.1764 337.50) 0.0%, oklch(74.34% 0.1695 325.51) 3.2%, oklch(72.67% 0.1596 307.45) 6.5%, oklch(70.69% 0.1479 285.83) 9.7%, oklch(68.49% 0.1353 263.17) 12.9%, oklch(66.16% 0.1228 241.97) 16.1%, oklch(63.79% 0.1115 224.75) 19.4%, oklch(61.48% 0.1025 214.02) 22.6%, oklch(59.32% 0.0967 212.34) 25.8%, oklch(57.21% 0.0942 221.65) 29.0%, oklch(55.11% 0.0941 239.64) 32.3%, oklch(52.99% 0.0956 263.10) 35.5%, oklch(50.84% 0.0980 288.82) 38.7%, oklch(48.65% 0.1005 313.58) 41.9%, oklch(46.41% 0.1023 334.16) 45.2%, oklch(44.10% 0.1026 347.36) 48.4%, oklch(41.55% 0.1007 350.24) 51.6%, oklch(38.00% 0.0968 343.52) 54.8%, oklch(33.81% 0.0915 329.97) 58.1%, oklch(29.52% 0.0856 312.28) 61.3%, oklch(25.68% 0.0796 293.17) 64.5%, oklch(22.83% 0.0744 275.35) 67.7%, oklch(21.51% 0.0706 261.54) 71.0%, oklch(22.26% 0.0689 254.43) 74.2%, oklch(25.80% 0.0700 255.75) 77.4%, oklch(32.33% 0.0735 263.49) 80.6%, oklch(40.98% 0.0789 275.80) 83.9%, oklch(50.82% 0.0853 290.92) 87.1%, oklch(60.95% 0.0921 307.06) 90.3%, oklch(70.44% 0.0985 322.45) 93.5%, oklch(78.38% 0.1039 335.30) 96.8%, oklch(83.86% 0.1075 343.84) 100.0%);

In these collections

Pink and blue gradients

Similar palettesCollectionsDownload PNGPalette JSONMarkdownHow it works