tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

gradient-increasing-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 increasing hue,
     21                                              lch(50% 100% 0deg),
     22                                              lch(50% 100% 20deg),
     23                                              lch(50% 100% 40deg),
     24                                              lch(50% 100% 60deg),
     25                                              lch(50% 100% 80deg));
     26        }
     27 
     28        div.b {
     29            background-image: linear-gradient(to right in lch increasing hue,
     30                                              lch(50% 100% 80deg),
     31                                              lch(50% 100% 150deg),
     32                                              lch(50% 100% 220deg),
     33                                              lch(50% 100% 290deg),
     34                                              lch(50% 100% 360deg));
     35        }
     36 
     37        div.c {
     38            background-image: linear-gradient(to right in lch increasing hue,
     39                                              lch(50% 100% 0deg),
     40                                              lch(50% 100% 90deg),
     41                                              lch(50% 100% 180deg),
     42                                              lch(50% 100% 270deg));
     43        }
     44 
     45        div.d {
     46            background-image: linear-gradient(to right in lch increasing hue,
     47                                              lch(50% 100% 270deg),
     48                                              lch(50% 100% 300deg),
     49                                              lch(50% 100% 330deg),
     50                                              lch(50% 100% 360deg));
     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>