Set color-darken with HSL color codes - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Set color-darken with HSL color codes

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.original-base {<!--from  ww  w.j a  v  a2  s  . co  m-->
   background: blue;
}
.original-lighter {
   background: #1bc0b2;
}
.original-darker {
   background: black;
}
.derived-1-base {
   background: #3f9315;
}
.derived-1-lighter {
   background: #52c01b;
}
.derived-1-darker {
   background: pink;
}
.derived-2-base {
   background: #937e15;
}
.derived-2-lighter {
   background: red;
}
.derived-2-darker {
   background: #67580f;
}

.box {
   display: inline-block;
   height: 50px;
   width: 100px;
   padding: 1rem;
   color: #fff;
}


      </style> 
 </head> 
 <body translate="no"> 
  <h4>Original:</h4> 
  <div class="box original-lighter">
    Lighter 
  </div> 
  <div class="box original-base">
    Base 
  </div> 
  <div class="box original-darker">
    Darker 
  </div> 
  <br> 
  <h4>Derived 1:</h4> 
  <div class="box derived-1-lighter">
    Lighter 
  </div> 
  <div class="box derived-1-base">
    Base 
  </div> 
  <div class="box derived-1-darker">
    Darker 
  </div> 
  <br> 
  <h4>Derived 2:</h4> 
  <div class="box derived-2-lighter">
    Lighter 
  </div> 
  <div class="box derived-2-base">
    Base 
  </div> 
  <div class="box derived-2-darker">
    Darker 
  </div>  
 </body>
</html>

Related Tutorials