# ignix-colorkit

> Ignix-colorkit is a versatile JavaScript library designed to streamline color manipulation tasks. With its intuitive Color class, you can effortlessly create, modify, and convert colors in diverse formats, including hexadecimal, RGB, and HSL. ignix-colork

Latest version **3.0.3** (published 2023-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install ignix-colorkit
pnpm add ignix-colorkit
yarn add ignix-colorkit
bun add ignix-colorkit
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2023-10-06 |
| First published | 2023-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vidit Modi |
| Maintainers | viditmodi |
| Keywords | colors, color manipulation, color conversion, javascript colors, hexadecimal, hsl, rgb, brightness, saturation |

## Links

- npm: https://www.npmjs.com/package/ignix-colorkit
- Repository: https://github.com/viditmodi/ignix-colorkit
- Homepage: https://github.com/viditmodi/ignix-colorkit#readme
- Issues: https://github.com/viditmodi/ignix-colorkit/issues
- npm.io page: https://npm.io/package/ignix-colorkit

## 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.3 (latest) — 2023-10-06
- 3.0.2 — 2023-10-06
- 3.0.1 — 2023-10-05
- 3.0.0 — 2023-10-05
- 2.0.1 — 2023-09-30
- 2.0.0 — 2023-09-30
- 1.0.5 — 2023-09-30
- 1.0.4 — 2023-09-30
- 1.0.3 — 2023-09-30
- 1.0.2 — 2023-09-29
- 1.0.1 — 2023-09-29
- 1.0.0 — 2023-09-29

## README

# ignix-colorkit

**ignix-colorkit** is a versatile JavaScript library designed to streamline color manipulation tasks. With its intuitive `Color` class, you can effortlessly create, modify, and convert colors in diverse formats, including hexadecimal, RGB, and HSL. ignix-colorkit simplifies tasks like darkening, lightening, adjusting hues, and more, making it an essential tool for UI designers, data visualization experts, and creatives seeking to master the world of colors with ease.

## Installation

You can install **ignix-colorkit** via npm:

```bash
npm install ignix-colorkit
```

## Usage

Import the Color class from ignix-colorkit:

```js
import Color from "ignix-colorkit";

// Example usage:
const color = new Color("#ff5566");
const formattedHSL = color.hsl();
console.log(formattedHSL); // hsl(354, 100%, 67%)
```

Create a new Color Object and pass the desired color

## Features

- Create color objects from various formats: hexcode, RGB, and HSL.
- Manipulate colors easily by adjusting hue, saturation, lightness, and more.
- Set various parameters of a color such as hue, saturation, lightness and others to any desired value.
- Format colors into HSL and RGB representations.

## Various Ways to Create a Color

Using the default color.

```js
// Default Color is White
const color = new Color();
conosole.log(color); // {r:255,g:255,b:255,h:0,s:100,l:100}
```

Creating a new color using a hexcode.

```js
const hexColor = new Color("#ff0050");
conosole.log(hexColor); // {r:255,g:0,b:80,h:341,s:100,l:50}
```

Creating a new color using a hsl format.

```js
const hslColor = new Color("hsl(136, 100%, 50%)");
conosole.log(hslColor); // {r:0,g:255,b:68,h:136,s:100,l:50}
```

Creating a new color using a rgb format.

```js
const rgbColor = new Color("rgb(136, 100, 250)");
conosole.log(rgbColor); // {r:136,g:100,b:250,h:254,s:94,l:69}
```

Creating a new color using a color object. This means Color class also accepts an object as long as it contains the complete set of either HSL or RGB values.

```js
const color = new Color("rgb(136, 200, 250)");
conosole.log(rgbColor); // {r:136,g:200,b:250,h:206,s:92,l:76}

const newColor = new Color(color);
console.log(newColor); // {r:136,g:200,b:250,h:206,s:92,l:76}
```

## Set Color Parameters

ignix-colorkit provides many methods to set a particular parameter of a color to any desired value. These methods can be accessed through the Color objects.

### Setting the value of hue

To change the hue of a color, just call the 'setHue()' method on the color object and pass the new value of the hue.

```js
const color = new Color("rgb(20, 150, 250)"); // {"r":20,"g":150,"b":250,"h":206,"s":96,"l":53}
console.log(color.setHue(60)); // {"r":250,"g":250,"b":20,"h":60,"s":96,"l":53}
```

### List of all available Set Functions

| Method        | Description                                                               |
| ------------- | ------------------------------------------------------------------------- |
| setHue        | Sets the hue of the color to a desired value.<br>Parameters: value        |
| setSaturation | Sets the saturation of the color to a desired value.<br>Parameters: value |
| setLightness  | Sets the lightness of the color to a desired value.<br>Parameters: value  |
| setRed        | Sets the red of the color to a desired value.<br>Parameters: value        |
| setGreen      | Sets the green of the color to a desired value.<br>Parameters: value      |
| setBlue       | Sets the blue of the color to a desired value.<br>Parameters: value       |
| grayscale     | Returns a grayscaled version of the desired color.<br>Parameters: none    |
| complement    | Returns a inverted version of the desired color.<br>Parameters: none      |

## Adjust or Modify Color Parameters

ignix-colorkit provides many methods to adjust a particular parameter of a color by any desired value. These methods can be accessed through the Color objects.

### Adjusting the value of hue

To adjust the hue of a color, just call the 'adjustHue()' method on the color object and pass the value by which the hue needs to be adjusted.

```js
const color = new Color("rgb(20, 150, 250)"); // {"r":20,"g":150,"b":250,"h":206,"s":96,"l":53}
console.log(color.adjustHue(20)); // {"r":20,"g":74,"b":250,"h":226,"s":96,"l":53}
```

### List of all available Manipulator Functions

| Method      | Description                                                                  |
| ----------- | ---------------------------------------------------------------------------- |
| adjustHue   | Adjusts the hue of the color by a given value.<br>Parameters: value          |
| lighten     | Increases the lightness of the color by a given value.<br>Parameters: value  |
| darken      | Decreases the lightness of the color by a given value.<br>Parameters: value  |
| saturate    | Increases the saturation of the color by a given value.<br>Parameters: value |
| desaturate  | Decreases the saturation of the color by a given value.<br>Parameters: value |
| adjustRed   | Adjusts the red of the color by a given value.<br>Parameters: value          |
| adjustGreen | Adjusts the green of the color by a given value.<br>Parameters: value        |
| adjustBlue  | Adjusts the blue of the color by a given value.<br>Parameters: value         |


## Various Color Formatter Functions

ignix-colorkit provides many methods to format a Color object to different color strings such as HSL, RGB. The opacity of a color can also be changed using the HSLA or RGBA methods.

```js
const color = new Color("rgb(20, 150, 250)"); // {"r":20,"g":150,"b":250,"h":206,"s":96,"l":53}
console.log(color.adjustHue(20).hsl()); // hsl(226, 96%, 53%)
console.log(color.adjustHue(40).hsla(0.5)); // hsla(246, 96%, 53%, 0.5)
console.log(color.darken(20).rgb()); // rgb(3, 95, 165)
console.log(color.lighten(20).rgba(0.85)); // rgba(120, 195, 252, 0.85)
```


## Announcement
This library is still developing so the frequency of the updates may be high for some time. Keep a close eye on this page to track any new feature or changes in the upcoming versions.

## License

This project is licensed under the [MIT License](LICENSE).

The MIT License is a permissive open-source license that allows you to use, modify, and distribute this software for both commercial and non-commercial purposes. You are free to use this project in your own projects, subject to the terms of the license.

For more details, please read the [LICENSE](LICENSE) file.

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