npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ignix-colorkit

v3.0.3

Published

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

Downloads

23

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:

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.