Huge news!Announcing our $20M Series A led by Andreessen Horowitz.Learn more
Socket
Socket
Log inDemoInstall

color-string

Package Overview
Dependencies
3
Maintainers
1
Versions
36
Issues
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

color-string

Parser and generator for CSS color strings

    1.9.1latest
    GitHub
    npm

Version published
Maintainers
1
Weekly downloads
15,006,371
decreased by-6.8%

Weekly downloads

Package description

What is color-string?

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

Last updated on 22 Apr 2022

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install
SocketSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc