Introduction to color-convert

The color-convert library is a powerful tool for converting colors from one format to another in JavaScript. It supports conversions between many popular color models including RGB, HSL, HSV, HWB, CMYK, and more.

Installation

To get started, you can install the library via npm:

npm install color-convert

Basic Usage

Here’s a quick example of how to use color-convert to convert an RGB color to HEX:

const convert = require('color-convert');
const hex = convert.rgb.hex(255, 0, 0);
console.log(hex); // FF0000

API Examples

RGB to HSL

const hsl = convert.rgb.hsl(255, 255, 0);
console.log(hsl); // [60, 100, 50]

HSL to RGB

const rgb = convert.hsl.rgb(60, 100, 50);
console.log(rgb); // [255, 255, 0]

CMYK to RGB

const rgb = convert.cmyk.rgb(0, 100, 100, 0);
console.log(rgb); // [255, 0, 0]

HEX to RGB

const rgb = convert.hex.rgb('FF0000');
console.log(rgb); // [255, 0, 0]

Named Colors to RGB

const rgb = convert.keyword.rgb('blue');
console.log(rgb); // [0, 0, 255]

Example Application

Let’s create a small application where we dynamically change the background color of a webpage based on user input.

const convert = require('color-convert');

function updateBackgroundColor(color) {
  const rgb = convert.keyword.rgb(color);
  document.body.style.backgroundColor = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}

document.getElementById('color-input').addEventListener('input', function() {
  updateBackgroundColor(this.value);
});

Add an HTML input element:

<input type="text" id="color-input" placeholder="Enter color name">

This simple application will change the background color of the webpage based on the color name entered by the user.

By leveraging color-convert, you can easily handle multiple color manipulations in your applications with clean and efficient code.

Hash: ef73d1a03a3821300fe5b10bd2945d1b94ba122d36be61f997af1c69ccbee0be