I'm trying to identify CSS color values in strings. Not only hex, but rgb and hsl as well, I've found these throughout different stack posts:

```js
const hexRegex = /#([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?\b/
const hslRegex = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g
const rgbRegex = /rgba?\(((25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,\s*?){2}(25[0-5]|2[0-4]\d|1\d{1,2}|\d\d?)\s*,?\s*([01]\.?\d*?)?\)/

```

The **rgbRegex** is able to match `rgb()` colors as well as `rgba()` colors, while the **hexRegex** can match solid colors `#000` and `#000000` but it will not match colors with alpha values like `#0000` and `#00000000`. Similarly, the **hslRegex** can match `hsl()` but not `hsla()`.

Is there a way to write the **hexRegex** and the **hslRegex** such that they also match colors with alpha values?

It would also be great if the **hslRegex** could parse out the individual hue, saturation and lightness (and alpha) values when using the JavaScript `.match()` method, which is what the **rgbRegex** does.
['https://Stackoverflow.com/questions/63856249', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1104148/']
You can use the following regular expressions. Note that the regular expressions make use of the `i` flag to match any lowercase and uppercase variants. These have full support for the formats outlined in [Mozilla's documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) (I'm too lazy to go through all of the CSSWG docs).

### Hex

`#RGB[A]` or `#RRGGBB[AA]`

[See regex in use here](https://regex101.com/r/RS3uAs/2)

```
#[a-f\d]{3}(?:[a-f\d]?|(?:[a-f\d]{3}(?:[a-f\d]{2})?)?)\b

```

### HSL

`hsl[a](H, S, L[, A])` or `hsl[a](H S L[ / A])`

[See regex in use here](https://regex101.com/r/RS3uAs/7)

```
hsla?\((?:(-?\d+(?:deg|g?rad|turn)?),\s*((?:\d{1,2}|100)%),\s*((?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(-?\d+(?:deg|g?rad|turn)?)\s+((?:\d{1,2}|100)%)\s+((?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)\)

```

If your language permits regex recursion (this is shorter):

```
hsla?\((?:(-?\d+(?:deg|g?rad|turn)?),\s*((?:\d{1,2}|100)%),\s*((?2))(?:,\s*((?2)|0(?:\.\d+)?|1))?|(-?\d+(?:deg|g?rad|turn)?)\s+((?2))\s+((?2))(?:\s+((?2)|0(?:\.\d+)?|1))?)\)

```

### RBG

`rgb[a](R, G, B[, A])` or `rgb[a](R G B[ / A])`

```
rgba?\((?:(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%),\s*(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%),\s*(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)\s+(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)\s+(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)\)

```

If your language permits regex recursion (this is shorter):

```
rgba?\((?:(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%),\s*((?1)),\s*((?1))(?:,\s*((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?|(25[0-5]|2[0-4]\d|1?\d{1,2}|(?:\d{1,2}|100)%)\s+((?1))\s+((?1))(?:\s+((?:\d{1,2}|100)%|0(?:\.\d+)?|1))?)\)

```

[See regex in use here](https://regex101.com/r/RS3uAs/6)
You can add another `(,\s*[\d.]*)?` right before the closing bracket which makes the alpha value optional.

```
const hslReges = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(,\s*[\d.]*)?\)/g

```