CodePen

HTML

            
              <div class='colorWheel'></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body { background: gainsboro; } 
.colorWheel {
  position: relative;
  margin: 1em auto;
  border: solid 2em white;
  width: 16em; height: 16em;
  border-radius: 50%;
  background: 
    linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0,
    linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%) 0 0,
    linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
    linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
    linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
    linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
    linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
    linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
    #43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 1s;
}
.colorWheel:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -2.8em;
  width: 5.6em; height: 5.6em;
  border-radius: 50%;
  /* add slash at end of line to see central part *
  opacity: .15;
  /**/
  background: white;
  content: '';
}
.colorWheel:hover {
  transform: rotate(360deg);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
anyone interested in me writing a detailed explanation about the maths of how to compute angles and percentages for the gradients?

Explained here http://hugogiraudel.com/blog/css-gradients
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................