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

@lephenix47/color-converter

v1.2.0

Published

This is a versatile color conversion library for JavaScript. It provides a convenient way to convert color values between different color models, including color names, RGB, HEX, HSL, HWB, HSV and CMYK. With @lephenix47/color-converter, you can effortless

Downloads

39

Readme

@lephenix47/color-converter

Table of Contents

Introduction

The @lephenix47/color-converter library is a powerful tool for working with color models in JavaScript. It provides various classes and methods to convert between different color models, manipulate color values, and perform color-related operations.

Installation

To install my NPM Library, you can use NPM or Yarn:

npm install @lephenix47/color-converter

or

yarn add @lephenix47/color-converter

Usage

Importing the Library

To use @lephenix47/color-converter in your project, you need to import the necessary classes:

import { ColorConverter } from '@lephenix47/color-converter';

Supported color models

Currently the library supports 7 colors models: color names, RGB, HEX, HSL, HWB, HSV and CMYK

Creating Color Objects

To represent colors using the different color models, you can use JavaScript objects. Each object should contain the appropriate properties for the corresponding color model. Here's an example:

const rgbColor = { red: 255, green: 0, blue: 0 };
const hslColor = { hue: 0, saturation: 100, lightness: 50 };
const hwbColor = { hue: 120, whiteness: 0, blackness: 0 };
const hsvColor = { hue: 200, saturation: 28, value: 35 };
const cmyk = { cyan:0, magenta: 100, yellow: 100, key: 0 };

On the other hand, you can specify the hexadecimal value as a string, with or without the '#' symbol.

For example:

const colorHex1 = "#0000FF"; // Hexadecimal color with the '#' symbol
const colorHex2 = "AA83F5"; // Hexadecimal color without the '#' symbol

const colorName1 = "rebeccapurple" //All lowercase
const colorName2 = "DarkBlue" //In titlecase

Main methods available

There are currently 2 main methods:

  • convertTo(targetModel): Method that converts a color into another model, the target model must be either one of the supported 7 color models

  • getAllModels(): Method that returns an array containing all the color models

Converting Color Models

To convert colors between different color models, follow these steps:

  1. Create a ColorConverter instance by specifying the source color model and the color values.

It is important that rgb, hsl, hwb, hsv and cmyk values are created with an object

For example:

const color = { hue: 200, saturation: 28, lightness: 35 };
const converter = new ColorConverter('hsl', color);
  1. Use the convertTo method to convert the color to the desired color model. For example, to convert to the hexadecimal representation:
const hexColor = converter.convertTo('hex');

Available Conversion Methods

To get a list of all available color models supported by @lephenix47/color-converter, you can use the getAllColorModels method. This method returns an array of strings representing the supported color models.

For example:

const allModels = converter.getAllColorModels();
console.log(allModels);

The allModels variable will contain an array of strings representing the available color models

Miscellaneous

ASCII tree of the project:

src/
├─ variables/
│  ├─ color-types.variables.ts
├─ classes/
│  ├─ color-conversion.classes.ts
├─ index.ts
dist/
├─ lib/
│  ├─ es6/
│  │  ├─ index.js
│  │  ├─ index.d.ts
│  │  ├─ variables/
│  │  │  ├─ color-types.variables.js
│  │  │  ├─ color-types.variables.d.ts
│  │  ├─ classes/
│  │  │  ├─ color-conversion.classes.js
│  │  │  ├─ color-conversion.classes.d.ts
│  ├─ commonjs/ # Same folder structure as es6's 
test/
├─ es6.js
├─ commonjs.js
package.json
package-lock.json
README.md
tsconfig.es5.json
tsconfig.json
.gitignore
.npmignore

Conclusion

With @lephenix47/color-converter, you can easily work with color models and perform conversions between them. Simplify your color manipulation tasks and explore the vast possibilities of color representation in your JavaScript projects.