The color-string npm package is a library for parsing and generating CSS color strings. It allows users to work with various color formats, convert between them, and manipulate color values.

What are color-string's main functionalities?

Parsing Color Strings

This feature allows you to parse CSS color strings into an array of RGBA values.

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

Generating Color Strings

This feature enables you to generate CSS color strings from RGB(A) or HSL(A) values.

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

Converting Color Models

This feature allows you to convert color values between different color models, such as RGB to HSL.

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

Other packages similar to color-string

Readme

Source

color-string

library for parsing and generating CSS color strings.

Install

With npm:

$ npm install color-string

Usage

Parsing

colorString.get('#FFF')                          // {model: 'rgb', value: [255, 255, 255, 1]}
colorString.get('#FFFA')                         // {model: 'rgb', value: [255, 255, 255, 0.67]}
colorString.get('#FFFFFFAA')                     // {model: 'rgb', value: [255, 255, 255, 0.67]}
colorString.get('hsl(360, 100%, 50%)')           // {model: 'hsl', value: [0, 100, 50, 1]}
colorString.get('hsl(360 100% 50%)')             // {model: 'hsl', value: [0, 100, 50, 1]}
colorString.get('hwb(60, 3%, 60%)')              // {model: 'hwb', value: [60, 3, 60, 1]}

colorString.get.rgb('#FFF')                      // [255, 255, 255, 1]
colorString.get.rgb('blue')                      // [0, 0, 255, 1]
colorString.get.rgb('rgba(200, 60, 60, 0.3)')    // [200, 60, 60, 0.3]
colorString.get.rgb('rgba(200 60 60 / 0.3)')     // [200, 60, 60, 0.3]
colorString.get.rgb('rgba(200 60 60 / 30%)')     // [200, 60, 60, 0.3]
colorString.get.rgb('rgb(200, 200, 200)')        // [200, 200, 200, 1]
colorString.get.rgb('rgb(200 200 200)')          // [200, 200, 200, 1]

colorString.get.hsl('hsl(360, 100%, 50%)')       // [0, 100, 50, 1]
colorString.get.hsl('hsl(360 100% 50%)')         // [0, 100, 50, 1]
colorString.get.hsl('hsla(360, 60%, 50%, 0.4)')  // [0, 60, 50, 0.4]
colorString.get.hsl('hsl(360 60% 50% / 0.4)')    // [0, 60, 50, 0.4]

colorString.get.hwb('hwb(60, 3%, 60%)')          // [60, 3, 60, 1]
colorString.get.hwb('hwb(60, 3%, 60%, 0.6)')     // [60, 3, 60, 0.6]

colorString.get.rgb('invalid color string')      // null

Generation

colorString.to.hex([255, 255, 255])     // "#FFFFFF"
colorString.to.hex([0, 0, 255, 0.4])    // "#0000FF66"
colorString.to.hex([0, 0, 255], 0.4)    // "#0000FF66"
colorString.to.rgb([255, 255, 255])     // "rgb(255, 255, 255)"
colorString.to.rgb([0, 0, 255, 0.4])    // "rgba(0, 0, 255, 0.4)"
colorString.to.rgb([0, 0, 255], 0.4)    // "rgba(0, 0, 255, 0.4)"
colorString.to.rgb.percent([0, 0, 255]) // "rgb(0%, 0%, 100%)"
colorString.to.keyword([255, 255, 0])   // "yellow"
colorString.to.hsl([360, 100, 100])     // "hsl(360, 100%, 100%)"
colorString.to.hwb([50, 3, 15])         // "hwb(50, 3%, 15%)"

// all functions also support swizzling
colorString.to.rgb(0, [0, 255], 0.4)    // "rgba(0, 0, 255, 0.4)"
colorString.to.rgb([0, 0], [255], 0.4)  // "rgba(0, 0, 255, 0.4)"
colorString.to.rgb([0], 0, [255, 0.4])  // "rgba(0, 0, 255, 0.4)"

Keywords

FAQs

What is color-string?

Is color-string popular?

Is color-string well maintained?

Last updated on 22 Apr 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install