npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

config-colors

v3.0.0

Published

A basic Colour class that allows generation of a colour palette from base colours

Downloads

17

Readme

Config-colors

A basic Color class that allows the generation of shades of a given base colour.

Usage

import Color from 'config-color';
const blue = new Color('#0000ff');

let darkBlue = blue.dark();
let darkerBlue = blue.darker();

let translucentBlue = blue.addOpacity(0.5);

API

Color.toString()

Returns the hex representation of this color in a string.

This isn't required when using the object as a CSS property in React directly, but is required with some CSS in JS libraries like Aphrodite.js.

In react:

<div style={{backgroundColor: green, color: blue.darker()}} />

With Aphrodite:

const styles = {
    div: {
        backgroundColor: green.toString(),
        color: blue.darker().toString(),
    }
};

Color.adjust(offset)

Prior to v2.0.0 this method was named shade()

Returns a lighter or darker shade of the base color.

A negative offset returns a darker color, a positive offset produces a lighter colour.

This function preserves the hue of the base colour, changing only the lightness and saturation unlike shade() and tint() which may result in a colour with a different hue.

blue.shade(-5);

Color.light(), Color.lighter(), Color.lightest()

Each of these functions return an increasingly lighter version of the base colour.

These functions preserve the hue of the base colour, changing only the lightness and saturation unlike shade() and tint() which may result in a colour with a different hue.

blue.light(); //Equivalent of blue.shade(5)
blue.lighter(); //Equivalent of blue.shade(10)
blue.lightest(); //Equivalent of blue.shade(15)

Color.dark(), Color.darker(), Color.darkest()

Each of these functions return an increasingly darker version of the base colour.

These functions preserve the hue of the base colour, changing only the lightness and saturation unlike shade() and tint() which may result in a colour with a different hue.

blue.dark(); //Equivalent of blue.shade(-5)
blue.darker(); //Equivalent of blue.shade(-10)
blue.darkest(); //Equivalent of blue.shade(-15)

Color.tint(amount)

Produces a colour lighter than the base colour by mixing with white.

The amount is the percentage of the base colour in the mix. A value of 0 <= x <= 1 is treated as a raw value (0.1 = 10%) whereas a value 1 < x <= 100 is treated as a percentage figure (10 = 10%).

An amount above 100 is treated as 100.

A negative value for amount is passed to Color.shade() as a positive value.

//These two are equivalent and will produce a color
//mix of 10% blue with 90% white
blue.tint(10);
blue.tint(0.1);

Color.shade(amount)

Produces a colour darker than the base colour by mixing with black.

The amount is the percentage of the base colour in the mix. A value of 0 <= x <= 1 is treated as a raw value (0.1 = 10%) whereas a value 1 < x <= 100 is treated as a percentage figure (10 = 10%).

An amount above 100 is treated as 100.

A negative value for amount is passed to Color.tint() as a positive value.

//These two are equivalent and will produce a color
//mix of 10% blue with 90% black
blue.shade(10);
blue.shade(0.1);

blue.shade(-50); //Equavalent of blue.tint(50)

Color.addOpacity(opacity)

Returns an rgba() function, adding an opacity to the base color.

If opacity is greater than 1, it is treated as a percentage (i.e. 1-100).

Otherwise, it is treated as a fractional value (0-1).

Color.getContrastText()

Added v1.1.0

Returns a suitable text color to display against this color as a background.

Chooses from:

  • Off White (#f0f0f0)
  • Off Black (#101010)
  • Pure White (#ffffff)
  • Pure Black (#000000)

The result will, where possible, meet the WCAG minimum requirements for contrast as per https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Where this isn't possible, the highest contrast option will be returned

const bgColor = new Color('#23fe45');

const styles = {
   div: {
       backgroundColor: bgColor,
       color: bgColor.getContrastText(),
   }
};

Changelog

v3.0.0

Color.adjust() removed in favour of Color.mix() due to strange results with some colours and generally poor logic.

Color.light(), Color.lighter(), Color.lightest(), Color.dark(), Color.darker() and Color.darkest() updated to use Color.tint() and Color.shade() methods. The output of these function will have changed but their use is the same.

BREAKING CHANGES

All direct calls to Color.adjust() should be updated to Color.shade() or Color.tint().

Calls to Color.light{,er,est}() and Color.dark{,er,est}() should be reviewed for suitability as the result will have changed.

v2.0.3

Remove compilation. This library will exist as an ES module.

v2.0.2

Compile library before publishing

v2.0.1

Fixed an issue with contrast calculations affecting getContrastText()

v2.0.0

Added tint and shade methods.

Existing shade method renamed to adjust.

To limit breaking changes, calls to shade with a negative value will be passed to adjust. However, calls to shade with a positive value will return a darker color, not lighter as previously expected.

BREAKING CHANGES

All direct calls to Color.shade() to be updated to Color.adjust(). Calls to Color.lighter(), Color.darker() et al are unaffected.

v1.2.0

Added test suite

v1.1.0

Added Color.getContrastText() function

v1.0.0

Initial release