Apply effect to hue range

by PhilQ

HTML

<div id="wheel" class="color-wheel">
	<div id="overlay">Overlay of color with <code>mix-blend-mode: difference</code></div>
	Linear-gradient background
</div>
<div id="effected" class="color-wheel">Linear-gradient background with partial-hue filter</div>
<div id="css-rotated" class="color-wheel">Linear-gradient background with CSS hue-rotate</div>

<select id="blendmode">
	<optgroup label="Normal">
		<option value="normal">normal</option>
	</optgroup>
	<optgroup label="Darken">
		<option value="darken">darken</option>
		<option value="multiply">multiply</option>
		<option value="color-burn">color-burn</option>
	</optgroup>
	<optgroup label="Lighten">
		<option value="lighten">lighten</option>
		<option value="screen">screen</option>
		<option value="color-dodge">color-dodge</option>
	</optgroup>
	<optgroup label="Contrast">
		<option value="overlay">overlay</option>
		<option value="soft-light">soft-light</option>
		<option value="hard-light">hard-light</option>
	</optgroup>
	<optgroup label="Inversion">
		<option value="difference" selected>difference</option>
		<option value="exclusion">exclusion</option>
	</optgroup>
	<optgroup label="Component">
		<option value="hue">hue</option>
		<option value="saturation">saturation</option>
		<option value="color">color</option>
		<option value="luminosity">luminosity</option>
	</optgroup>
</select>

<input id="color" type="color" value="#00ffff" list="main-colors" />
<datalist id="main-colors">
	<option value="#ff0000">Red</option>
	<option value="#ffff00">Yellow</option>
	<option value="#00ff00">Green</option>
	<option value="#00ffff">Cyan</option>
	<option value="#0000ff">Blue</option>
	<option value="#ff00ff">Magenta</option>
	<option value="#000000">Black</option>
	<option value="#404040">Darkgrey</option>
	<option value="#808080">Grey</option>
	<option value="#bfbfbf">Lightgrey</option>
	<option value="#ffffff">White</option>
</datalist>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">
 ...

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
	width: 100%;
	height: 100%;
}
body {
	background: #000;
	background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".25" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
	background-size: 30px 30px;
	background-position: center bottom;
}
div {
	display: inline-block;
}
.color-wheel {
	/* background: linear-gradient(to left, red, yellow, lime, aqua, blue, magenta, red); */
	/* background: linear-gradient(to left, #050000, #050500, #000500, #000505, #000005, #050005, #050000); */
	/* background: linear-gradient(to left, #800, #880, #080, #088, #008, #808, #800); */
	/* background: linear-gradient(to left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); */
	/* background: linear-gradient(to left, #f88, #ff8, #8f8, #8ff, #88f, #f8f, #f88); */
	/* background: linear-gradient(to left, #fffafa, #fffffa, #fafffa, #faffff, #fafaff, #fffaff, #fffafa); */
	
	/* background: linear-gradient(to left, #800, #880, #080, #088, #008, #808, #800) top /100% 50%, linear-gradient(to left, #f88, #ff8, #8f8, #8ff, #88f, #f8f, #f88) bottom /100% 50%; */
	background: linear-gradient(to left, #400, #440, #040, #044, #004, #404, #400) top /100% 50%, linear-gradient(to left, #f44, #ff4, #4f4, #4ff, #44f, #f4f, #f44) bottom /100% 50%;
	background-repeat: no-repeat;
}
#wheel {
	width: 100%;
	height: 200px;
}
#overlay {
	position: absolute;
	top: 50px;
	width: 100%;
	height: 100px;
	background: #00ffff;
	/* background: linear-gradient(to left, #000, #080, #080, #088, #008, #008, #000); */
	/* background: linear-gradient(to left, #f44, #ff4, #ff4, #fff, #f4f, #f4f, #f44); */
	mix-blend-mode: difference;
	/* background-blend-mode: normal; */
	/* Without isolation, the background color will be taken into account */
	/* isolation: isolate; */
}
#effected {
	width: 100%;
	height: 100px;
  filter:...

JavaScript

$('#blendmode').on('change', function(e) {
	$('#overlay').css('mix-blend-mode', $(this).val());
	/* $('#overlay').css('background-blend-mode', $(this).val()) */;
	$('#blending-mode').get(0).setAttribute('mode', $(this).val());
});
$('#color').on('change', function(e) {
	$('#overlay').css('background', $(this).val());
	$('feFlood').get(0).setAttribute('flood-color', $(this).val());
});