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:

npm install ignix-colorkit

Usage

Import the Color class from ignix-colorkit:

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.

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

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.

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.

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.

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.

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. Parameters: value
setSaturation	Sets the saturation of the color to a desired value. Parameters: value
setLightness	Sets the lightness of the color to a desired value. Parameters: value
setRed	Sets the red of the color to a desired value. Parameters: value
setGreen	Sets the green of the color to a desired value. Parameters: value
setBlue	Sets the blue of the color to a desired value. Parameters: value
grayscale	Returns a grayscaled version of the desired color. Parameters: none
complement	Returns a inverted version of the desired color. 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.

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. Parameters: value
lighten	Increases the lightness of the color by a given value. Parameters: value
darken	Decreases the lightness of the color by a given value. Parameters: value
saturate	Increases the saturation of the color by a given value. Parameters: value
desaturate	Decreases the saturation of the color by a given value. Parameters: value
adjustRed	Adjusts the red of the color by a given value. Parameters: value
adjustGreen	Adjusts the green of the color by a given value. Parameters: value
adjustBlue	Adjusts the blue of the color by a given value. 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.

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.

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