Validating css color names

Question

I\'ve written a jQuery plugin that accepts css colors for some of its parameters.

I want to validate them. If it was just a hex or rgb value I could do that with a r

Answer 1

I know this question is fairly old but I came up with a pure javascript solution for checking colors which seems to work in every browser and wanted to share it

This function uses the browser to convert any input string into a CSS color string (if possible)

function getColorCSS(c) {
    var ele = document.createElement("div");
    ele.style.color = c;
    return ele.style.color.replace(/\s+/,'').toLowerCase();
}

Let's take a look at the function output based on different inputs...

INVALID INPUTS

Basically anytime the browser can't figure out how to render the input string as a color an empty string is returned which makes this tiny function perfect for detecting invalid color strings!

• redd, #f0gf0g, #1234, f00, rgb(1,2), rgb(1,2,3.0), rgb(1,2,3,4), rgba(100,150,200)

  • . . . chrome
  • . . . firefox
  • . . . internet explorer

 

VALID INPUTS

• aqua

  • aqua . . . chrome
  • aqua . . . firefox
  • aqua . . . internet explorer

 

• pink

  • rgb(255,192,203) . . . chrome converts all valid html color names to rgb format except for the following 17 and I'm not really sure why ["aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red", "silver", "teal", "white", "yellow"]
  • pink . . . firefox
  • pink . . . internet explorer

 

• #f00, #ff0000, rgb(255,0,0)

  • rgb(255,0,0) . . . chrome
  • rgb(255,0,0) . . . firefox
  • rgb(255,0,0) . . . internet explorer

 

• rgba(255,0,0,1.0), rgba(255,0,0,100)

  • rgb(255,0,0) . . . chrome converts rgba to rgb anytime alpha is 1.0 or greater since it's fully opaque anyway (probably for performance)
  • rgb(255,0,0) . . . firefox does the same thing as chrome
  • rgba(255,0,0,1) . . . internet explorer converts the alpha param from 1.0 or greater to 1

 

• rgba(0,255,0,0.5)

  • rgba(0,255,0,0.498039) . . . chrome returns something different than the other browsers (possibly trading accuracy for performance)
  • rgba(0,255,0,0.5) . . . firefox
  • rgba(0,255,0,0.5) . . . internet explorer

 

• rgba(0,0,255,0.0), rgba(0,0,255,-100)

  • rgba(0,0,255,0) . . . chrome converts the alpha param from 0.0 or lower to 0
  • rgba(0,0,255,0) . . . firefox does the same
  • rgba(0,0,255,0) . . . internet explorer does the same

 

• rgba(0,0,0,0), rgba(0,0,0,-100)

  • rgba(0,0,0,0) . . . chrome
  • transparent . . . firefox converts only this one rgba instance with all parameters set to 0 to the word transparent (strange)
  • rgba(0,0,0,0) . . . internet explorer

 

• hsl(180,50%,50%)

  • rgb(63,191,191) . . . chrome
  • ff rgb(63,191,191) . . . firefox
  • ie hsl(180,50%,50%) . . . internet explorer

 

• hsl(x,x,0%)

  • rgb(0,0,0) . . . chrome
  • rgb(0,0,0) . . . firefox
  • hsl(0,0%,0%) . . . internet explorer converts any hsl representation of black to this

 

• hsl(x,x,100%)

  • rgb(255,255,255) . . . chrome
  • rgb(255,255,255) . . . firefox
  • hsl(0,0%,100%) . . . internet explorer converts any hsl representation of white to this

 

• hsla(180,50%,50%,1.0), hsla(180,50%,50%,100)

  • rgba(63,191,191,1) . . . chrome
  • rgba(63,191,191,1) . . . firefox
  • hsla(180,50%,50%,1) . . . internet explorer

 

• hsla(180,50%,50%,0.5)

  • rgba(63,191,191,0.498039) . . . chrome
  • rgba(63,191,191,0.5) . . . firefox
  • hsla(180,50%,50%,0.5) . . . internet explorer

 

• hsla(0,0%,0%,0.0), hsla(0,0%,0%,-100)

  • rgba(0,0,0,0) . . . chrome
  • transparent . . . firefox is consistent but this conversion still seems strange
  • hsla(180,50%,50%,0) . . . internet explorer

---

Wow, I can hardly believe I just spent 2 hours testing that function in different browsers!

I guess I may as well demo using the function while I'm at it...

function getColorCSS(c) {
  	var ele = document.createElement("div");
	ele.style.color = c;
	return ele.style.color.split(/\s+/).join('').toLowerCase();
}

function isColorValid(c) {
	var s = getColorCSS(c);
	return (s) ? true : false;
}

function isColorTransparent(c) {
	var s = getColorCSS(c);
	return (
		s === "transparent" || 
		s.substring(0,4) === "rgba" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 ||
		s.substring(0,4) === "hsla" && +s.replace(/^.*,(.+)\)/,'$1') <= 0
	);
}

function isColorWhite(c) {
	var s = getColorCSS(c);
	return [
		"white",
		"rgb(255,255,255)",
		"rgba(255,255,255,1)",
		"hsl(0,0%,100%)",
		"hsla(0,0%,100%,1)"
	].indexOf(s) > -1;
}

function isColorBlack(c) {
	var s = getColorCSS(c);
	return [
		"black",
		"rgb(0,0,0)",
		"rgba(0,0,0,1)",
		"hsl(0,0%,0%)",
		"hsla(0,0%,0%,1)"
	].indexOf(s) > -1;
}

function checkColorString() {
  var c = document.getElementById("c").value;
  
  if (c === "") {
    document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent';
    document.getElementById("result").innerHTML = '';
  }
  else if (isColorValid(c)) {
    if (isColorTransparent(c)) {
      document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent';
      document.getElementById("result").innerHTML = 'TRANSPARENT';
    }
    else if (isColorWhite(c)) {
      document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c);
      document.getElementById("result").innerHTML = 'WHITE';
    }
    else if (isColorBlack(c)) {
      document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c);
      document.getElementById("result").innerHTML = 'BLACK';
    }
    else {
      document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c);
      document.getElementById("result").innerHTML = getColorCSS(c);
    }
  }
  else {
    document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent';
    document.getElementById("result").innerHTML = '☹';
  }
}

var eventList = ["change", "keyup", "paste", "input", "propertychange"];
for(event of eventList) {
    document.getElementById("c").addEventListener(event, function() {
      checkColorString();
    });
}

#c {
  width: 300px;
  padding: 6px;
  font-family: courier;
}

#result {
  font-family: courier;
  font-size: 24px;
  padding: 12px 6px;
}