Big update!Announcing Socket for GitHub 1.0. Learn more
Socket
BlogLoveFAQ
Install
Log in

color

Package Overview
Dependencies
2
Maintainers
1
Versions
48
Issues
File Explorer

Advanced tools

color

Color conversion and manipulation with CSS string support

    4.2.3latest

Version published
Maintainers
1
Weekly downloads
15,297,430
decreased by-1.33%

Weekly downloads

Changelog

Source

Patch Release 4.2.3

  • 957531fee48e2bceb0eae567cab6820c6cd9da27 mention .hex() is lossy (#244)
  • d00bd1aa371c8313dd4fa29140b0249984ec70fc Correct the limits on XYZ model
  • 4ac13152eaf814f611b77c86d14dd98c7d33d90a mark the package as side-effects free (#189)
  • f34a0baee81b4d9bea9c2ffc13abb334cb52f803 use correct WCAG luminance constant (fixes #248)
  • 9dcc3b7190083a999eb932f8ca696988ace96da7 update YIQ formula constants (fixes #107, ref chartjs/chartjs-color#2)
  • 5696221711e97781c459ac3022f22db68c614a17 remove numeric separators
    • Not sure why I had such a strong stance on this. I see now how annoying and terrible they are. Apologies to everyone who was affected, this was a bad decision on my part.
  • b26040e44c5b91aaddd766334ed767c8c32f4f19 remove bitchy issue template

Thanks to @csandman, @zdenekkostal, @technobuddha, and @maranomynet for their contributions!

Readme

Source

color

JavaScript library for immutable color conversion and manipulation with support for CSS color strings.

const color = Color('#7743CE').alpha(0.5).lighten(0.5); console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)' console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ] console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 }

Install

$ npm install color

Usage

const Color = require('color');

Constructors

const color = Color('rgb(255, 255, 255)') const color = Color({r: 255, g: 255, b: 255}) const color = Color.rgb(255, 255, 255) const color = Color.rgb([255, 255, 255])

Set the values for individual channels with alpha, red, green, blue, hue, saturationl (hsl), saturationv (hsv), lightness, whiteness, blackness, cyan, magenta, yellow, black

String constructors are handled by color-string

Getters

color.hsl();

Convert a color to a different space (hsl(), cmyk(), etc.).

color.object(); // {r: 255, g: 255, b: 255}

Get a hash of the color value. Reflects the color's current model (see above).

color.rgb().array() // [255, 255, 255]

Get an array of the values with array(). Reflects the color's current model (see above).

color.rgbNumber() // 16777215 (0xffffff)

Get the rgb number value.

color.hex() // #ffffff

Get the hex value. (NOTE: .hex() does not return alpha values; use .hexa() for an RGBA representation)

color.red() // 255

Get the value for an individual channel.

CSS Strings

color.hsl().string() // 'hsl(320, 50%, 100%)'

Calling .string() with a number rounds the numbers to that decimal place. It defaults to 1.

Luminosity

color.luminosity(); // 0.412

The WCAG luminosity of the color. 0 is black, 1 is white.

color.contrast(Color("blue")) // 12

The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black).

color.isLight(); // true color.isDark(); // false

Get whether the color is "light" or "dark", useful for deciding text color.

Manipulation

color.negate() // rgb(0, 100, 255) -> rgb(255, 155, 0) color.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%) color.lighten(0.5) // hsl(100, 50%, 0) -> hsl(100, 50%, 0) color.darken(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%) color.darken(0.5) // hsl(100, 50%, 0) -> hsl(100, 50%, 0) color.lightness(50) // hsl(100, 50%, 10%) -> hsl(100, 50%, 50%) color.saturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%) color.desaturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%) color.grayscale() // #5CBF54 -> #969696 color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%) color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%) color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4) color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0) color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%) color.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%) color.mix(Color("yellow")) // cyan -> rgb(128, 255, 128) color.mix(Color("yellow"), 0.3) // cyan -> rgb(77, 255, 179) // chaining color.green(100).grayscale().lighten(0.6)

Propers

The API was inspired by color-js. Manipulation functions by CSS tools like Sass, LESS, and Stylus.

Keywords

FAQs

What is color?

Color conversion and manipulation with CSS string support

Is color popular?

The npm package color receives a total of 12,867,504 weekly downloads. As such, color popularity was classified as popular.

Is color well maintained?

We found that color demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 1 open source maintainer collaborating on the project.

Last updated on 05 Apr 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc