# colorcolor

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

Latest version **3.0.1** (published 2022-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install colorcolor
pnpm add colorcolor
yarn add colorcolor
bun add colorcolor
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2022-11-24 |
| First published | 2016-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 81 |
| Author | Russel Porosky |
| Maintainers | metaloha |
| Keywords | color, convert |

## Links

- npm: https://www.npmjs.com/package/colorcolor
- Repository: https://github.com/metaloha/color2color
- Homepage: http://metaloha.github.io/color2color/
- Issues: https://github.com/metaloha/color2color/issues
- npm.io page: https://npm.io/package/colorcolor

## Dependencies (1)

- [css-color-names](https://npm.io/package/css-color-names.md) ^1.0.1

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 3.0.1 (latest) — 2022-11-24
- 3.0.0 — 2022-11-24
- 2.1.0 — 2022-11-11
- 2.0.9 — 2022-11-11
- 2.0.8 — 2022-11-11
- 2.0.7 — 2022-10-16
- 2.0.6 — 2022-10-12
- 2.0.5 — 2022-10-12
- 2.0.4 — 2022-10-12
- 2.0.3 — 2022-10-07
- 2.0.0 — 2022-10-07
- 1.1.1 — 2016-09-17
- 1.1.0 — 2016-09-17
- 1.0.1 — 2016-09-15
- 1.0.0 — 2016-09-15

## README

# colorcolor - Javascript Function

[![npm version](https://badge.fury.io/js/colorcolor.svg)](https://badge.fury.io/js/colorcolor)
[![Build Status](https://github.com/metaloha/color2color/actions/workflows/node.js.yml/badge.svg)](https://github.com/metaloha/color2color/actions)

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/](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

```ts
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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_color_model)_)

Both hexadecimal and numeric notations are supported.

* **#RGB[A]**
* **#RRGGBB[AA]**
	* **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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl_color_model)_)

* **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](https://color.lukas-stratmann.com/color-systems/hsv.html)_)

`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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hwb_color_model)_)

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](https://github.com/metaloha/color2color/discussions)
- The email which is located [in my GitHub profile](https://github.com/metaloha)

## Contributing [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/metaloha/color2color/issues)

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](docs/CONTRIBUTING.md).

Thank you for being involved!

## Authors & contributors

The original setup of this repository is by [Russel Porosky](https://github.com/metaloha).

For a full list of all authors and contributors,
check [the contributor's page](https://github.com/metaloha/color2color/contributors).

## License

This project is licensed under the **MIT license**.

See [LICENSE](LICENSE) for more information.

---
_Source: https://npm.io/package/colorcolor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._