<h4>HSL Color Methods:-</h4> <div class='container-one'> background: $backgroundColor; </div> <div class='container-two'> background: darken($backgroundColor, 30%); </div> <div class='container-three'> background: lighten($backgroundColor, 30%); </div> <div class='container-four'> background: invert($backgroundColor); </div> <div class='container-five'> background: complement($backgroundColor); </div> <div class='container-six'> background: saturate($backgroundColor,90%); </div> <div class='container-seven'> background: desaturate($backgroundColor,90%); </div> <div class='container-eight'> background: adjust-hue($backgroundColor,90%); </div> <div class='container-nine'> background: saturation($backgroundColor); </div> <div class='container-ten'> background: hue($backgroundColor); </div> <div class='container-eleven'> background: hsl(180, 20, 30); </div> <div class='container-tweleve'> background: hsla(10, 20, 30,0.2); </div> <h4>RGB Color Methods:-</h4> <div class='container-thirteen'> background: rgb($myredcolor, $mygreencolor, $mybluecolor); </div> <div class='container-fourteen'> background: rgba($myredcolor, $mygreencolor, $mybluecolor, 0.2); </div> <div class='container-fifteen'> background: red($backgroundColor); </div> <div class='container-sixteen'> background: green($backgroundColor); </div> <div class='container-seventeen'> background: blue($backgroundColor); </div> <div class='container-eighteen'> background: mix(rgb($myredcolor, $mygreencolor, $mybluecolor), #808080); </div>
/*HSL colors -- tutorialsavvy.com*/ .container, .container-one, .container-two, .container-three, .container-four, .container-five, .container-six, .container-seven, .container-eight, .container-nine, .container-ten, .container-eleven, .container-tweleve, .container-thirteen, .container-fourteen, .container-fifteen, .container-sixteen, .container-seventeen, .container-eighteen { height: 20px; width: 600px; color: red; border: 1px solid #C0C0C0; text-align: left; } .container-one { background: lime; } .container-two { background: #006600; } .container-three { background: #99ff99; } .container-four { background: magenta; } .container-five { background: magenta; } .container-six { background: lime; } .container-seven { background: #738c73; } .container-seven { background: #738c73; } .container-eight { background: #007fff; } .container-nine { background: 100%; } .container-ten { background: 120deg; } .container-eleven { background: #3d5c5c; } .container-tweleve { background: rgba(92, 66, 61, 0.2); } /*RGB colors -- tutorialsavvy.com*/ .container-thirteen { background: #235f69; } .container-fourteen { background: rgba(35, 95, 105, 0.2); } .container-fifteen { background: 0; } .container-sixteen { background: 255; } .container-seventeen { background: 0; } .container-eighteen { background: #516f74; }