Colorcolor NPM

colorcolor - Javascript Function

The colorcolor() function converts HEX/HEXA/HSB/HSL/HSLA/HSV/HWB/RGB/RGBA color strings to HEX/HEXA/HSB/HSL/HSLA/HSV/HWB/RGB/RGBA color strings.

Demo

http://metaloha.github.io/color2color/

Install

colorcolor is available via NPM:

npm install colorcolor

Usage

colorcolor( originalColor: string, [newColorType: string( hex|hexa|hsb|hsl|hsla|hsv|hwb|rgb|rgba ) = 'rgba'] )

The first argument is the original color string in HEX, HEXA, HSB, HSL, HSLA, HSV, HWB, RGB, or RGBA format, or a CSS named color.

The second argument (optional) is which format you'd like the new color string to be in. This will always default to 'rgba'.

Examples

colorcolor('#dfe') === 'rgba(221, 255, 238, 1)'
colorcolor('#036', 'rgb') === 'rgb(0, 51, 102)'
colorcolor('rgba(64,64,64,0.5)') === 'rgba(64, 64, 64, 0.5)'
colorcolor('rgba(64 64 64 / 0.5)') === 'rgba(64, 64, 64, 0.5)'
colorcolor('rgb(64,64,64)', 'hex') === '#404040'
colorcolor('#dfe', 'rgba') === 'rgba(221, 255, 238, 1)'
colorcolor('hsla(109,100%,37%,1)') === 'rgba(35, 189, 0, 1)'
colorcolor('hsla(0.35turn 70% 55% / 1)') === 'rgba(60, 221, 76, 1)'
colorcolor('rgba(35,189,0,0.75)', 'hsl') === 'hsl(109, 100%, 37%)'
colorcolor('rgba(85%,55%,10.5%,70%)', 'hsl') === 'hsl(36, 78%, 48%)'
colorcolor('#3fa796a0', 'hsla') === 'hsla(170, 45%, 45%, 0.63)'
colorcolor('hwb(200grad 50% 25% / 0.75)') === 'rgba(128, 191, 191, 0.75)'
colorcolor('AliceBlue', 'hwb') === 'hwb(208 94% 0% / 1)'

Valid color formats

colorcolor understands a mix of CSS and non-CSS color models, and is being actively expanded. The following formats are currently understood by colorcolor:

RGB (read more)

Both hexadecimal and numeric notations are supported.

#RGBA
#RRGGBBAA R, G, B, and A are hexadecimal numbers from 00 to ff Examples: #ad6 #AD6e #f43E12 #F43e12d5
rgb(R,G,B)
rgb(R G B)
rgba(R, G, B, A)
rgba(R G B / A) R, G, and B can be decimals from 0 to 255 or percentages from 0% to 100% A can be a percentage from 0% to 100% or a float from 0 to 1 Examples rgb(121, 50, 89) rgb(121 50 89) rgba(80, 205, 40, 0.5) rgba(80 205 40 / 0.5) rgb(50%, 75%, 50%) * rgba(50% 75% 50% / 75%)

HSL (read more)

hsl(H, S, L)
hsl(H S L)
hsla(H, S, L, A)
hsla(H S L / A) H is an angle expressed as deg, grad, rad, or turn (degree is assumed if the number doesn't include a unit) S and L are percentages from 0% to 100% A can be a percentage from 0% to 100% or a float from 0 to 1 Examples hsl(270, 100%, 50%) hsl(0.75turn 100% 50%) hsla(2.65grad, 100%, 50%, 0.75) hsla(3.14rad 100% 50% / 75%)

HSV/HSB (read more)

hsv and hsb are interchangeable and mean the same thing. These are not CSS colors, but are still supported as input and output formats.

hsv(H, S, V)
hsb(H, S, B) H is an angle expressed as deg, grad, rad, or turn (degree is assumed if the number doesn't include a unit) S, V, and B are percentages from 0% to 100% Examples hsv(0.75turn, 100%, 50%) * hsb(270, 100%, 50%)

HWB (read more)

Note that this function does not accept commas, and instead of an additional hwba function the opacity is optional.

hwb(H W B)
hwb(H W B / A) H is an angle expressed as deg, grad, rad, or turn (degree is assumed if the number doesn't include a unit) W and B are percentages from 0% to 100% A can be a percentage from 0% to 100% or a float from 0 to 1 Examples hwb(270 100% 50%) hwb(0.75turn 100% 50%) hwb(2.65grad 100% 50% / 0.75) hwb(3.14rad 100% 50% / 75%)

Testing

You can run npm run test or npm run test:watch to run the tests alone. The coverage report can be updated with npm run test:coverage.

Support

Reach out to the maintainer at one of the following places:

GitHub discussions
The email which is located in my GitHub profile

Contributing

First off, thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated.

We have set up a separate document containing our contribution guidelines.

Thank you for being involved!