hex-color-regex

What is hex-color-regex?

The hex-color-regex npm package is designed to provide a regular expression for matching hexadecimal color codes within strings. This is useful for validating and extracting hex color codes from text in web development and design tools.

What are hex-color-regex's main functionalities?

Validation of hex color codes

This feature allows you to validate whether a string is a valid hex color code. The regular expression checks for both shorthand (e.g., #FFF) and full (e.g., #FFFFFF) hex codes.

const hexColorRegex = require('hex-color-regex');
const regex = hexColorRegex();
console.log(regex.test('#1a1a1a')); // true
console.log(regex.test('#gggggg')); // false

Extraction of hex color codes

This feature allows you to extract all hex color codes from a given string. It is useful for parsing strings to retrieve all embedded color codes.

const hexColorRegex = require('hex-color-regex');
const text = 'Background color is #1a1a1a and border color is #00FF00.';
const matches = text.match(hexColorRegex());
console.log(matches); // ['#1a1a1a', '#00FF00']

Other packages similar to hex-color-regex

color-regex

Similar to hex-color-regex, color-regex provides regular expressions for matching color values but extends support beyond hex codes to include RGB, RGBA, HSL, HSLA, and named colors. This makes color-regex more versatile for applications needing to handle multiple color formats.

color-string

While not solely focused on regex, color-string allows for parsing and generation of CSS color strings. It supports hex, rgb, rgba, hsl, and hsla formats. Compared to hex-color-regex, it offers more comprehensive functionality for manipulating and converting color strings in addition to validation.

README

hex-color-regex

The best regular expression (regex) for matching hex color values from string.

Install

npm i hex-color-regex --save
npm test

Usage

For more use-cases see the tests

• [opts] {Object} pass strict: true for strict mode
• return {RegExp}

Example

var hexColorRegex = require('hex-color-regex')

hexColorRegex().test('#f3f}') //=> true
hexColorRegex({strict: true}).test('#f3f}') //=> false

hexColorRegex().test('foo #f3f bar') //=> true
hexColorRegex({strict: true}).test('foo #f3f bar') //=> false

hexColorRegex().test('#a54f2c}') //=> true
hexColorRegex({strict: true}).test('#a54f2c}') //=> false

hexColorRegex().test('foo #a54f2c bar') //=> true
hexColorRegex({strict: true}).test('foo #a54f2c bar') //=> false

hexColorRegex().test('#ffff') //=> false
hexColorRegex().test('ffff') //=> false

hexColorRegex().test('#fff') //=> true
hexColorRegex().test('fff') //=> false

hexColorRegex().test('#4g1') //=> false
hexColorRegex().test('4g1') //=> false
hexColorRegex().test('#zY1') //=> false
hexColorRegex().test('zY1') //=> false
hexColorRegex().test('#7f68ZY') //=> false
hexColorRegex().test('7f68ZY') //=> false
hexColorRegex().test('ffffff') //=> false

hexColorRegex().test('#afebe3') //=> true
hexColorRegex().test('#AFEBE3') //=> true
hexColorRegex().test('#3cb371') //=> true
hexColorRegex().test('#3CB371') //=> true
hexColorRegex().test('#556b2f') //=> true
hexColorRegex().test('#556B2F') //=> true
hexColorRegex().test('#708090') //=> true
hexColorRegex().test('#7b68ee') //=> true
hexColorRegex().test('#7B68EE') //=> true
hexColorRegex().test('#eeeeee') //=> true
hexColorRegex().test('#ffffff') //=> true
hexColorRegex().test('#111111') //=> true

hexColorRegex().test('#afe') //=> true
hexColorRegex().test('#AF3') //=> true
hexColorRegex().test('#3cb') //=> true
hexColorRegex().test('#3CB') //=> true
hexColorRegex().test('#b2f') //=> true
hexColorRegex().test('#5B2') //=> true
hexColorRegex().test('#708') //=> true
hexColorRegex().test('#68e') //=> true
hexColorRegex().test('#7AF') //=> true
hexColorRegex().test('#777') //=> true
hexColorRegex().test('#FFF') //=> true
hexColorRegex().test('#fff') //=> true

Matching groups

• match[0] hex value with hash - #f3f3f3
• match[1] hex value without the hash - f3f3f3

Example

hexColorRegex().exec('foo #fff bar')
//=> [ '#fff', 'fff', index: 4, input: 'foo #fff bar' ]

hexColorRegex({strict: true}).exec('foo #fff bar')
//=> null

hexColorRegex().exec('foo #f3f3f3 bar')
//=> [ '#f3f3f3', 'f3f3f3', index: 4, input: 'foo #f3f3f3 bar' ]

hexColorRegex({strict: true}).exec('foo #f3f3f3 bar')
//=> null

Related

• benz: Compose your control flow with absolute elegance. Support async/await, callbacks, thunks, generators, promises, observables, child… more
• is-hexcolor: Check that given value is valid hex color, using hex-color-regex - the best regex for… more
• is-ansi: Check that given string contain ANSI color codes, without CLI
• is-missing: Check that given name or user/repo exists in npm registry or in github as user… more
• is-kindof: Check type of given javascript value. Support promises, generators, streams, and native types. Thin wrapper… more
• is-typeof-error: Check that given value is any type of error and instanceof Error
• is-async-function: Check that given function is async (callback) function or not. Trying to guess that based… more
• kind-error: Correct inheriting from Error. Supports constructing from an object of properties - focused on assertion.
• kind-of-extra: Extends kind-of type check utility with support for promises, generators, streams and errors. Like `kindof(Promise.resolve(1))… more
• vez: Middleware composition at new level. Ultimate alternative to ware, plugins, koa-compose and composition packages. Allows… more

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
But before doing anything, please read the CONTRIBUTING.md guidelines.

Charlike Make Reagent

Changelog

1.1.0 / 2017-06-03

• Release v1.1.0
• Add support for "alpha" channel in hex colors (merge #11):
  • #RRGGBBAA
  • #RGBA

Reference

• https://googlechrome.github.io/samples/css-alpha-channel/
• https://www.chromestatus.com/feature/5685348285808640