Color RegEx

Pattern matching and extracting color code formats using RegEx.

Written in Pomsky.

• Source
• Compiled

Support

• Hexadecimal
• RGB / RGBA
• COLOR
• HSL / HSLA
• HWB
• LAB / OKLAB
• LCH / OKLCH
• <named-color>
• <system-color>
• currentColor

Blocks Example

<BlockComponent block={{"owner":"Kyza","repo":"blocks","id":"pomsky-viewer","type":"file"}} context={{"owner":"Kyza","repo":"color-regex","path":"full.pom","sha":"master","file":"README.md"}} height={500} />

Playground

• Pomsky
• Regex101

Visualization

From https://regexper.com/.

Usage

It always matches 1, 3, 4, or 5 unnamed groups.

1

This group will be the name of the color alias such as red or papayawhip.

3-5

These groups are the color type, then the color values.

OR

These groups are "color", the color type, then the color values.

Usage

Just filter out the undefined values and you'll have an array of the values you want.

"rgb(255, 255, 255)".match(regex).filter((item, i) => i > 0 && item != null)
"color(display-p3 1 1 1 / 1)".match(regex).filter((item, i) => i > 0 && item != null)

Why?

For fun and to demonstrate Pomsky's power of making complex regular expressions that are still readable.