# How to check if a string is a valid hex color representation?

## How to check if a string is a valid hex color representation?

For example:
AA33FF = valid hex color
Z34FF9 = invalid hex color (has Z in it)
AA33FF11 = invalid hex color (has extra characters)

### Solution 1:

``````var isOk  = /^#[0-9A-F]{6}\$/i.test('#aabbcc')
``````

To elaborate:

`^` match beginning
`#` a hash
`[a-f0-9]` any letter from a-f and 0-9
`{6}` the previous group appears exactly 6 times
`\$` match end
`i` ignore case

`````` var isOk  = /(^#[0-9A-F]{6}\$)|(^#[0-9A-F]{3}\$)/i.test('#ac3') // for #f00 (Thanks Smamatti)
``````

### Solution 2:

``````function isHexaColor(sNum){
return (typeof sNum === "string") && sNum.length === 6
&& ! isNaN( parseInt(sNum, 16) );
}

isHexaColor("AA33FF") => true
isHexaColor("Z34FF9") => false
isHexaColor("AA33FF11") => false
``````

Edit: Please, see the comment of @SalvadorDali below, there are false positives in some cases. Rather use another solution.

### Solution 3:

This can be a complicated problem. After several attempts I came up with a fairly clean solution. Let the browswer do the the work for you.

Step 1: Create a div with border-style set to none. The div can be positioned off screen or it can be any div on your page that doesn’t use the borders.

Step 2: Set the border color to an empty string. The code might look something like this:

``````e=document.getElementbyId('mydiv');
e.style.borderColor="";
``````

Step 3: Set the border color to the color you aren’t sure about.

``````e.style.borderColor=testcol;
``````

Step 4: Check to see if the color actually got changed. If testcol is invalid, no change will occur.

``````col2=e.style.borderColor;
``````

Step 5: Clean up after yourself by setting the color back to an empty string.

``````e.style.borderColor="";
``````

The Div:

``````<div id="mydiv" style="border-style:none; position:absolute; left:-9999px; top:-9999px;"></div>
``````

Now the JavaScript function:

``````function GoodColor(color)
{
var color2="";
var result=true;
var e=document.getElementById('mydiv');
e.style.borderColor="";
e.style.borderColor=color;
color2=e.style.borderColor;
if (color2.length==0){result=false;}
e.style.borderColor="";
return result;
}
``````

In this case, the function is returning a true/false answer to the question, the other option is to have it return a valid color value. Your original color value, the value from borderColor or an empty string in place of invalid colors.

### Solution 4:

``````function validColor(color){
var \$div = \$("<div>");
\$div.css("border", "1px solid "+color);
return (\$div.css("border-color")!="")
}
``````

https://gist.github.com/dustinpoissant/22ce25c9e536bb2c5a2a363601ba261c

Note: This requires jQuery

This works for ALL color types not just hex values. It also does not append unnecessary elements to the DOM tree.

### Solution 5:

If you need a function to tell you if a color is valid, you might as well have it give you something useful — the computed values of that color — and return null when it is not a valid color. Here’s my stab at a compatible (Chrome54 & MSIE11) function to get the RGBA values of a “color” in any of the formats –be it ‘green’, or ‘#FFF’, or ‘#89abcd’, or ‘rgb(0,0,128)’, or ‘rgba( 0, 128, 255, 0.5)’.

``````/* getRGBA:
Get the RGBA values of a color.
If input is not a color, returns NULL, else returns an array of 4 values:
red (0-255), green (0-255), blue (0-255), alpha (0-1)
*/
function getRGBA(value) {
// get/create a 0 pixel element at the end of the document, to use to test properties against the client browser
var e = document.getElementById('test_style_element');
if (e == null) {
e = document.createElement('span');
e.id = 'test_style_element';
e.style.width = 0;
e.style.height = 0;
e.style.borderWidth = 0;
document.body.appendChild(e);
}

// use the browser to get the computed value of the input
e.style.borderColor = '';
e.style.borderColor = value;
if (e.style.borderColor == '') return null;
var computedStyle = window.getComputedStyle(e);
var c
if (typeof computedStyle.borderBottomColor != 'undefined') {
// as always, MSIE has to make life difficult
c = window.getComputedStyle(e).borderBottomColor;
} else {
c = window.getComputedStyle(e).borderColor;
}
var numbersAndCommas = c.replace(new RegExp('[^0-9.,]+','g'),'');
var values = numbersAndCommas.split(',');
for (var i = 0; i < values.length; i++)
values[i] = Number(values[i]);
if (values.length == 3) values.push(1);
return values;
}
``````

### Solution 6:

If you are trying to use it in HTML Try using this pattern Directly :

`````` pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})\$"
``````

like

``````<input id="hex" type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})\$" />
``````

It will give a validation to match the requested format.