Need To Display On Page The Color Name Instead Of The Hue-rotate Degrees Using Javascript
I have a functionallity which allow my users to choose a theme color via range selector. The code is a mix of an answer to a previous question and my own. This is working great but
Solution 1:
Maybe that approach will solve you issue. Just put the switch in the function.
const value = document.getElementById('value');
const body = document.getElementById('usrhue');
value.textContent = `Color: Tomato`;
document.getElementById('hue-rotate').oninput = function() {
const filter = 'hue-rotate(xdeg)'.replace('x', this.value);
body.style.filter = filter;
switch (this.value) {
case '45':
return (value.textContent = `Color: Wood`);
case '90':
return (value.textContent = `Color: Green House`);
case '135':
return (value.textContent = `Color: Green Gross`);
case '180':
return (value.textContent = `Color: Fun Green`);
case '225':
return (value.textContent = `Color: Sky Blue`);
case '270':
return (value.textContent = `Color: Vivid Violet`);
case '315':
return (value.textContent = `Color: Rose & Guns`);
default:
return (value.textContent = `Color: Tomato`);
}
};* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: serif;
}
body {
color: #ff0000;
background: #f2f2f2;
padding: 20px;
}
a {
color: #0033cc;
}
h1 {
color: #0033cc;
}
svg {
fill: #0000cc;
}<body id="usrhue">
<h3>Theme Color</h1>
<pre><h3><code id="value">hue-rotate(0deg)</code></h3></pre>
<input id="hue-rotate" step="45" type="range" min="0" max="315" value="0">
<div>
<div class="tile">navbar</div>
<svg class="icon" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" width="50" height="33" viewbox="0 0 50 33"><path style="fill-opacity:1;fill-rule:evenodd;stroke:none" d="m 50,16.111089 c -0.0023,-0.52719 -0.269301,-1.175411 -0.836045,-1.837787 L 33.538651,0 l 0,4.099986 10.560199,12.011103 -10.560199,12.011102 0,4.099986 15.625304,-14.273302 C 49.730699,17.286499 49.997802,16.638278 50,16.111089 Z m -50,0 c 0.0022,-0.52719 0.2693022,-1.175411 0.8360452,-1.837787 L 16.46135,0 l 0,4.099986 -10.5601995,12.011103 10.5601995,12.011102 0,4.099986 L 0.8360452,17.948875 C 0.2693022,17.286499 0.0021979,16.638278 0,16.111089 Z"/></svg>
</div>
</body>With LocalStorage
const theme = localStorage.getItem('theme');
const value = document.getElementById('value');
const body = document.getElementById('usrhue');
const hueRotate = document.getElementById('hue-rotate');
value.textContent = `Color: Tomato`;
if (!theme) {
localStorage.setItem(
'theme',
JSON.stringify({
color: 'hue-rotate(0deg)',
num: 0,
name: `Tomato`,
})
);
}
if (theme) {
const LS = JSON.parse(theme);
console.log(LS);
body.style.filter = LS.color;
hueRotate.value = LS.num;
value.textContent = `Color: ${LS.name}`;
}
hueRotate.oninput = function () {
const filter = 'hue-rotate(xdeg)'.replace('x', this.value);
body.style.filter = filter;
let name;
switch (this.value) {
case '45':
name = `Wood`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color:${name}`);
case '90':
name = `Green House`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
case '135':
name = `Green Gross`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
case '180':
name = `Fun Green`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
case '225':
name = `Sky Blue`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
case '270':
name = `Vivid Violet`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
case '315':
name = `Rose & Guns`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
default:
name = `Tomato`;
localStorage.setItem(
'theme',
JSON.stringify({
color: body.style.filter,
num: this.value,
name,
})
);
return (value.textContent = `Color: ${name}`);
}
};
Solution 2:
There isn't as far as I can tell, a way to get the hex color of an element after filters have been applied to it. However, it is possible to implement the hue-rotate function in Javascript to get the hex value of the color.
CSS hue-rotate is just an approximation so we can either use Javascript to do a true hue-rotate or we can use Javascript to generate the same approximation as CSS.
For a true hue-rotate you can the spin() function from TinyColor.js
let hr = new tinycolor("#ff0000").spin(45).toHex();
for a css approximation you can use the function from this answer https://stackoverflow.com/a/29521147/2666293
I've slightly modified this function in the example below.
I have created a snipped below to compare the options. The option contains both an example for getting the color names via lookup table (the colors in the table have very slight changes so they match up with the output of hueRotateJs) and an example of using Name that Color
let initialColor = "#006648";
let colorLookupTable = {
"#006648":"Fun Green",
"#135b81":"Chathams Blue",
"#48489c":"Victoria Violet",
"#81398a":"Vivid Violet",
"#9c3654":"Night Shadz",
"#8a421b":"Rope Color",
"#545400":"Verdum Green",
"#1b6313":"Green House"
};
function lookupColor(colorhex)
{
if (colorLookupTable.hasOwnProperty(colorhex)) {
return colorLookupTable[colorhex];
}
return "Unknown";
}
function processColors()
{
"use strict";
let angle = parseInt(document.getElementById("hue-rotate").value);
//lookup color hex codes
let tcHex = "#"+(new tinycolor(initialColor).spin(angle).toHex());
let jsHex = hueRotateJs(initialColor,angle);
//lookup color names
let tcNameNtc = ntc.name(tcHex)[1];
let tcNameLookup = lookupColor(tcHex);
let jsNameNtc = ntc.name(jsHex)[1];
let jsNameLookup = lookupColor(jsHex);
//output colors to html
let hrTCelement = document.getElementById("hrTC")
hrTCelement.style.color = tcHex;
hrTCelement.innerHTML = "TinyColor: <br/>"+
"NTC name: "+tcNameNtc+"<br/>"+
"Lookup Table Name: "+tcNameLookup+"<br/>"+
"hex: "+tcHex;
let hrJsElement = document.getElementById("hrJS")
hrJsElement.style.color = jsHex;
hrJsElement.innerHTML = "hueRotateJs: <br/>"+
"NTC name: "+jsNameNtc+"<br/>"+
"Lookup Table Name: "+jsNameLookup+"<br/>"+
"hex: "+jsHex;
let cssElement = document.getElementById("hrCss");
hrCss.style.color = initialColor;
hrCss.style.filter = "hue-rotate("+angle+"deg)"
}
window.addEventListener("load",processColors);
let rotater = document.getElementById("hue-rotate");
rotater.addEventListener("change",processColors);
function hueRotateJs(color,angle) {
// Get the RGB and angle to work with.
var r = parseInt(color.substr(1, 2), 16);
var g = parseInt(color.substr(3, 2), 16);
var b = parseInt(color.substr(5, 2), 16);
var angle = (parseInt(angle) % 360 + 360) % 360;
// Hold your breath because what follows isn't flowers.
var matrix = [ // Just remember this is the identity matrix for
1, 0, 0, // Reds
0, 1, 0, // Greens
0, 0, 1 // Blues
];
// Luminance coefficients.
var lumR = 0.2126;
var lumG = 0.7152;
var lumB = 0.0722;
// Hue rotate coefficients.
var hueRotateR = 0.143;
var hueRotateG = 0.140;
var hueRotateB = 0.283;
var cos = Math.cos(angle * Math.PI / 180);
var sin = Math.sin(angle * Math.PI / 180);
matrix[0] = lumR + (1 - lumR) * cos - lumR * sin;
matrix[1] = lumG - lumG * cos - lumG * sin;
matrix[2] = lumB - lumB * cos + (1 - lumB) * sin;
matrix[3] = lumR - lumR * cos + hueRotateR * sin;
matrix[4] = lumG + (1 - lumG) * cos + hueRotateG * sin;
matrix[5] = lumB - lumB * cos - hueRotateB * sin;
matrix[6] = lumR - lumR * cos - (1 - lumR) * sin;
matrix[7] = lumG - lumG * cos + lumG * sin;
matrix[8] = lumB + (1 - lumB) * cos + lumB * sin;
function clamp(num) {
return Math.round(Math.max(0, Math.min(255, num)));
}
function hexOf(diget){
let prepend = (diget <= 15)?"0":"";
return prepend+diget.toString(16);
}
var R = clamp(matrix[0] * r + matrix[1] * g + matrix[2] * b);
var G = clamp(matrix[3] * r + matrix[4] * g + matrix[5] * b);
var B = clamp(matrix[6] * r + matrix[7] * g + matrix[8] * b);
return "#"+hexOf(R)+hexOf(G)+hexOf(B);
}<script type="text/javascript" src="https://chir.ag/projects/ntc/ntc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>
<p id="hrCss">Css hue-rotate</p>
<p id="hrJS"></p>
<p id="hrTC"></p>
<input id="hue-rotate" step="45" type="range" min="0" max="315" value="0">
Post a Comment for "Need To Display On Page The Color Name Instead Of The Hue-rotate Degrees Using Javascript"