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)
/^#[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 endi ->
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') │
╰─────────────┴────────────┴────────┴───────────────────╯