Comparing transitions of RGB(a) and HSL(a) colors

dabblet.css

/* Comparing transitions of RGB(a) and HSL(a) colors */
/* There should be two boxes per row during transition, not three/four */
.wrapper {
  min-height: 100%;
}
h1 {
  font-weight: normal;
  font-size: 1.5em;
}
.wrapper div {
  float: left;
  width: 25%;
  height: 50px;
  transition: all 4s;
}
/* grayscale (vary lightness) */
.one.rgb {
  background-color: rgb(117,117,117);
}
.wrapper:hover .one.rgb {
  background-color: rgb(220,220,220);
}
.one.rgba {
  background-color: rgba(117,117,117,.4);
}
.wrapper:hover .one.rgba {
  background-color: rgba(220,220,220,.8);
}
.one.hsl {
  background-color: hsl(0, 0%, 46%);
}
.wrapper:hover .one.hsl {
  background-color: hsl(0, 0%, 86%);
}
.one.hsla {
  background-color: hsla(0, 0%, 46%, .4);
}
.wrapper:hover .one.hsla {
  background-color: hsla(0, 0%, 86%, .8);
}
/* vary saturation and lightness */
.two.rgb {
  clear: left;
  background-color: rgb(220,22,22);
}
.wrapper:hover .two.rgb {
  background-color: rgb(220,117,117);
}
.two.rgba {
  background-color: rgba(220,22,22,.4);
}
.wrapper:hover .two.rgba {
  background-color: rgba(220,117,117,.8);
}
.two.hsl {
  background-color: hsl(0, 83%, 47%);
}
.wrapper:hover .two.hsl {
  background-color: hsl(0, 59%, 66%);
}
.two.hsla {
  background-color: hsla(0, 83%, 47%, .4);
}
.wrapper:hover .two.hsla {
  background-color: hsla(0, 59%, 66%, .8);
}
/* vary hue and lightness */
.three.rgb {
  clear: left;
  background-color: rgb(220,220,22);
}
.wrapper:hover .three.rgb {
  background-color: rgb(117,22,220);
}
.three.rgba {
  background-color: rgba(220,220,22,.4);
}
.wrapper:hover .three.rgba {
  background-color: rgba(117,22,220,.8);
}
.three.hsl {
  background-color: hsl(60, 83%, 47%);
}
.wrapper:hover .three.hsl {
  background-color: hsl(269, 83%, 47%);
}
.three.hsla {
  background-color: hsla(60, 83%, 47%, .4);
}
.wrapper:hover .three.hsla {
  background-color: hsla(269, 83%, 47%, .8);
}
/* vary saturation */
.four.rgb {
  clear: left;
  background-color: rgb(153, 102, 102);
}
.wrapper:hover .four.rgb {
  background-color: rgb(230, 25, 25);
}
.four.rgba {
  background-color: rgba(153, 102, 102,.4);
}
.wrapper:hover .four.rgba {
  background-color: rgba(230, 25, 25,.8);
}
.four.hsl {
  background-color: hsl(0,20%,50%);
}
.wrapper:hover .four.hsl {
  background-color: hsl(0,80%,50%);
}
.four.hsla {
  background-color: hsla(0,20%,50%,.4);
}
.wrapper:hover .four.hsla {
  background-color: hsla(0,80%,50%,.8);
}
/* to transparent */
.five.rgba {
  clear: left;
  background-color: rgba(153, 102, 102, 1);
}
.wrapper:hover .five.rgba {
  background-color: rgba(153, 102, 102, 0);
}
.five.hsla {
  background-color: hsla(0,20%,50%,1);
}
.wrapper:hover .five.hsla {
  background-color: hsla(0,20%,50%,0);
}
.six.rgba {
  background-color: rgba(153, 102, 102, 1);
}
.wrapper:hover .six.rgba {
  background-color: transparent;
}
.six.hsla {
  background-color: hsla(0,20%,50%,1);
}
.wrapper:hover .six.hsla {
  background-color: transparent;
}

dabblet.html

<div class="wrapper">
<h1>Comparing transitions on RGB(a) and HSL(a)</h1>
<p>Colors transition in RGB(a) color space. You shouldn’t see extra boxes per row during transition.</p>
<div class="one rgb"></div>
<div class="one hsl"></div>
<div class="one rgba"></div>
<div class="one hsla"></div>
<div class="two rgb"></div>
<div class="two hsl"></div>
<div class="two rgba"></div>
<div class="two hsla"></div>
<div class="three rgb"></div>
<div class="three hsl"></div>
<div class="three rgba"></div>
<div class="three hsla"></div>
<div class="four rgb"></div>
<div class="four hsl"></div>
<div class="four rgba"></div>
<div class="four hsla"></div>
<div class="five rgba"></div>
<div class="five hsla"></div>
<div class="six rgba"></div>
<div class="six hsla"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}