%input#pick1.clr1{:name=>"pick",:type=>"radio",href:"#",:checked => true}
%input#pick2.clr2{:name=>"pick",:type=>"radio",href:"#"}
%input#pick3.clr3{:name=>"pick",:type=>"radio",href:"#"}
%input#pick4.clr4{:name=>"pick",:type=>"radio",href:"#"}
%input#pick5.clr5{:name=>"pick",:type=>"radio",href:"#"}
#clr
  #stripe
    #swatches
      #bases
        %label.base.one{:for=>"pick1"}
        %label.base.two{:for=>"pick2"}
        %label.base.thr{:for=>"pick3"}
        %label.base.fou{:for=>"pick4"}
        %label.base.fiv{:for=>"pick5"}  
      .light
        .swatch.one
        .swatch.two
        .swatch.thr
        .swatch.fou
        .swatch.fiv
      .dark
        .swatch.one
        .swatch.two
        .swatch.thr
        .swatch.fou
        .swatch.fiv


View Compiled
@import "compass/css3";

/////////////////////
// SASSY SAUCE <3///
///////////////////

$color1: #34495E;
$color2: #16A085;
$color3: #6A5BA6;
$color4: #E67E22;
$color5: #C0392B;

// SWATCH LABEL // 
$pre: hex;

// BASE COLOR / SWATCH BLENDS //
$bases: (clr1:$color1, clr2:$color2, clr3:$color3, clr4:$color4, clr5:$color5); 
$picks: (clr1:one, clr2:two, clr3:thr, clr4:fou, clr5:fiv);
$swatches: (one:50%, two:40%, thr:30%, fou:20%, fiv:10%),
  (one:5%, two:10%, thr:15%, fou:20%, fiv:25%);

/* Light Swatches */
// FOR EACH BASE COLOR - BLEND SWATCH - LIGHTS //
@each $base, $clr in $bases {
@each $swatch, $value in nth($swatches,1) {

    $lighten: (lighten($clr,$value));
      
        .#{$base}:checked ~ #clr .light .swatch.#{$swatch} {
          background: $lighten;

            &:after {
            content: '#{$pre} #{$lighten}';
            border-top: 3px solid darken($clr, 15%);
            color: darken($clr,15%);
            } 
            &:hover {
            background: darken(saturate($lighten,5%),5%);
            }
        }
}
}

/* Dark Swatches */
// FOR EACH BASE COLOR - BLEND SWATCH - DARKS //
@each $base, $clr in $bases {
@each $swatch, $value in nth($swatches,2) {

    $darken: (darken($clr,$value));

        .#{$base}:checked ~ #clr .dark .swatch.#{$swatch} {
        background: $darken;

            &:after {
            content: '#{$pre} #{$darken}';
            border-top: 3px solid darken($clr, 15%);
            color: darken($clr,15%);
            }
            &:hover {
            background: darken(saturate($darken,5%),5%);
            }
        }
}
}

/* Base Swatches */
// BASE SWATCH SELECTION //
@each $pick, $num in $picks {
.#{$pick}:checked ~ #clr #stripe #swatches #bases .base.#{$num} {
  z-index:20 !important;
  @include transition(0.4s all cubic-bezier(0.33,-0.33,0.33,1));
  @include rotate(0deg);
}
  }

/* Page Colors */
// MATCH PAGE COLORS //
@each $base, $clr in $bases {

.#{$base}:checked ~ #clr #stripe {
  background: lighten(desaturate($clr,15%),35%);
  border: 1px solid darken(saturate($clr,5%),10%);
  border-width: 10px;
  border-bottom-color: darken(saturate($clr,10%),15%);
  border-right-color: darken(saturate($clr,5%),10%);
  border-top-color: lighten(saturate($clr,0%),0%);
  border-left-color: lighten(saturate($clr,4%),4%);
}

.#{$base}:checked ~ #clr {
  background: desaturate(darken($clr,15%),20%);}
}

/* Default Colors */
@each $swatch, $value in nth($swatches,1) {

    $lighten: (lighten($color1,$value));
      
        #clr .light .swatch.#{$swatch} {
        background: $lighten;

            &:after {
            content: '#{$pre} #{$lighten}';
            border-top: 3px solid darken($color1, 15%);
            color: darken($color1,15%);
            } 
            &:hover {
            background: darken(saturate($lighten,5%),5%);
            }
        }
}

@each $swatch, $value in nth($swatches,2) {

    $darken: (darken($color1,$value));

        #clr .dark .swatch.#{$swatch} {
        background: $darken;

            &:after {
            content: '#{$pre} #{$darken}';
            border-top: 3px solid darken($color1, 15%);
            color: darken($color1,15%);
            }
            &:hover {
            background: darken(saturate($darken,5%),5%);
            }
        }
}

#clr #stripe {
  background: lighten(desaturate($color1,15%),50%);
  border: 1px solid darken(saturate($color1,5%),10%);
  border-width: 10px;
  border-bottom-color: darken(saturate($color1,10%),15%);
  border-right-color: darken(saturate($color1,5%),10%);
  border-top-color: lighten(saturate($color1,0%),0%);
  border-left-color: lighten(saturate($color1,4%),4%);
}

#clr {
  background: desaturate(darken($color1,15%),20%);
}

/* Fonts */
// FONT //
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
@mixin font($size:16px, $style: 400, $space: 1px, $clr: #555) {
  font: $style $size 'Roboto Condensed', Arial, sans-serif;
  font-size: ($size / 10)em;
  color: $clr;
  text-transform: uppercase;
  letter-spacing: $space+px;
}

