Analogous navy and purple linear swatches

Linear swatches, 32 colors at 180°: #070927, #170f46, #361974, #682aa3, #a339ca. Edit and export CSS, SVG, PNG or a shader.

3 editable OKLCH keyframes.

#070927
#080929
#0a0a2c
#0b0b30
#0d0c34
#0f0d38
#110e3c
#140f41
#170f46
#1a104c
#1d1151
#211357
#24145c
#281562
#2d1668
#31176e
#361974
#3b1b7a
#421d80
#481f87
#50228e
#582495
#60279c
#682aa3
#712caa
#792fb0
#8231b6
#8a33bb
#9135c0
#9837c4
#9e38c7
#a339ca

CSS

background: linear-gradient(180deg, oklch(16.14% 0.0606 274.92) 0.000% 3.125%, oklch(16.67% 0.0635 275.44) 3.125% 6.250%, oklch(17.27% 0.0670 276.03) 6.250% 9.375%, oklch(17.95% 0.0711 276.69) 9.375% 12.500%, oklch(18.70% 0.0756 277.43) 12.500% 15.625%, oklch(19.51% 0.0805 278.23) 15.625% 18.750%, oklch(20.39% 0.0858 279.09) 18.750% 21.875%, oklch(21.33% 0.0913 280.01) 21.875% 25.000%, oklch(22.33% 0.0971 280.98) 25.000% 28.125%, oklch(23.37% 0.1030 282.01) 28.125% 31.250%, oklch(24.46% 0.1089 283.09) 31.250% 34.375%, oklch(25.59% 0.1150 284.21) 34.375% 37.500%, oklch(26.76% 0.1209 285.37) 37.500% 40.625%, oklch(27.97% 0.1268 286.57) 40.625% 43.750%, oklch(29.20% 0.1325 287.80) 43.750% 46.875%, oklch(30.46% 0.1379 289.07) 46.875% 50.000%, oklch(31.77% 0.1432 290.39) 50.000% 53.125%, oklch(33.22% 0.1486 291.86) 53.125% 56.250%, oklch(34.82% 0.1543 293.48) 56.250% 59.375%, oklch(36.53% 0.1602 295.23) 59.375% 62.500%, oklch(38.33% 0.1661 297.07) 62.500% 65.625%, oklch(40.18% 0.1722 298.97) 65.625% 68.750%, oklch(42.07% 0.1781 300.90) 68.750% 71.875%, oklch(43.97% 0.1841 302.84) 71.875% 75.000%, oklch(45.84% 0.1898 304.76) 75.000% 78.125%, oklch(47.66% 0.1953 306.62) 78.125% 81.250%, oklch(49.39% 0.2006 308.40) 81.250% 84.375%, oklch(51.02% 0.2055 310.07) 84.375% 87.500%, oklch(52.52% 0.2100 311.61) 87.500% 90.625%, oklch(53.85% 0.2141 312.97) 90.625% 93.750%, oklch(54.99% 0.2176 314.14) 93.750% 96.875%, oklch(55.91% 0.2205 315.08) 96.875% 100.000%);

In these collections

Cyberpunk gradients Retro gradients Synthwave gradients