<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://use.fontawesome.com/aa95071b26.js"></script>
<div id="body">
  <div class="out-wrap">
    <h1>Color Palette</h1>
    <div class="tab-container">
      <ul id="tabs">
        <li class="active" title="reds" vc-code="#f44336"></li>
        <li title="pinks" vc-code="#e91e63"></li>
        <li title="purples" vc-code="#9c27b0"></li>
        <li title="deep-purples" vc-code="#673ab7"></li>
        <li title="indigos" vc-code="#3f51b5"></li>
        <li title="blues" vc-code="#2196f3"></li>
        <li title="light-blues" vc-code="#03a9f4"></li>
        <li title="cyans" vc-code="#00bcd5
"></li>
        <li title="teals" vc-code="#009688"></li>
        <li title="greens" vc-code="#4caf50 "></li>
        <li title="light-greens" vc-code="#8bc34a "></li>
        <li title="limes" vc-code="#cddc39"></li>
        <li title="yellows" vc-code="#ffeb3b "></li>
        <li title="ambers" vc-code="#ff9800"></li>
        <li title="deep-oranges" vc-code="#ff5722"></li>
        <li title="browns" vc-code="#795548"></li>
        <li title="greys" vc-code="#9e9e9e"></li>
        <li title="blue-greys" vc-code="#607d8b"></li>
      </ul>
      <div class="tab-panes">
        <div id="reds" class="showit">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="pinks">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="purples">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="deep-purples">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="indigos">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="blues">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="light-blues">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="cyans">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="teals">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="greens">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="light-greens">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="limes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="yellows">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="ambers">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="deep-oranges">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="browns">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="greys">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="blue-greys">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>  
            <div></div>
            <div></div>
            <div class="main"></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
      </div>
    </div>
  </div>
 </div>
// Extra small screen / phone
$screen-xs-min: 480px;

// Small screen / tablet
$screen-sm-min: 768px;

// Medium screen / desktop
$screen-md-min: 992px;

// Large screen / wide desktop
$screen-lg-min: 1200px;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1);
$screen-sm-max: ($screen-md-min - 1);
$screen-md-max: ($screen-lg-min - 1);

@mixin respondTo($media) {
    @if $media == "xs" {
        @media only screen and (max-width: $screen-xs-max) {
         @content;
     }
 }

 @else if $media == "sm" {
    @media only screen and (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
     @content;
 }
}

@else if $media == "md" {
    @media only screen and (max-width: $screen-md-max) and (min-width: $screen-md-min) {
     @content;
 }
}

@else if $media == "lg" {
    @media only screen and (min-width: $screen-lg-min) {
     @content;
 }
}
}
@mixin respondToAbove($media) {
    @if $media == "xs" {
        @media only screen and (min-width: $screen-xs-max) {
         @content;
     }
 }

 @else if $media == "sm" {
    @media only screen and (min-width: $screen-sm-min) {
     @content;
 }
}

@else if $media == "md" {
    @media only screen and (min-width: $screen-md-min) {
     @content;
 }
}

@else if $media == "lg" {
    @media only screen and (min-width: $screen-lg-min) {
     @content;
 }
}
}
@mixin respondToBelow($media) {
    @if $media == "xs" {
        @media only screen and (max-width: $screen-xs-max) {
         @content;
     }
 }

 @else if $media == "sm" {
    @media only screen and (max-width: $screen-sm-max) {
     @content;
 }
}

@else if $media == "md" {
    @media only screen and (max-width: $screen-md-max) {
     @content;
 }
}

@else if $media == "lg" {
    @media only screen {
     @content;
 }
}
}
@mixin respondToTablet {
 @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
    @content;
}
}
@mixin respondToSmall-n-Medium {
 @media (min-width: $screen-sm-min) and (max-width: $screen-md-max){
    @content;
}
}
@mixin respondToMobile() {
 @include respondTo(xs){
    @content
}
}
@mixin respondToDesktop() {
 @include respondToAbove(md){
    @content
}
}
@mixin clearfix {
    &:before {
        content: "";
        display: table;
    }

    &:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}
