Html color code testing

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

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

License

dreamyguy/validate-color

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

✅ 🌈 🙌 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:

• 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 and can be installed as a depedency with:

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

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

import validateColor from "validate-color";

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

import React from "react"; import validateColor from "validate-color"; const ColorBox = (props) =>  const  color = "", text = "" > = props; const theColor = color && validateColor(color) ? color : "transparent"; return ( div className="color-box" style= backgroundColor: theColor >>> p>text>/p> /div> ); >; export default ColorBox;

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

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

import  validateHTMLColor > from "validate-color";

2. Validate only HEX colors

import  validateHTMLColorHex > from "validate-color";

3. Validate only HSL colors

import  validateHTMLColorHsl > from "validate-color";

4. Validate only NAME colors

import  validateHTMLColorName > from "validate-color";

5. Validate only RGB colors

import  validateHTMLColorRgb > from "validate-color";

6. Validate only SPECIAL NAME colors

import  validateHTMLColorSpecialName > from "validate-color";

7. Validate only HWB colors

import  validateHTMLColorHwb > from "validate-color";

8. Validate only LAB colors

import  validateHTMLColorLab > from "validate-color";

9. Validate only LCH colors

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, 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.

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 «» —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 )

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

To start the app locally, run:

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:

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:

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.

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:

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.

This repo is a hybrid one. It:

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

Deploy to GitHub Pages

Deploy to NPM

Deploy to both places at once

⚠️ Make sure to bump version before releasing!

Источник

CSS Color Extractor

CSS Color Extractor is a free online color tool allowing you to check what colors are used in a CSS file, and how many times they have been used! A free online tool to extract colors from CSS files. Built for modern CSS, it works with hex, rgb and rgba.

CSS Color Checker

Extract the css color palette scheme from a website. A handy CSS tool for web designers to see all the HEX color combinations in a web page. Paste the CSS url here and get all the colors which they used! A must-have tool for designers and frontend developers. Free css colour scheme extraction. The apps color extraction tool is used to grab colors from a css. Simply enter the URL of the website css file you want to grab colors from, then press the Check Colors button. Our color tool will then attempt to read that websites CSS files to find all of the HEX, RGB and RGBA color codes. If colors are found, you will be redirected to the color codes page where you can see all of their colors. From there, you can build and test color schemes and palettes with those colours. Hexcolors.co extracts color information from any css files. It extracts color from CSS source where the color can be identified in accordance with the CSS2/CSS3 specification. In general this means that it will extract multiple formats of hexadecimal color representation as well as valid html/css color names. Trying to find the right color for your website or project can be a daunting task. You might have an idea of the color you want, but what if it’s already been used on another site? It can be really hard to find the perfect color for your website or project. Not only do you need to find a color that isn’t being used by someone else, but you also need to make sure that the color works well with your branding and design. CSS Color Extractor is here to help! This free online tool allows you to check what colors are being used in a CSS file, and how many times they have been used. With this information, you can easily select a unique and complementary color for your project.

Color Tools For Designers

A collection of free color tools that will help you choose the right color for your next project! Meet a few tools that will make working with color faster and more fun.

hexcolor.co ™ gives information about colors including color models, triadic colors, monochromatic colors and analogous colors calculated in color page. HTML color code is an identifier used to represent a color on the web. Common forms of these codes are as a keyword name, a hexadecimal value, RGB triplet, HSV and a HSL triplet.

Источник