@lephenix47/color-converter

@lephenix47/color-converter

Table of Contents

• @lephenix47/color-converter
  • Table of Contents
  • Introduction
  • Installation
  • Usage
    • Importing the Library
    • Creating Color Objects
    • Converting Color Models
  • Available Conversion Methods
  • Miscellaneous
  • Conclusion

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';

Creating Color Objects

To represent colors using the RGB, HSL, HWB, and HSV 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 };

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

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

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 and hsv values are create with an object for example:

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.