Validate Color

✅🌈🙌 Validate HTML colors by name, special name, hex, rgb, rgba, hsl, hsla, hwb, lab or lch values

HTML colors are remarkably easy to get wrong, because they allow for so many different values.

As I was writing Console Log Plus, I thought it would be great to allow users to pass any HTML color they wanted as one of the parameter to the function. But since HTML colors have so many variations and therefore are complex strings, it didn't take me long to realize that I'd have to make quite a few checks to validate the value passed by the user. That need brought me here.

Validate Color let's one validate the color string against all current possible HTML color values. Some examples:

• hex - #bada55
• name - LightGoldenrodYellow
• special name - currentColor
• rgb - rgb(0 0 0)
• rgba - rgba(0, 0, 0, .45)
• hsl - hsl(4.71239rad, 60%, 70%)
• hsla - hsla(180deg 100% 50% / .8)
• hwb - hwb(180deg 0% 0% / 100%)
• lab - lab(2000.1337% -8.6911 -159.131231 / .987189732)
• lch - lch(54.292% 106.839 40.853)

Both rgba and hsla are now officially merged into their rgb and hsl counterparts, so the a can be omitted. The a is considered legacy syntax, so it will still work.

Demo ✅ 🌈 🙌

To demonstrate the power of validate-color, I decided it would be best to create a living github page, that would serve both as a way of showcase validate-color, and facilitate its use:

https://dreamyguy.github.io/validate-color/

On this page you can:

• Validate HTML colors as you type

On my TODO list:

• See opaque colors against black and white backgrounds.
• See colors with transparency in different contexts.

Usage

validate-color is also available as a package on npm and can be installed as a depedency with:

npm i validate-color --save

As with any node module, first you'll have to import it with require:

1var validateColor = require("validate-color").default;

...or through import:

1import validateColor from "validate-color";

Once you've done the import, you'll be able to do checks like (example in React):

1import React from "react";
2import validateColor from "validate-color";
3
4const ColorBox = (props) => {
5  const { color = "", text = "" } = props;
6  const theColor = color && validateColor(color) ? color : "transparent";
7  return (
8    <div className="color-box" style={{ backgroundColor: theColor }}>
9      <p>{text}</p>
10    </div>
11  );
12};
13
14export default ColorBox;

👉 The source for a full-fledged color validation component can be viewed here. That component can be seen in action here.

Extend

One can "extend" the library by using only parts of it.

1. Validate only HTML colors (hex, rgb, rgba, hsl, hsla, hwb, lab, lch), without name

1import { validateHTMLColor } from "validate-color";

2. Validate only HEX colors

1import { validateHTMLColorHex } from "validate-color";

3. Validate only HSL colors

1import { validateHTMLColorHsl } from "validate-color";

4. Validate only NAME colors

1import { validateHTMLColorName } from "validate-color";

5. Validate only RGB colors

1import { validateHTMLColorRgb } from "validate-color";

6. Validate only SPECIAL NAME colors

1import { validateHTMLColorSpecialName } from "validate-color";

7. Validate only HWB colors

1import { validateHTMLColorHwb } from "validate-color";

8. Validate only LAB colors

1import { validateHTMLColorLab } from "validate-color";

9. Validate only LCH colors

1import { validateHTMLColorLch } from "validate-color";

👉 I was proactive and added validation to these relatively new HTML/CSS colors (HWB & LAB & LCH), but since they're still drafts at the time of this writing, they might still be not fully supported at the time of this reading.

Preventing ReDoS (regex denial-of-service) attacks

A ReDoS vulnerability was reported as an issue on Oct 14, 2022, but that went under my radar. It was just today (Jan 29, 2023) I came across the issue, and luckily I had time to look into it.

This vulnerability was officially reported as CVE-2021-40892, and is listed a few places: 1, 2, 3, 4, 5.

A similar problem was reported for the color-string package, versions < 1.5.5.

A good article by Godson Obielum: How to protect against regex denial-of-service (ReDoS) attacks.

The issue is caused by the "greedy" character in regex, the infamous +. I've made amendments that limit the number of both spaces and digits by 5, instead of having no limits.

I've also made patterns stricter and removed redundant optionals, simplifying whenever possible.

👉 All current regex have been tested with https://regex.rip/ and npx redos-detector check "<regex pattern>" --maxSteps 10000) (see redos-detector for more options).

That will, from this point onwards, invalidate otherwise valid colors that cross that threshold.

Since this is an important update, I'm releasing it as a patch (v2.2.3)

Development

Getting started

Clone this repo locally. You'll need to have NodeJS installed. Install all dependencies by running:

npm i

Run it locally

To start the app locally, run:

npm run start

This command fires up the application on port 9900, making it visible on http://localhost:9900. Because this app is based on create-react-app, the port number should be configured on the .env file.

Building the frontend for Production

When you're ready to build for production, run:

 npm run build

This command compiles all production-optimised resources to a folder called build. It's meant to be run remotely, at the environment host, at build time.

Building for NPM

When you're done with your changes, run:

 npm run build-npm

This command compiles the distribution-optimised javascript to lib/index.js, a file compiled out of src/validate-color/index.js.

👉 Note that the lib/ folder and its contents are only available at the NPM distribution.

Testing

This project wouldn't be complete without proper testing.

Jest is my Unit Testing framework of choice. It's well documented and shares good practices & syntax with its most known predecessors (Mocha, Jasmine, etc). Babel was introduced as a dependency to the project because of Jest, but it was worth it since now we can use ES6 syntax on our tests as well.

Run all tests, in watch mode:

npm run test

Tests are also run through Travis on every push to master. The build status is shown at the top of this README.

👉 All tests are named according to the file they're testing: index.js -> index.test.js, and reside under the same directory. Since Jest comes as courtesy of CRA, all tests should be placed under the src/ folder.

Deploying

This repo is a hybrid one. It:

• Builds the NPM distribution
• Builds the GitHub Page that serves as a demo/showcase

There are 3 commands one can run to deploy to these two places.

Deploy to GitHub Pages

npm run deploy

Deploy to NPM

npm run deploy-npm

Deploy to both places at once

npm run release

⚠️ Make sure to bump version before releasing!

Good to know

License

MIT

Credits & Resources

• Source from which the color name list was extracted from
• The Ultimate Guide to CSS Colors 2020 Edition
• MDN: CSS Colors
• MDN: Color Picker tool
• CSS Color Module Level 4 Editor's Draft
• Lea Verou: LCH colors in CSS: what, why, and how?
• LCH Colour Picker

About

Validate Color was put together by Wallace Sidhrée. 👨‍💻🇳🇴