/////////////////////
// SWATCH STYLE ////
///////////////////

#clr {
  width: 100%;
  height: 100%;
  padding-bottom: 10%;
  position: absolute;
  @include transition(0.8s all ease);
}

#stripe {
  position: absolute;
  width: 715px;
  height: 670px;
  padding: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  @include transition(0.4s all ease);
  @include border-radius (24px);
  @include box-shadow(0px 8px 12px rgba(#222,0.2));
}

#swatches {
  position: absolute;
  width: 700px;
  height: 650px;
  top: 50%;
  margin-top: -315px;
  margin-left: 23px;
}

.swatch {
  width: 150px;
  height: 100%;
  float: left;
  margin-left:-150px;
  overflow:hidden;
  cursor: pointer;
  @include transition(0.4s all ease);
  @include border-radius(8px);
  @include box-shadow(0 0 12px rgba(#222,0.3));
    &:first-child {
    margin-left: 0;
    }
    &:last-child
    {
        &:after {
        border-right:none;
        }
    }
}

.swatch:not(:first-child) {
  @include animation(slide 0.4s forwards);
  @include animation-delay(1s);
}
.dark, .light {
  width:100%;
  height: 150px;
  margin-bottom: 15px;
  float:left;
}

.dark {
  margin-bottom: 40px;
}

:after {
  @include font(19px, 700, 1);
  display: block;
  padding: 8px;
  height: 20px;
  @include box-shadow(2px 0px 8px rgba(#222,0.3));
  margin-top: 116px;
  background: rgba(#FFF,0.92);
  line-height:16px;
  text-align:left;
}

/* Base Swatches */
#bases {
  width:100%;
  height: 335px;
  float:left;
}

.base {
  width:150px;
  height: 320px;
  background: $color1;
  position:absolute;
  overflow: hidden;
  @include border-radius(8px);
  @include box-shadow(0 0 12px rgba(#222,0.3));
  @include transition(0.4s all ease);
  cursor: pointer;
    &:hover {
    @include transition(0.4s background ease);
    background: darken(saturate($color1,20%),10%);
    }
    &:after {
    border-top: 3px solid;
    border-right:none;
    margin-top: 261px;
    height: 42px;
    font-size: 21px;
    line-height: 44px;
    letter-spacing: 1.25px;
    }
  &.one {
    background: $color1;
    z-index:1;
    &:after {
    content: '#{$pre} #{$color1}';
    color: darken($color1,15%);
    }
    &:hover {
    background: darken(saturate($color1,20%),10%);
    } 
  }
  &.two {
    background: $color2;
    z-index:9;
    &:after {
    content: '#{$pre} #{$color2}';
    color: darken($color2,15%);
    }
    &:hover {
    background: darken(saturate($color2,20%),10%);
    } 
  }
  &.thr {
    background: $color3;
    z-index:8;
    &:after {
    content: '#{$pre} #{$color3}';
    color: darken($color3,15%);
    }
    &:hover {
    background: darken(saturate($color3,20%),10%);
    }
  }
  &.fou {
    background: $color4;
    z-index:7;
    &:after {
    content: '#{$pre} #{$color4}';
    color: darken($color4,15%);
    }
    &:hover {
    background: darken(saturate($color4,20%),10%);
    }
  }
  &.fiv {
    background: $color5;
    z-index:6;
        &:after {
        content: '#{$pre} #{$color5}';
        color: darken($color5,15%);
    }
    &:hover {
    background: saturate($color5,10%);
    }
  }
}

/* Fan Out Animation */
// ANIMATION //
.fan {
    @include transform-origin(100%, 100%);
    @include rotate(90deg);
}

.fan1 {
    @include transform-origin(100%, 100%);
    @include rotate(20deg);
}

.fan2 {
    @include transform-origin(100%, 100%);
    @include rotate(40deg);
}

.fan3 {
    @include transform-origin(100%, 100%);
    @include rotate(60deg);
}

.fan4 {
    @include transform-origin(100%, 100%);
    @include rotate(80deg);
}

/* Slide Animation */
#bases, .light, .dark {
    margin-left: 265px;
    @include animation(center 0.4s forwards);
    @include animation-delay(1s);
}

@include keyframes(slide) {
    0%{}
    100%{margin-left:-20px;}
}

@include keyframes(center) {
    0%{}
    100%{margin-left:0;}
}

/*~*/
body {margin:0;padding:0;overflow:hidden;}
input {display: none;}
:focus {outline: none;}
::selection {background:transparent;}
// ADD CSS3 CLASS ON PLAGELOAD
setTimeout(function() {
  $(".base.one").addClass('fan');
  $(".base.two").addClass('fan1');
  $(".base.thr").addClass('fan2');
  $(".base.fou").addClass('fan3');
  $(".base.fiv").addClass('fan4');
}, 990);

// UNCHECK ALL ON CLICK OF CHECKED
var allRadios = document.getElementsByName('pick');
var booRadio;
var x = 0;
for (x = 0; x < allRadios.length; x++) {

  allRadios[x].onclick = function() {
    if (booRadio == this) {
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };
}

// DEFAULT ON UNCHECK
$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).is(":checked")) {

    } else if ($(this).is(":not(:checked)")) {
      $('input.clr1').prop("checked", "checked");
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js