Skip to content

Instantly share code, notes, and snippets.

@kulmajaba
Last active September 20, 2022 07:59
Show Gist options
  • Save kulmajaba/cb47602416dbf0dc1af4f7a651bac98b to your computer and use it in GitHub Desktop.
Save kulmajaba/cb47602416dbf0dc1af4f7a651bac98b to your computer and use it in GitHub Desktop.
Regex pattern to find all individually defined color codes in a codebase, for example with VS Code global search

Color finder

Find colors in your codebase.

1. Hex codes

Valid hex colors contain a hashbang followed by 3, 4, 6 or 8 hexadecimals, 0-9 or a-f. Negative lookahead to ensure further letters or digits follow to reduce false positives.

#[a-f\d]{3,8}(?![\w\d])

2. RGB/RGBA and HSL/HSLA values

Valid colors have the keyword (rgb, rgba, hsl or hsla) followed by characters in parens.

(rgb|hsl)a*\([^\)]{3,}\)

3. HTML color names

HTML standard contains 17 colors and a total of 140 named colors are supported by all browsers. Source: https://www.scaler.com/topics/html-color-names/

Negative lookbehind to ensure the color name is not preceded by letters, negative lookahead to ensure the name is not followed by more letters or a hyphen to reduce false positives. Some false positives will still exist simply because some of the color names are not uncommon in texts.

(?<!\w)(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)(?![\w\d-])

The whole shebang

(#[a-f\d]{3,8}(?![\w\d]))|((?:rgb|hsl)a*\([^\)]{3,}\))|((?<!\w)(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgrey|darkgreen|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|grey|green|greenyellow|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgrey|lightgreen|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)(?![\w\d-]))

Usage

Using GNU grep (ggrep):

ggrep -iohIrP --exclude=\*.{svg,json,lock} --exclude-dir='node_modules' '#[a-f\d]{3,8}' . > colors.txt

Exclude common filetypes and node modules, output the results into a text file

Parameters:

Option Meaning
i Ignore case
o Output match only
h Suppress file names from output
I Ignore binary file matches
r Recursive
P Use Perl-Compatible Regular Expressions (PCRE)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment