gradient-hue-direction-ref.html (1138B)
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Direction of hue interpolation</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: 50px; 16 margin: 10px; 17 } 18 19 div.a { 20 background-image: linear-gradient(to right in hsl shorter hue, red, orange); 21 } 22 23 div.b { 24 background-image: linear-gradient(to right in hsl longer hue, red, orange); 25 } 26 27 div.c { 28 background-image: linear-gradient(to right in lch shorter hue, red, orange); 29 } 30 31 div.d { 32 background-image: linear-gradient(to right in lch longer hue, red, orange); 33 } 34 </style> 35 </head> 36 37 <body> 38 <p>Each pair of gradients should match:</p> 39 <div class=a></div> 40 <div class=a></div> 41 <hr> 42 <div class=b></div> 43 <div class=b></div> 44 <hr> 45 <div class=c></div> 46 <div class=c></div> 47 <hr> 48 <div class=d></div> 49 <div class=d></div> 50 </body> 51 </html>