【CSS3】填色表格演示hsl()

示例图

网页源码

  
    
    hsl表格
    
      table {
        border:solid 1px red;
        background:#eee;
        padding:6px;
      }
      th {
        color:red;
        font-size:12px;
        font-weight:normal;
      }
      td {
        width:80px;
        height:30px;
      }
      tr:nth-child(4) td:nth-of-type(1) { background:hsl(0,100%,100%);}
      tr:nth-child(4) td:nth-of-type(2) { background:hsl(0,75%,100%);}
      tr:nth-child(4) td:nth-of-type(3) { background:hsl(0,50%,100%);}
      tr:nth-child(4) td:nth-of-type(4) { background:hsl(0,25%,100%);}
      tr:nth-child(4) td:nth-of-type(5) { background:hsl(0,0%,100%);}

      tr:nth-child(5) td:nth-of-type(1) { background:hsl(0,100%,88%);}
      tr:nth-child(5) td:nth-of-type(2) { background:hsl(0,75%,88%);}
      tr:nth-child(5) td:nth-of-type(3) { background:hsl(0,50%,88%);}
      tr:nth-child(5) td:nth-of-type(4) { background:hsl(0,25%,88%);}
      tr:nth-child(5) td:nth-of-type(5) { background:hsl(0,0%,88%);}

      tr:nth-child(6) td:nth-of-type(1) { background:hsl(0,100%,75%);}
      tr:nth-child(6) td:nth-of-type(2) { background:hsl(0,75%,75%);}
      tr:nth-child(6) td:nth-of-type(3) { background:hsl(0,50%,75%);}
      tr:nth-child(6) td:nth-of-type(4) { background:hsl(0,25%,75%);}
      tr:nth-child(6) td:nth-of-type(5) { background:hsl(0,0%,75%);}

      tr:nth-child(7) td:nth-of-type(1) { background:hsl(0,100%,63%);}
      tr:nth-child(7) td:nth-of-type(2) { background:hsl(0,75%,63%);}
      tr:nth-child(7) td:nth-of-type(3) { background:hsl(0,50%,63%);}
      tr:nth-child(7) td:nth-of-type(4) { background:hsl(0,25%,63%);}
      tr:nth-child(7) td:nth-of-type(5) { background:hsl(0,0%,63%);}

      tr:nth-child(8) td:nth-of-type(1) { background:hsl(0,100%,50%);}
      tr:nth-child(8) td:nth-of-type(2) { background:hsl(0,75%,50%);}
      tr:nth-child(8) td:nth-of-type(3) { background:hsl(0,50%,50%);}
      tr:nth-child(8) td:nth-of-type(4) { background:hsl(0,25%,50%);}
      tr:nth-child(8) td:nth-of-type(5) { background:hsl(0,0%,50%);}

      tr:nth-child(9) td:nth-of-type(1) { background:hsl(0,100%,38%);}
      tr:nth-child(9) td:nth-of-type(2) { background:hsl(0,75%,38%);}
      tr:nth-child(9) td:nth-of-type(3) { background:hsl(0,50%,38%);}
      tr:nth-child(9) td:nth-of-type(4) { background:hsl(0,25%,38%);}
      tr:nth-child(9) td:nth-of-type(5) { background:hsl(0,0%,38%);}

      tr:nth-child(10) td:nth-of-type(1) { background:hsl(0,100%,25%);}
      tr:nth-child(10) td:nth-of-type(2) { background:hsl(0,75%,25%);}
      tr:nth-child(10) td:nth-of-type(3) { background:hsl(0,50%,25%);}
      tr:nth-child(10) td:nth-of-type(4) { background:hsl(0,25%,25%);}
      tr:nth-child(10) td:nth-of-type(5) { background:hsl(0,0%,25%);}

      tr:nth-child(11) td:nth-of-type(1) { background:hsl(0,100%,13%);}
      tr:nth-child(11) td:nth-of-type(2) { background:hsl(0,75%,13%);}
      tr:nth-child(11) td:nth-of-type(3) { background:hsl(0,50%,13%);}
      tr:nth-child(11) td:nth-of-type(4) { background:hsl(0,25%,13%);}
      tr:nth-child(11) td:nth-of-type(5) { background:hsl(0,0%,13%);}

      tr:nth-child(12) td:nth-of-type(1) { background:hsl(0,100%,0%);}
      tr:nth-child(12) td:nth-of-type(2) { background:hsl(0,75%,0%);}
      tr:nth-child(12) td:nth-of-type(3) { background:hsl(0,50%,0%);}
      tr:nth-child(12) td:nth-of-type(4) { background:hsl(0,25%,0%);}
      tr:nth-child(12) td:nth-of-type(5) { background:hsl(0,0%,0%);}

    
  

  
    
      
        
           
          色相：H=0 Red 
        
        
           
          饱和度 (→)
        
        
          亮度 (↓)
          100% 
          75% 
          50% 
          25% 
          0% 
        
        
          100 
           
           
           
           
           
        
        
          88 
           
           
           
           
           
        
        
          75 
           
           
           
           
           
        
        
          63 
           
           
           
           
           
        
        
          50 
           
           
           
           
           
        
        
          38 
           
           
           
           
           
        
        
          25 
           
           
           
           
           
        
        
          13 
           
           
           
           
           
        
        
          0