@mixin rounded_corners($radius: 5px) {
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
@mixin input {
    padding: 0 20px;
    margin: 0.5em 0;
    border: 1px solid darken(#e1e1e1, 20%);
    height: 40px;
    display: block;
    width: 80%;
    max-width: 80%;
    background: rgba(255,255,255,.5);
    @include respondTo(xs) {
        width: 100%;
        max-width: 100%;
    }
    outline: none;
}

// Provides a cross-browser method to implement `display: inline-block;`
@mixin inline-block($alignment: middle) {
    display: -moz-inline-stack;
    display: inline-block;
    @if $alignment and $alignment != none {
        vertical-align: $alignment;
    }
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
}
@mixin background_gradient($min_color, $max_color,$color_stop1:0%, $color_stop2:100%) {
    background: $min_color;
    background: -moz-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -o-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -webkit-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -ms-linear-gradient(top, $min_color $color_stop1, $max_color $color_stop2);
    background: -webkit-gradient(linear,left top,left bottom,color-stop($color_stop1/100%, $min_color),color-stop($color_stop2/100%, $max_color));
    background: linear-gradient(to bottom, $min_color $color_stop1, $max_color $color_stop2);
    zoom: 1; // fix for ie7 issue
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$min_color}, endColorStr=#{$max_color});
}
@mixin box-shadow($value) {
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    box-shadow: $value;
}
@mixin font_family($font_type,$font_stretch:'normal') {
    @if $font-stretch == "condensed" {
        font-family: $font-condensed;
    }

    @else if $font_type == "primary" {
        font-family: $font-primary;
    }
    @else {
        font-family: $font-secondary;
    }
}
@mixin font-size($sizeValue) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}

//-------------
@mixin shadow-box {
    border: 1px solid darken(#e1e1e1, 5%);
    @include rounded_corners(5px);
    box-shadow: 4px 4px 5px #e1e1e1;
}
@mixin transition($value) {
    transition: $value;
    -moz-transition: $value;
    -webkit-transition: $value;
}
@mixin flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
@mixin flex-grow($value) {
    -webkit-box-flex: $value;
    -webkit-flex: $value;
    -ms-flex: $value;
    flex: $value;
}
@mixin flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
@mixin align-items($value) {
    -ms-align-items: $value;
    -moz-align-items: $value;
    -webkit-align-items: $value;
    align-items: $value;
}
@mixin justify-content($value) {
    -ms-justify-content: $value;
    -moz-justify-content: $value;
    -webkit-justify-content: $value;
    justify-content: $value;
}
@mixin flex-direction($value) {
    -ms-flex-direction: $value;
    -moz-flex-direction: $value;
    -webkit-flex-direction: $value;
    flex-direction: $value;
}
@mixin flex-basis($value) {
    -webkit-box-flex: $value;
    -webkit-flex: $value;
    -ms-flex: $value;
    flex: $value;
}
@mixin fontAwesome($fsize,$ascii,$fcolor) {
    font: normal normal normal $fsize/1 FontAwesome;
    content: $ascii;
    color: $fcolor;
}
@mixin input-placeholder-font($value1, $value2) {
    input::-webkit-input-placeholder {
        color: $value1;
        @include font-size($value2);
    }

    input::-moz-placeholder {
        color: $value1;
        @include font-size($value2);
    }

    input:-moz-placeholder {
        color: $value1;
        @include font-size($value2);
    }

    input:-ms-input-placeholder {
        color: $value1;
        @include font-size($value2);
    }
}
@mixin radio-button {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    height: 25px;
    cursor: pointer;

    &:checked + label:after {
        content: '';
        position: absolute;
        background: #000;
        @include rounded_corners(50%);
        width: 9px;
        height: 9px;
        left: 3px;
        top: 3px;
        bottom: 4px;
        pointer-events: none;
    }

    & + label {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 20px;
        margin-top: 10px;
        line-height: 15px;
        height: 15px;

        &:before {
            font-weight: normal;
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 1px;
            background-color: #fff;
            @include rounded_corners(50%);
            border: 1px solid darken(#e1e1e1, 15%);
        }
    }
}
@mixin check-button {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 1;
    height: 25px;
    cursor: pointer;

    &:checked + label:after {
        content: '';
        position: absolute;
        width: 9px;
        height: 4.5px;
        left: 3px;
        bottom: 7px;
        border-color: #000;
        border-style: solid;
        border-width: 0 0 2px 2px;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        pointer-events: none;
    }

    & + label {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 20px;
        margin-top: 10px;
        line-height: 15px;
        height: 15px;

        &:before {
            font-weight: normal;
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: absolute;
            left: 0;
            bottom: 1px;
            background-color: #fff;
            border: 1px solid darken(#e1e1e1, 15%);
        }
    }
}

@mixin flat-shadow{
    @include box-shadow(0 5px 10px -4px rgba(0,0,0,0.3));
}


@mixin rotate($angle) {
  -ms-transform:rotate($angle);
  -webkit-transform:rotate($angle);
  transform:rotate($angle);
}
@mixin scale($value-1,$value-2) {
  -ms-transform:scale($value-1,$value-2);
  -webkit-transform:scale($value-1,$value-2);
  transform:scale($value-1,$value-2);
}
@mixin skew($value-1,$value-2) {
  -ms-transform:skew($value-1,$value-2);
  -webkit-transform:skew($value-1,$value-2);
  transform:skew($value-1,$value-2);
}
@mixin translateY($value) {
  -ms-transform:translateY($value);
  -webkit-transform:translateY($value);
  transform:translateY($value);
}

@mixin transform($value) {
  -ms-transform:($value);
  -webkit-transform:($value);
  transform:($value);
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
}
@-moz-keyframes #{$name} {
    @content;
}
@-o-keyframes #{$name} {
    @content;
}
@keyframes #{$name} {
    @content;
}
}


