colorpicker.css

@import "compass/css3";

@mixin circle($size) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - #{$size/2});
  top: calc(50% - #{$size/2});
  width: $size;
  height: $size;
}

.button {
  margin: 30px auto 0;
  width: 13em;
  height: 13em;
  border-radius: 3em;
  position: relative;
  background-image: linear-gradient(to bottom, #ddd, #d5d5d5);
  box-shadow: inset 0 3px 7px 0px #FFF, inset 0 -5px 5px 0px rgba(0, 0, 0, 0.2), 0 27px 51px -10px rgba(0, 0, 0, 0.5);
  &:before, &:after {
    box-sizing: border-box;
    display: block;
  }
  &:before {
    @include circle(12.5em);
    background-image: linear-gradient(to bottom, #fff, #aaa);
    -webkit-filter: blur(4px);
  }
  &:after {
    @include circle(11em);
    background-image: linear-gradient(to bottom, #c5c5c5, #ddd 80%);
    box-shadow: 0 4px 28px -10px rgba(0, 0, 0, 0.2);
  }
}
$wheel: 9.5em;
.wheel, .colors, .color {
  @include circle($wheel);
}
.wheel {
  display: block;
  z-index: 1;
  box-shadow: inset 0 16px 32px 14px rgba(0, 0, 0, .7);
}
.colors {
  list-style: none;
  background: #ddd;
  position: relative;
  -webkit-filter: blur(10px);
  transform: rotate(170deg) scaleX(-1);
}
.color {
  clip: rect(0px, $wheel, $wheel, #{$wheel/2});
  &:after {
    @include circle($wheel);
    clip: rect(0px, #{$wheel/2}, $wheel, 0px);
  }
}
$colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
@for $i from 0 to length($colors) {
  .color:nth-child(#{1+$i}):after {
    background-color: nth($colors, $i+1);
    z-index: #{length($colors)-$i};
    @if $i < 6 {
      transform:rotate(#{30*(1+$i)}deg);
    } @else {
      transform:rotate(#{-30+(30*(1+$i))}deg);
    }
  }
}
.color:nth-child(n+7) {
  transform:rotate(180deg);
}
.center {
  @include circle(6.3em);
  z-index: 2;
  background-image: linear-gradient(to bottom, #eee, #ccc);
  box-shadow: inset 0 3px 7px 0px #FFF, 0 25px 30px -5px rgba(0, 0, 0, 0.5);
  &:before {
    @include circle(4.2em);
    background-image: linear-gradient(to bottom, #FFF 20%, #AAA);
    box-shadow: 0 25px 30px -5px rgba(0, 0, 0, .5);
  }
  &:after {
    @include circle(3em);
    background-image: linear-gradient(to bottom, #aaa, #f5f5f5 80%);
    box-shadow: inset 0 -1px 4px 0px #FFF;
  }
}
.pin {
  @include circle(5.5em);
    z-index: -1;
    -webkit-animation: spin infinite 4s linear;
  &:after {
    content: "";
    width: 40px;
    height: 40px;
    transform: rotate(10deg) skew(40deg, 20deg);
    box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 15px 3px rgba(0,0,0,.2);
    background: #FFF;
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 10px;
  }
}

@-webkit-keyframes spin {
  from{
    -webkit-transform: rotate(0deg);
  }
  to{
    -webkit-transform: rotate(360deg);
  }
}
body {
  background: #555;
}