Search code examples
javascriptcolors

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

  • Without transparent support:

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

    With transparent support :

    /^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test('#AABBCC80')

    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
    [0-9a-f]{0,2} -> adding support for transparent ( 00..FF)
    $ -> match end
    i -> ignore case

    If you need support for 3-character HEX codes (no transparent supported) , 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