Validate HTML colors by 'name', 'special name', 'hex', 'rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab' or 'lch' values
npm install 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.
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/][7]
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._
validate-color is also [available as a package on npm][6] 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:
``javascript`
var validateColor = require("validate-color").default;
...or through import:
`javascript`
import validateColor from "validate-color";
Once you've done the import, you'll be able to do checks like (example in React):
`javascript
import React from "react";
import validateColor from "validate-color";
const ColorBox = (props) => {
const { color = "", text = "" } = props;
const theColor = color && validateColor(color) ? color : "transparent";
return (
{text}
export default ColorBox;
`
> 👉 The source for a full-fledged color validation component can be viewed here. That component can be [seen in action here][7].
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
`javascript`
import { validateHTMLColor } from "validate-color";
2. Validate only HEX colors
`javascript`
import { validateHTMLColorHex } from "validate-color";
3. Validate only HSL colors
`javascript`
import { validateHTMLColorHsl } from "validate-color";
4. Validate only NAME colors
`javascript`
import { validateHTMLColorName } from "validate-color";
5. Validate only RGB colors
`javascript`
import { validateHTMLColorRgb } from "validate-color";
6. Validate only SPECIAL NAME colors
`javascript`
import { validateHTMLColorSpecialName } from "validate-color";
7. Validate only HWB colors
`javascript`
import { validateHTMLColorHwb } from "validate-color";
8. Validate only LAB colors
`javascript`
import { validateHTMLColorLab } from "validate-color";
9. Validate only LCH colors
`javascript`
import { 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][9], they might still be not fully supported at the time of this reading.
denial-of-service) attacksA 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 " (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)
Clone this repo locally. You'll need to have [NodeJS][1] installed. Install all dependencies by running:
npm i
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][2], the port number should be configured on the .env file.
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.
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][3].
> 👉 Note that the lib/ folder and its contents are only available at the [NPM distribution][6].
This project wouldn't be complete without proper testing.
[Jest][4] 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][5] 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][8] 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][2], all tests should be placed under the src/ folder.
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!
- 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][9]
- [Lea Verou: LCH colors in CSS: what, why, and how?][10]
- [LCH Colour Picker][11]
Validate Color was put together by [Wallace Sidhrée][1]. 👨💻🇳🇴
[1]: http://sidhree.com/
[2]: https://facebook.github.io/create-react-app/
[3]: https://github.com/dreamyguy/validate-color/blob/master/src/validate-color/index.js
[4]: https://jestjs.io/
[5]: https://babeljs.io/
[6]: https://www.npmjs.com/package/validate-color
[7]: https://dreamyguy.github.io/validate-color/
[8]: https://travis-ci.com/dreamyguy/validate-color
[9]: https://drafts.csswg.org/css-color/
[10]: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
[11]: https://css.land/lch/