@mixin animation($values){
  -webkit-animation: ($values);
  -moz-animation: ($values);
  -ms-animation: ($values);
  animation: ($values);
}
@mixin close-icon{
    font-size: 0 !important;
    position: absolute;
    height: 40px;
    width: 40px;
    right: 20px;
    top: 20px;   
    font-size: 0px;
    cursor: pointer;
    z-index: 9;
    border: 0;
    background: transparent;
    &:before,&:after{
        content: '';
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        height: 2px;
        background: #fff;
        width: 50%;
        transition: all .25s;
        opacity: 0;
    }
    &:before{
      transform: rotate(45deg);
      opacity: 1;
  }
  &:after{
      transform: rotate(-45deg);
      opacity: 1;
  }
}
@mixin radio-button{
    display: none;
    & + *{
        position: relative;
        padding-left: 30px;
        margin-left: 10px;
        &:before{
            content: '';
            width: 20px;
            @include rounded_corners(50%);
            height: 20px;
            @include box-shadow(inset 0px 1px 5px rgba(0,0,0,0.5));
            text-indent: 30px;
            left: 0;
            top: 0;
            position: absolute;
            cursor: pointer;
        }
        &:after {
            content: '';
            width: 20px;
            height: 20px;
            cursor: pointer;
            position: absolute;
            z-index: 1;
            background: $dbc;
            @include rounded_corners(50%);
            @include transition(all .25s);
            top: 0;
            left: 0;
            @include transform(scale(0));
        }
    }
    &:checked + *:after {
        @include transform(scale(.4));
        @include transition(all .25s cubic-bezier(0.68,0.55,0.265,3));
    }
}
@mixin check-box{
    display: none;
    & + *{
        position: relative;
        padding-left: 30px;
        margin-left: 10px;
        &:before{
            content: '';
            width: 18px;
            height: 18px;
            @include box-shadow(inset 0px 1px 5px rgba(0,0,0,0.5));
            text-indent: 30px;
            left: 0;
            top: 0;
            position: absolute;
            cursor: pointer;
        }
        &:after {
            content: '';
            width: 25px;
            height: 15px;
            cursor: pointer;
            position: absolute;
            z-index: 1;            
            border: solid $solid-color;
            border-width: 0 0 7px 7px;
            top: 0;
            left: -3px;
            @include transform(rotate(0deg) scale(0));
            @include transition(all .25s);
        }
    }
    &:checked + *:after {
        @include transform(rotate(-45deg) scale(0.4));
        @include transition(all .25s cubic-bezier(0.68,0.55,0.265,3));
    }
    &:checked + *:before {
        background: $dbc;
    }
}

