color2color

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #llm #golang #go #deep-learning #docker #windows #cli #pytorch #security

(★ 81)

Javascript color converter.

color2color Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

color2color

color2color Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

color2color

color2color Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README