Mixin color palette between two colors - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

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

Description

Mixin color palette between two colors

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Tonal Transition Sass Mixin</title> 
  <style>

main > *:nth-of-type(1) {<!--   w w  w . ja v a  2 s .c o m-->
   background: #12a34a;
}
main > *:nth-of-type(2) {
   background: brown;
}
main > *:nth-of-type(3) {
   background: pink;
}
main > *:nth-of-type(4) {
   background: #169648;
}
main > *:nth-of-type(5) {
   background: #179147;
}
main > *:nth-of-type(6) {
   background: red;
}
main > *:nth-of-type(7) {
   background: #198846;
}
main > *:nth-of-type(8) {
   background: #1a8345;
}
main > *:nth-of-type(9) {
   background: blue;
}
main > *:nth-of-type(10) {
   background: #1d7a44;
}
main > *:nth-of-type(11) {
   background: #1e7643;
}
main > *:nth-of-type(12) {
   background: #1f7143;
}
main > *:nth-of-type(13) {
   background: #206c42;
}
main > *:nth-of-type(14) {
   background: #216841;
}
main > *:nth-of-type(15) {
   background: #236340;
}
main > *:nth-of-type(16) {
   background: #245f40;
}
main > *:nth-of-type(17) {
   background: #255a3f;
}
main > *:nth-of-type(18) {
   background: #26563e;
}
main > *:nth-of-type(19) {
   background: #27513e;
}
main > *:nth-of-type(20) {
   background: #284c3d;
}
main > *:nth-of-type(21) {
   background: #2a483c;
}
main > *:nth-of-type(22) {
   background: #2b433b;
}
main > *:nth-of-type(23) {
   background: #2c3f3b;
}
main > *:nth-of-type(24) {
   background: #2d3a3a;
}
body {
   margin: 0;
   padding: 0;
   height: 100vh;
}
main {
   display: flex;
   height: 100%;
}
main > * {
   flex: 1;
}


      </style> 
 </head> 
 <body translate="no"> 
  <main> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
   <div></div> 
  </main>  
 </body>
</html>

Related Tutorials