Validation hex and rgba colors using regex in php

Question

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.

Answer 1

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*%)\))$

Answer 2

Hope this will help you out. In the below regex, i am also taking care of spaces as well,

1. #[a-zA-Z0-9]{6} for matching string like #090f00

2. rgb\((?:\s*\d+\s*,){2}\s*[\d]+\) this will match string like rgb(10, 10, 20)

3. rgba\((\s*\d+\s*,){3}[\d\.]+\) this will match string like rgba(100,100,100,0.9)

4. hsl\(\s*\d+\s*(\s*\,\s*\d+\%){2}\) this will match string like hsl(10,30%,40%)

5. hsla\(\s*\d+(\s*,\s*\d+\s*\%){2}\s*\,\s*[\d\.]+\) this will match string like hsla(120, 60%, 70%, 0.3)

Regex:

#[a-zA-Z0-9]{6}|rgb\((?:\s*\d+\s*,){2}\s*[\d]+\)|rgba\((\s*\d+\s*,){3}[\d\.]+\)|hsl\(\s*\d+\s*(\s*\,\s*\d+\%){2}\)|hsla\(\s*\d+(\s*,\s*\d+\s*\%){2}\s*\,\s*[\d\.]+\)

Regex demo