@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
5
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 modelsgetAllModels()
: Method that returns an array containing all the color models
Converting Color Models
To convert colors between different color models, follow these steps:
- 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);
- 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.