Search code examples
phpregexlaravelcolors

Validation hex and rgba colors using regex in php

text field

I am using Laravel and I am trying to validate a color field. This text box should only allow HEX, rgb, rgba, hsl and hsla colors using regex pattern.

In my controller I have this pattern but it is not validating my field value. Any string will pass the validation.

$this->validate($request, [
    'color' => [
        'required',
        'regex:/(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s\/]*[\d\.]+%?\))/i', // <--- not working
    ],
]);

Thanks.

Solution

  • You should add anchors (^ and $):

    'regex:/^(#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3}|(?:rgba?|hsla?)\((?:\d+%?(?:deg|rad|grad|turn)?(?:,|\s)+){2,3}[\s\/]*[\d\.]+%?\))$/i',
        ^                                                                                                                     ^

    To make the regex apply to the whole input instead of just match it.

    But please note that your pattern allows input like rgba(1024, 1023, 0) which is an invalid color.

    If you want a more bulletproof regex, use this (demo):

    ^(\#[\da-f]{3}|\#[\da-f]{6}|rgba\(((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*,\s*){2}((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*)(,\s*(0\.\d+|1))\)|hsla\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)(,\s*(0\.\d+|1))\)|rgb\(((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*,\s*){2}((\d{1,2}|1\d\d|2([0-4]\d|5[0-5]))\s*)|hsl\(\s*((\d{1,2}|[1-2]\d{2}|3([0-5]\d|60)))\s*,\s*((\d{1,2}|100)\s*%)\s*,\s*((\d{1,2}|100)\s*%)\))$