Hue rotate comparison CSS/SVG

by PhilQ

HTML

<h1>Explicit HSL Hue Rotation vs. CSS Filter Hue Rotation</h1>
<h3>Legend (out-to-in):</h3>
<ul>
	<li>1) CSS hsl explicit</li>
	<li>2) CSS hue-rotate filter</li>
	<li>3) SVG hueRotate filter (sRGB)</li>
	<li>4) SVG hueRotate filter (linearRGB)</li>
	<li><br/><i>2) and 3) have the same colors</i></li>
</ul>

<div>hsl(0,50%,50%)</div>
<div style="-webkit-transform: rotate(30deg); background-color: hsl(30,50%,50%)">hsl(30,50%,50%)</div>
<div style="-webkit-transform: rotate(60deg); background-color: hsl(60,50%,50%)">+60deg hue</div>
<div style="-webkit-transform: rotate(90deg); background-color: hsl(90,50%,50%)">etc.</div>
<div style="-webkit-transform: rotate(120deg); background-color: hsl(120,50%,50%)"></div>
<div style="-webkit-transform: rotate(150deg); background-color: hsl(150,50%,50%)"></div>
<div style="-webkit-transform: rotate(180deg); background-color: hsl(180,50%,50%)"></div>
<div style="-webkit-transform: rotate(210deg); background-color: hsl(210,50%,50%)"></div>
<div style="-webkit-transform: rotate(240deg); background-color: hsl(240,50%,50%)"></div>
<div style="-webkit-transform: rotate(270deg); background-color: hsl(270,50%,50%)"></div>
<div style="-webkit-transform: rotate(300deg); background-color: hsl(300,50%,50%)"></div>
<div style="-webkit-transform: rotate(330deg); background-color: hsl(330,50%,50%)"></div>

<p>hue-rotate</p>
<p style="-webkit-transform: rotate(30deg); -webkit-filter: hue-rotate(30deg)">hue-rotate 30deg</p>
<p style="-webkit-transform: rotate(60deg); -webkit-filter: hue-rotate(60deg)">hue-rotate 60deg</p>
<p style="-webkit-transform: rotate(90deg); -webkit-filter: hue-rotate(90deg)">etc.</p>
<p style="-webkit-transform: rotate(120deg); -webkit-filter: hue-rotate(120deg)"></p>
<p style="-webkit-transform: rotate(150deg); -webkit-filter: hue-rotate(150deg)"></p>
<p style="-webkit-transform: rotate(180deg); -webkit-filter: hue-rotate(180deg)"></p>
<p style="-webkit-transform: rotate(210deg); -webkit-filter:...

CSS

* {margin: 0; padding: 0px; box-sizing: border-box;}
div {
  background-color: hsl(0,50%,50%);
  position:absolute;
  top:80px;
  left:350px;
  width:100px;
  height:40px;
  -webkit-transform-origin: 50% 240px;
}

p {
  background-color: hsl(0,50%,50%);
  position:absolute;
  top:130px;
  left:360px;
  width:80px;
  height:40px;
  -webkit-transform-origin: 50% 190px;
}

span {
  background-color: hsl(0,50%,50%);
  position:absolute;
  top:180px;
  left:370px;
  width:60px;
  height:40px;
  -webkit-transform-origin: 50% 140px;
}

b {
  background-color: hsl(0,50%,50%);
  position:absolute;
  top:230px;
  left:380px;
  width:40px;
  height:40px;
  -webkit-transform-origin: 50% 90px;
	font-weight: normal;
}