colorcolor
v3.0.1
Published
colorcolor converts Hex/HexA/RGB/RGBA/HSL/HSLA/HSV/HSB/HWB color strings to Hex/HexA/RGB/RGBA/HSL/HSLA/HSV/HSB/HWB color strings.
Downloads
7,853
Readme
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.
- #RGB[A]
- #RRGGBB[AA]
- R, G, B, and A are hexadecimal numbers from
00
toff
- Examples:
#ad6
#AD6e
#f43E12
#F43e12d5
- R, G, B, and A are hexadecimal numbers from
- 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
, orturn
(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%)
- H is an angle expressed as
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
, orturn
(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%)
- H is an angle expressed as
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
, orturn
(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%)
- H is an angle expressed as
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!
Authors & contributors
The original setup of this repository is by Russel Porosky.
For a full list of all authors and contributors, check the contributor's page.
License
This project is licensed under the MIT license.
See LICENSE for more information.