gradient-decreasing-hue-lch-ref.html (2135B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Gradient in LCH space</title> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 <style> 9 body { 10 background: #fff; 11 } 12 13 div { 14 width: 200px; 15 height: 100px; 16 margin: 10px; 17 } 18 19 div.a { 20 background-image: linear-gradient(to right in lch decreasing hue, 21 lch(50% 100% 360deg), 22 lch(50% 100% 290deg), 23 lch(50% 100% 220deg), 24 lch(50% 100% 150deg), 25 lch(50% 100% 80deg)); 26 } 27 28 div.b { 29 background-image: linear-gradient(to right in lch decreasing hue, 30 lch(50% 100% 80deg), 31 lch(50% 100% 60deg), 32 lch(50% 100% 40deg), 33 lch(50% 100% 20deg), 34 lch(50% 100% 0deg)); 35 } 36 37 div.c { 38 background-image: linear-gradient(to right in lch decreasing hue, 39 lch(50% 100% 360deg), 40 lch(50% 100% 330deg), 41 lch(50% 100% 300deg), 42 lch(50% 100% 270deg)); 43 } 44 45 div.d { 46 background-image: linear-gradient(to right in lch decreasing hue, 47 lch(50% 100% 270deg), 48 lch(50% 100% 180deg), 49 lch(50% 100% 90deg), 50 lch(50% 100% 0deg)); 51 } 52 </style> 53 </head> 54 55 <body> 56 <div class=a></div> 57 <div class=b></div> 58 <div class=c></div> 59 <div class=d></div> 60 </body> 61 </html>