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;
}

<bodyid="usrhue"><h3>Theme Color</h1><pre><h3><codeid="value">hue-rotate(0deg)</code></h3></pre><inputid="hue-rotate"step="45"type="range"min="0"max="315"value="0"><div><divclass="tile">navbar</div><svgclass="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"><pathstyle="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) {
    constLS = 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"
};

functionlookupColor(colorhex)
{
    if (colorLookupTable.hasOwnProperty(colorhex)) {
        return colorLookupTable[colorhex];
    }
    return"Unknown";
}

functionprocessColors()
{
    "use strict";

    let angle = parseInt(document.getElementById("hue-rotate").value);

    //lookup color hex codeslet tcHex = "#"+(newtinycolor(initialColor).spin(angle).toHex());
    let jsHex = hueRotateJs(initialColor,angle);

    //lookup color nameslet tcNameNtc = ntc.name(tcHex)[1];
    let tcNameLookup = lookupColor(tcHex);

    let jsNameNtc = ntc.name(jsHex)[1];
    let jsNameLookup = lookupColor(jsHex);


    //output colors to htmllet 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);

functionhueRotateJs(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 for1, 0, 0,   // Reds0, 1, 0,   // Greens0, 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;
    
    functionclamp(num) {
        returnMath.round(Math.max(0, Math.min(255, num)));
    }
    
    functionhexOf(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);
}

<scripttype="text/javascript"src="https://chir.ag/projects/ntc/ntc.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script><pid="hrCss">Css hue-rotate</p><pid="hrJS"></p><pid="hrTC"></p><inputid="hue-rotate"step="45"type="range"min="0"max="315"value="0">