← GalleryCSS Colors: RGB(A), HSL(A), HEX(3,4,6,8), var(--tw-color), etc...✨ Emoji Combos/^\s*(color|background[-color]*||[a-zA-Z0-9-_]+)??[\s:=]*[\s]*(?:(\b(rgb)\s*?\(\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?\))|(\b(rgba)\s*?\(\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(0|0\.\d*|1|1.0*)\s*?\))\B|(\b(transparent)|(inherit)|(initial)|(currentColor)|(var)[(]([-]{2}[^)]+)[)])|(#([a-fA-F0-9]){3,4})|(#([a-fA-F0-9]){6,8})|(\b(hsl)\s*?\(\s*?(000|0?\d{1,2}|[1-2]\d\d|3[0-5]\d|360)\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?\)$)|(\b(hsla)\s*?\(\s*?(000|0?\d{1,2}|[1-2]\d\d|3[0-5]\d|360)\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?,\s*?(0|0\.\d*|1|1.0*)\s*?\)\b))/gmJavaScript+24 years ago✓ Pre-loaded
About this regex
This regex matches CSS color declarations, including properties such as color, background, or background-color, followed by any color value format: RGB/RGBA, HSL/HSLA, hex (3, 4, 6, or 8 digits), named colors (transparent, inherit, initial, currentColor), and CSS custom properties via var(--name). It is useful for extracting or validating color assignments in stylesheets or inline styles.