@mixin calwidth($val1, $val2){
  width: calc(#{$val1} + #{$val2})
}

@mixin transition-hvr($t-duration, $t-type){
    position: relative;
    transition: all $t-duration $t-type;
    &:before,&:after{       
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        width:0;
        height:0;
        transition: width $t-duration ($t-duration*3) $t-type, height $t-duration ($t-duration*2) $t-type, border ($t-duration/5) ($t-duration*4) $t-type;
        border: solid transparent;
        border-width: 3px 3px 0 0;
    }
    &:after{
        left: auto;
        top: auto;
        bottom: 0;
        right: 0;
        transition: width  $t-duration $t-duration $t-type, height $t-duration $t-type, border ($t-duration/5) ($t-duration*2) $t-type;
        border-width: 0 0 3px 3px;
    }
    &:hover{
        &:before,&:after{
            transition: width $t-duration $t-type, height $t-duration $t-duration $t-type, border ($t-duration/5) $t-type;
            width: 100%;
            height: 100%;         
            border-color: $dbc;
        }
        &:after{
            transition: width $t-duration ($t-duration*2) $t-type, height $t-duration ($t-duration*3)  $t-type, border ($t-duration/5) ($t-duration*2) $t-type;       
        }
    }
}


$solid-color: #fff;
$dbc: #212121;
#body {
    padding: 50px;
    background: $dbc;
    min-height: 100vh;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
  .out-wrap {
        position: relative;
        width: 95%;
        margin: 0 auto;
    >h1{
      color: #fff;
      text-align: center;
      margin: 0 0 20px;
    }
    .tab-container{
      >ul#tabs{
        padding: 0 15px;
        list-style-type:none;
        position: relative;
                border-bottom: none;
                z-index: 0;
        @include  flex;
        widtyh: 100%;
        margin-bottom:0;
                li {
                  flex: 1;
                    position: relative;
                    z-index: 0;
                  padding: 30px 0;
                        box-shadow: 8px 12px 25px 2px rgba(0, 0, 0, 0.4);
                  cursor: pointer;
                        transition: all 0.2s ease;
                  transform: translateY(20px);
                  &:hover{
                   transform: translateY(15px);   
                  }
                   &:nth-child(1) {
                        border-radius: 20px 0 0 0;
                    }
                    &:last-child {
                        box-shadow: none;
                      border-radius: 0 20px 0 0;
                    }
                    &.active {
                        margin: 0;
                        z-index: 20 !important;
                      border-radius: 10px 10px 0 0;
                        transform: translateY(0);  
                    }
                }
      }
      .tab-panes{    
        
        box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .25);
        padding: 30px;
        background: $solid-color;
        position: relative;
        >div{    
          &:before{
                content: attr(id);
    width: 100%;
    text-align: center;
    font-size: 40px;
          }
display: none; 
          @include  flex-wrap;
          @incldue justify-content (space-between);
          &.showit{            
            @include flex;
          }
          
        display:none;
          >div{
            width: 20%;
            height: 100px;
            display: none;
            &[style*="background"]{
              display: flex !important;
              justify-content: center;
              align-items: center;
              p{
              color: #fff;
              font-size: 16px;
              margin: 0;
              }
            }
          }
        }
      }
    }
  }
}
View Compiled
$(function() {
        $('#tabs > li').each(function() {
            var z_index = $(this).length - $(this).index();
            $(this).css({
                'background': $(this).attr('vc-code'),
                'z-index': z_index + 1
            });

            var c_color = $(this).attr('vc-code');
            $('div:nth-child(' + ($(this).index() + 1) + ') > .main').css('background', c_color);
        });


        $('#tabs > li').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            $('.tab-panes > div#' + $(this).attr('title')).addClass('showit').siblings().removeClass('showit');
        });
        $('.tab-panes > div > div:not(.main)').each(function(){
            var shadelev = ($(this).siblings('.main').index() - $(this).index()) * 5;
            var shade = $(this).siblings('.main').css('background');
            shade = rgb2hex(shade);
            var newshade = LightenDarkenColor(shade, shadelev);
            $(this).css('background', newshade);
        });

        $('.tab-panes > div > div').each(function() {
            var code = $(this).css('background');
            code = rgb2hex(code);
            $(this).append('<p>' + code + '</p>');
        });
    });

    function rgb2hex(rgb) {
        rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
        return (rgb && rgb.length === 4) ? "#" +
            ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
    }

    function LightenDarkenColor(col, amt) {
        var usePound = false;
        if (col[0] == "#") {
            col = col.slice(1);
            usePound = true;
        }
        var num = parseInt(col, 16);
        var r = (num >> 16) + amt;
        if (r > 255) r = 255;
        else if (r < 0) r = 0;
        var b = ((num >> 8) & 0x00FF) + amt;
        if (b > 255) b = 255;
        else if (b < 0) b = 0;
        var g = (num & 0x0000FF) + amt;
        if (g > 255) g = 255;
        else if (g < 0) g = 0;
        return (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.