Skip to content

Grabient palettes

Teal, plum and ochre color palette

Vivid teal, purple, magenta and orange color palette

The Teal, plum and ochre color palette brings together teal, dark purple, magenta, red, and gold. Linear gradient, 32 colors at 90°: #00c5b8, #1e496a, #711769, #dc474c, #ffc02a. Edit and export CSS, SVG, PNG or a shader.

6 editable OKLCH keyframes.

  • #00c5b8
  • #00b9b2
  • #03a9a8
  • #13969b
  • #1a838d
  • #1d7180
  • #1c6376
  • #1c566f
  • #1e496a
  • #233b64
  • #2a2f5e
  • #312459
  • #381b54
  • #411753
  • #4e1558
  • #5e1560
  • #711769
  • #861b72
  • #991e76
  • #ab2174
  • #ba276d
  • #c72f64
  • #d23a58
  • #dc474c
  • #e4543f
  • #eb6232
  • #f27323
  • #f88413
  • #fc9606
  • #fea70e
  • #ffb51e
  • #ffc02a

CSS

background: linear-gradient(90deg in oklch, oklch(74.02% 0.1292 187.03) 0.0%, oklch(70.92% 0.1224 190.11) 3.2%, oklch(66.54% 0.1134 193.87) 6.5%, oklch(61.39% 0.1013 198.53) 9.7%, oklch(55.98% 0.0894 204.29) 12.9%, oklch(50.82% 0.0796 211.37) 16.1%, oklch(46.41% 0.0736 219.98) 19.4%, oklch(42.73% 0.0723 230.90) 22.6%, oklch(39.02% 0.0739 244.73) 25.8%, oklch(35.55% 0.0779 260.24) 29.0%, oklch(32.61% 0.0839 276.17) 32.3%, oklch(30.51% 0.0913 291.26) 35.5%, oklch(29.53% 0.0998 304.24) 38.7%, oklch(30.03% 0.1096 314.10) 41.9%, oklch(32.14% 0.1228 321.51) 45.2%, oklch(35.41% 0.1382 327.30) 48.4%, oklch(39.35% 0.1540 332.23) 51.6%, oklch(43.47% 0.1685 337.08) 54.8%, oklch(47.28% 0.1799 342.62) 58.1%, oklch(50.36% 0.1868 349.53) 61.3%, oklch(53.12% 0.1897 357.30) 64.5%, oklch(55.75% 0.1898 5.56) 67.7%, oklch(58.32% 0.1880 14.07) 71.0%, oklch(60.90% 0.1852 22.61) 74.2%, oklch(63.54% 0.1823 30.95) 77.4%, oklch(66.32% 0.1802 38.89) 80.6%, oklch(69.49% 0.1778 47.14) 83.9%, oklch(72.92% 0.1749 55.68) 87.1%, oklch(76.37% 0.1717 64.03) 90.3%, oklch(79.58% 0.1685 71.66) 93.5%, oklch(82.29% 0.1658 78.08) 96.8%, oklch(84.25% 0.1638 82.77) 100.0%);

In these collections

Hero section gradientsDay of the Dead gradients

Similar palettesCollectionsDownload PNGPalette JSONMarkdownHow it works