🎨 Color Validator

Utilities to validate CSS colors, including named colors, css keywords, hex, rgb, rgba, hsl, hsla, lch, oklch, lab, and oklab.

There are so many variations for HTML colors, even for a single type of color. Checking whether any given color is a valid color can get a little tricky.

For example, a hex color is a pretty simple pattern. It starts with a #, followed by 6 characters that are each a number or a letter between A and F (#123abc).

Or 3 characters for short hand (#0f0). Or 8 if using an alpha channel (#000000aa). Or 4 if using short hand with an alpha channel (#000a).

As regex that looks like this:

/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{3})$/

HSL colors are more complex. The h, s, and l can be separated by commas or not. The hue can be a number, degrees, radians, gradians, or turns. The alpha can be a percentage or a decimal. They can start with hsl or hsla. If values are separated by spaces, then the alpha is preceded by a "/".

The regex for that is quite a bit more complicated. This is just for the comma separated version.

/^(hsl)a?\(((0|0?(?:\.\d+)|-?[1-9]([0-9]+)?(?:\.\d+)?)((deg)|(g?rad)|(turn))?), ?((((?:\.\d+)|[1-9][0-9](?:\.\d+)?|[0-9](?:\.\d+)?)|100)%), ?((((?:\.\d+)|[1-9][0-9](?:\.\d+)?|[0-9](?:\.\d+)?)|100)%)(, ?((((?:\.\d+)|[1-9][0-9](?:\.\d+)?|[0-9](?:\.\d+)?)|100)%|(?:0|0?((?:\.\d+))|1)))?\)$/i

You get the point. It's tricky. That's why you're here.

With 🎨 Color Validator you can check whether a color matches any of the valid patterns without needing to do the work of figuring out the complex regex for all the possibilities.

🎨 Color Validator also exposes getColorType and hasAlpha utilities, as well as the base regular expressions used for validation.

Install

1npm i color-validator --save

ESM Usage

1import validate, { regex, getColorType, hasAlpha } from "color-validator"
2
3const isValid = validate.color("#000fff"); // true
4const colorType = getColorType("hsl(0 100% 100%)"); // hsl
5const hasAlpha = hasAlpha("rgb(25% 25% 25%)")   // false
6const oklabRegex = regex.oklab;

CommonJS Usage

1const validate = require("color-validator");
2
3const isValid = validate.default.color("#000fff"); // true
4const colorType = validate.getColorType("hsl(0 100% 100%)"); // hsl
5const hasAlpha = validate.hasAlpha("rgb(25% 25% 25%)")   // false
6const oklabRegex = validate.regex.oklab;
7

OR

1const validate = require("color-validator").default;
2const { regex, getColorType, hasAlpha } = require("color-validator");
3
4const isValid = validate.color("#000fff"); // true
5const colorType = getColorType("hsl(0 100% 100%)"); // hsl
6const hasAlpha = hasAlpha("rgb(25% 25% 25%)")   // false
7const oklabRegex = regex.oklab;
8

Validate Utilities

1import validate from "color-validator"
2
3// Validate any possible color
4validate.color("#000000") // true
5
6// Validate named colors
7validate.named("AliceBlue") // true
8
9// Validate css keywords
10validate.keyword("currentColor") // true
11
12// Validate whether a string is a color or a keyword
13validate.colorOrKeyword("black") // true
14
15// Validate color by type
16validate.hex("#fff") // true
17validate.hexAlpha("#123123aa") // true
18validate.hexNoAlpha("#ff00ff") // true
19validate.rgb("rgb(0, 0, 0)") // true
20validate.hsl("hsl(0 100% 50%)") // true
21validate.lab("lab(100 -100 125)") // true
22validate.oklab("oklab(100 -100 125)") // true
23validate.lch("lch(0 0 360)") // true
24validate.oklch("oklch(0 0 360)") // true

Regex Patterns

The regex utilities return the regular expression for each pattern.

1import { regex } from "color-validator"
2
3const {
4    hex,
5    hexWithAlpha,
6    hexNoAlpha,
7    hslCommas,
8    hslSpaces,
9    rgbCommas,
10    rgbSpaces,
11    rgbPercents,
12    lab,
13    oklab,
14    lch,
15    oklch,
16    endsWithAlpha,
17} = regex;
18
19console.log(hex)  
20// /^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{3})$/
21

Other Utilities

getColorType

Returns the type of color entered.

1import { getColorType } from "color-validator"
2
3type ColorType = "hex" | "rgb" | "hsl" | "lab" | "oklab" | "lch" | "oklch" | "named" | "keyword";
4
5console.log(getColorType("#00ff00")) // hex

hasAlpha

Returns whether the color has an alpha value

1import { hasAlpha } from "color-validator"
2
3hasAlpha("hsl(0 25% 75% / .25)") // true
4hasAlpha("#000") // false

License

MIT

Acknowledgements

This came about while working on a different project. I needed a way to check a variety of colors, including oklch. I couldn't find anything that was a perfect match, which led me down the color regex rabbit hole. 🐰🕳️

About when I thought this was near a releasable state I ran across validate-color. While it didn't do everything I wanted, including oklch, it did point me to a couple of areas where this was lacking, including css keyword validation and preventing ReDoS attacks, which was new to me.