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

Question

/^#[0-9A-F]{6}$/i.test('#AABBCC')

To elaborate:

^ -> match beginning
# -> a hash
[0-9A-F] -> any integer from 0 to 9 and any letter from A to F
{6} -> the previous group appears exactly 6 times
$ -> match end
i -> ignore case

If you need support for 3-character HEX codes, use the following:

/^#([0-9A-F]{3}){1,2}$/i.test('#ABC')

The only difference here is that

 [0-9A-F]{6}

is replaced with

([0-9A-F]{3}){1,2}

This means that instead of matching exactly 6 characters, it will match exactly 3 characters, but only 1 or 2 times. Allowing ABC and AABBCC, but not ABCD

Combined solution :

var reg=/^#([0-9a-f]{3}){1,2}$/i;
console.log(reg.test('#ABC')); //true
console.log(reg.test('#AABBCC')); //true

// regular function
function isHexColor (hex) {
  return typeof hex === 'string'
      && hex.length === 6
      && !isNaN(Number('0x' + hex))
}

// or as arrow function (ES6+)
isHexColor = hex => typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex))

console.log(isHexColor('AABBCC'))   // true
console.log(isHexColor('AABBCC11')) // false
console.log(isHexColor('XXBBCC'))   // false
console.log(isHexColor('AAXXCC'))   // false

This answer used to throw false positives because instead of Number('0x' + hex), it used parseInt(hex, 16).
parseInt() will parse from the beginning of the string until it reaches a character that isn't included in the radix (16). This means it could parse strings like 'AAXXCC', because it starts with 'AA'.

Number(), on the other hand, will only parse if the whole string matches the radix. Now, Number() doesn't take a radix parameter, but luckily, you can prefix number literals to get a number in other radii.

Here's a table for clarification:

╭─────────────┬────────────┬────────┬───────────────────╮
│ Radix       │ Characters │ Prefix │ Will output 27    │
╞═════════════╪════════════╪════════╪═══════════════════╡
│ Binary      │ 0-1        │ 0b     │ Number('0b11011') │
│ Octal       │ 0-7        │ 0o     │ Number('0o33')    │
│ Decimal     │ 0-9        │ -      │ -                 │
│ Hexadecimal │ 0-9A-F     │ 0x     │ Number('0x1b')    │
╰─────────────┴────────────┴────────┴───────────────────╯

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;
if(col2.length==0) {alert("Bad Color!");}

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.

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.

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.