chartjs-color-string

What is chartjs-color-string?

The chartjs-color-string npm package is a utility library for parsing and generating color strings. It is commonly used in conjunction with Chart.js to handle color inputs and outputs in various formats such as hex, RGB, and HSL.

What are chartjs-color-string's main functionalities?

Parsing Color Strings

This feature allows you to parse a color string into its RGB components. In this example, the RGB string 'rgb(255, 0, 0)' is parsed into an array [255, 0, 0].

const colorString = require('chartjs-color-string');
const rgb = colorString.get.rgb('rgb(255, 0, 0)');
console.log(rgb); // [255, 0, 0]

Generating Color Strings

This feature allows you to generate a color string from an array of RGB values. In this example, the RGB array [255, 0, 0] is converted into the hex string '#ff0000'.

const colorString = require('chartjs-color-string');
const hex = colorString.to.hex([255, 0, 0]);
console.log(hex); // '#ff0000'

Parsing HSL Strings

This feature allows you to parse an HSL color string into its components. In this example, the HSL string 'hsl(120, 100%, 50%)' is parsed into an array [120, 100, 50].

const colorString = require('chartjs-color-string');
const hsl = colorString.get.hsl('hsl(120, 100%, 50%)');
console.log(hsl); // [120, 100, 50]

Generating HSL Strings

This feature allows you to generate an HSL color string from an array of HSL values. In this example, the HSL array [120, 100, 50] is converted into the HSL string 'hsl(120, 100%, 50%)'.

const colorString = require('chartjs-color-string');
const hslString = colorString.to.hsl([120, 100, 50]);
console.log(hslString); // 'hsl(120, 100%, 50%)'

Other packages similar to chartjs-color-string

color

The 'color' package is a comprehensive library for color manipulation and conversion. It supports a wide range of color models and provides methods for color transformations. Compared to chartjs-color-string, it offers more advanced features such as color blending and manipulation.

tinycolor2

The 'tinycolor2' package is a fast and lightweight library for color manipulation and conversion. It supports various color formats and provides utility functions for color operations. It is similar to chartjs-color-string but offers additional features like color mixing and readability checks.

chroma-js

The 'chroma-js' package is a powerful library for color conversions and color scales. It supports a wide range of color spaces and provides advanced features for color manipulation. Compared to chartjs-color-string, chroma-js is more feature-rich and is often used for data visualization and color scale generation.

README

chartjs-color-string

library for parsing and generating CSS color strings.

Install

With npm:

$ npm install color-string

Usage

Parsing

colorString.getRgb("blue")                       // [0, 0, 255]
colorString.getRgb("#FFF")                       // [255, 255, 255]
colorString.getRgba("#FFFA")                     //[255, 255, 255, 0.67]}
colorString.getRgba("#FFFFFFAA")                 // [255, 255, 255, 0.67]}

colorString.getRgba("rgba(200, 60, 60, 0.3)")    // [200, 60, 60, 0.3]
colorString.getRgba("rgb(200, 200, 200)")        // [200, 200, 200, 1]

colorString.getHsl("hsl(360, 100%, 50%)")        // [360, 100, 50]
colorString.getHsla("hsla(360, 60%, 50%, 0.4)")  // [360, 60, 50, 0.4]

colorString.getAlpha("rgba(200, 0, 12, 0.6)")    // 0.6

Generation

colorString.hexString([255, 255, 255])   // "#FFFFFF"
colorString.hexString([0, 0, 255, 0.4])    // "#0000FF66"
colorString.hexString([0, 0, 255], 0.4)    // "#0000FF66"
colorString.rgbString([255, 255, 255])   // "rgb(255, 255, 255)"
colorString.rgbString([0, 0, 255, 0.4])  // "rgba(0, 0, 255, 0.4)"
colorString.rgbString([0, 0, 255], 0.4)  // "rgba(0, 0, 255, 0.4)"
colorString.percentString([0, 0, 255])   // "rgb(0%, 0%, 100%)"
colorString.keyword([255, 255, 0])       // "yellow"
colorString.hslString([360, 100, 100])   // "hsl(360, 100%, 100%)"