# colz

> JS library to convert between color spaces.

Latest version **0.1.0** (published 2017-08-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-08-31 |
| First published | 2017-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | arantes |

## Links

- npm: https://www.npmjs.com/package/colz
- Repository: https://github.com/arantes555/colz
- Homepage: https://github.com/arantes555/colz#readme
- Issues: https://github.com/arantes555/colz/issues
- npm.io page: https://npm.io/package/colz

## Recent versions

- 0.1.0 (latest) — 2017-08-31

## README

colz
====

Colz. Javascript library to convert colors between RGB / Hex / HSL / HSV / HSB color spaces. It provides several toString helpers to ease its use in CSS / HTML5 Canvas projects.

Also provides some helpers to create "color schemes" or "color palettes".

Usage
=====

You can create a color initializing the object with an Hex, or an RGB / RGBa value this way:

    color1 = new colz.Color('#f26c4f');
    color2 = new colz.Color('#f00'); // Short Hex
    color3 = new colz.Color(0, 114, 188); // Rgb
    color4 = new colz.Color(0, 114, 188, 0.1); // Rgba

    // You can pass Rgb in array format too
    color5 = new colz.Color([0, 114, 188]); // Rgb
    color6 = new colz.Color([0, 114, 188, 0.1]); // Rgba
    

Once initialized you can get the color in several formats accesing the object's properties.

    color1.hex  // #f26c4f
    color1.rgb  // {r: 242, g: 108, b: 79}
    color1.rgba // {r: 242, g: 108, b: 79, a: 1}
    color1.hsl  // {h: 11, s: 86, l: 63}
    color1.hsla // {h: 11, s: 86, l: 63, a: 1}
    
    // Also its individual componets
    
    color1.r // 242
    color1.g // 108
    color1.b // 79
    color1.h // 11

Provides four private methods to update your color HSLa settings that automatically update all the colorspaces values.

    color1.setHue(206);    // Update Hue
    color1.setLum(86);     // Update Luminosity
    color1.setSat(35);     // Update Saturation
    color1.setAlpha(0.88); // Update alpha
    

You can get a random color using

    c1 = colz.randomColor(); // Return colz.Color object

Any of the colorspaces have an "toString" method to ease its usage in CSS / HTML5 Canvas projects.

    color1.rgb.toString();  // "rgb(0,114,188)"
    color1.rgba.toString(); // "rgba(0,114,188,0.88)"
    color1.hsl.toString();  // "hsl(204,100%,37%)"
    color1.hsla.toString(); // "hsla(204,100%,37%,0.88)"
    
And two public methods to convert HSB Colors (the color-space used in Adobe applications like Photoshop) to RGB of HSL.

    colz.hsbToRgb(204, 100, 74); // [249, 132, 14]
    colz.hsbToHsl(204, 100, 74); // [204, 100, 37]

Color Schemes / Paletes
=======================

Color Schemes are colz.Color collections so you can handle all the colors you are using in a project in a single object, easier to iterate and to work with. Think about it as a a 'palette' where you store all your colors.

To create a custom color scheme / palette is as simple as passing an array of colors to the constructor:

    myColors = new colz.ColorScheme(['#ffff0','#fb0102']);
    
    // You can also pass RGB color arrays
    myColors = new colz.ColorScheme([[255, 01, 03], [254, 12, 23]]);
    
    // Access your palette with myColors.palette[i]
    
Another way is to pass a single color and an array of HUE shifts. So if you want to get 2 aditional colors with their HUEs "rotated" 120º (usually called "Triad Complementary colors") you can do it this way:

    // Creating a "triad"
    myPalette = new colz.ColorScheme('#f00', [120, 240]);
    
To ease the generation of complementary colors ColorScheme provides some "shortcut" constructors.

    // Complementary color (HUE + 180º)
    myColors = new colz.ColorScheme.Compl(base_color));
    
    // Triad (HUE + 120º, HUE + 240º)
    myColors = new colz.ColorScheme.Triad(base_color));
    
    // Tetrad / quad (HUE +60º, +180º, +240º)
    myColors = new colz.ColorScheme.Tetrad(base_color));
    
    // Analogous (-45º, +45º)
    myColors = new colz.ColorScheme.Analog(base_color));
    
    // Accent analogous (-45º, +45, +180º)
    myColors = new colz.ColorScheme.Accent(base_color));
    
    // Split complementary (+150º, +210º)
    myColors = new colz.ColorScheme.Split(base_color));
    
    // Custom degrees
    myColors = new colz.ColorScheme(base_color, [50,60,80]));
    
Take a look to the colz.test.js to see some working samples.

Projects using colz.js
======================

- <http://rgb.to>
- <http://palett.es>

Ports to other languages
========================

- [colz-python](https://github.com/carloscabo/colz-python)
- [colz-php](https://github.com/carloscabo/colz-php)


Updates
=======

- 2014 / 06 / 03 Ie6/7 bug fixed. Thanks to [aiyuchen](https://github.com/aiyuchen)
- 2014 / 06 / 03 Bad calculation with hsv (v == 0) bug fixed. Thanks to [aiyuchen](https://github.com/aiyuchen)
- 2015 / 06 / 12 Added "rebeccapurple" color to **RGB.to** http://rgb.to/rebeccapurple . Thanks to [davidhund](https://github.com/davidhund)
- 2017 / 08 / 30 Modernizing code & publishing to NPM by [arantes](https://github.com/arantes)

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