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

frostcolor

v3.0.3

Published

FrostColor is a free, open-source color manipulation library for JavaScript.

Downloads

288

Readme

FrostColor

FrostColor is a free, open-source color manipulation library for JavaScript.

It is a lightweight (~4kb gzipped) and modern library, and features full support for RGB, HSL, HSV, CMY and CMYK color-spaces.

Table Of Contents

Installation

In Browser

<script type="text/javascript" src="/path/to/frost-color.min.js"></script>

Using NPM

npm i frostcolor

In Node.js:

const { Color, ColorImmutable } = require('frostcolor');

Basic Usage

From RGB

  • red is a number between 0 and 255.
  • green is a number between 0 and 255.
  • blue is a number between 0 and 255.
  • alpha is a number between 0 and 1, and will default to 1.
const color = new Color(red, green, blue, alpha);

From Brightness

  • brightness is a number between 0 and 100.
  • alpha is a number between 0 and 1, and will default to 1.
const color = new Color(brightness, alpha);

Immutable Colors

By default, Color objects are mutable, but if you wish to create an immutable reference you can use the following syntax.

Immutable Color objects return a new ColorImmutable whenever they are modified.

const color = new ColorImmutable(red, green, blue, alpha);

Color Creation

From String

Create a new Color from a HTML color string.

  • colorString is a string containing a color value in either hexadecimal, RGB, RGBA, HSL, HSLA or a standard HTML color name.
const color = Color.fromString(colorString);

From CMY

Create a new Color from CMY values.

  • cyan is a number between 0 and 100.
  • magenta is a number between 0 and 100.
  • yellow is a number between 0 and 100.
  • alpha is a number between 0 and 1, and will default to 1.
const color = Color.fromCMY(cyan, magenta, yellow, alpha);

From CMYK

Create a new Color from CMYK values.

  • cyan is a number between 0 and 100.
  • magenta is a number between 0 and 100.
  • yellow is a number between 0 and 100.
  • key is a number between 0 and 100.
  • alpha is a number between 0 and 1, and will default to 1.
const color = Color.fromCMYK(cyan, magenta, yellow, key, alpha);

From HSL

Create a new Color from HSL values.

  • hue is a number between 0 and 360.
  • saturation is a number between 0 and 100.
  • lightness is a number between 0 and 100.
  • alpha is a number between 0 and 1, and will default to 1.
const color = Color.fromHSL(hue, saturation, lightness, alpha);

From HSV

Create a new Color from HSV values.

  • hue is a number between 0 and 360.
  • saturation is a number between 0 and 100.
  • value is a number between 0 and 100.
  • alpha is a number between 0 and 1, and will default to 1.
const color = Color.fromHSV(hue, saturation, value, alpha);

Clone

Create a new Color from an existing Color.

const clone = color.clone();

Color Formatting

To String

Return a HTML string representation of the color.

The colorString returned will be a string containing either a HTML color name (if one exists), a hexadecimal string (if alpha is 1) or an RGBA string.

const colorString = color.toString();

To Hex String

Return a hexadecimal string representation of the color.

const hexString = color.toHexString();

To RGB String

Return a RGB/RGBA string representation of the color.

const rgbString = color.toRGBString();

To HSL String

Return a HSL/HSLA string representation of the color.

const hslString = color.toHSLString();

Label

Get the closest color name for the color.

const label = color.label();

Color Attributes

Get Alpha

Get the alpha value of the color (between 0 and 1).

const alpha = color.getAlpha();

Get Brightness

Get the brightness value of the color (between 0 and 100).

const brightness = color.getBrightness();

Get Hue

Get the hue value of the color (between 0 and 360).

const hue = color.getHue();

Get Saturation

Get the saturation value of the color (between 0 and 100).

const saturation = color.getSaturation();

Luma

Get the relative luminance value of the color (between 0 and 1).

const luma = color.luma();

Set Alpha

Set the alpha value of the color.

  • alpha is a number between 0 and 1.
color.setAlpha(alpha);

Set Brightness

Set the brightness value of the color.

  • brightness is a number between 0 and 100.
color.setBrightness(brightness);

Set Hue

Set the hue value of the color.

  • hue is a number between 0 and 360.
color.setHue(hue);

Set Saturation

Set the saturation value of the color.

  • saturation is a number between 0 and 100.
color.setSaturation(saturation);

Color Manipulation

Darken

Darken the color by a specified amount.

  • amount is a number between 0 and 1.
color.darken(amount);

Invert

Invert the color.

color.invert();

Lighten

Lighten the color by a specified amount.

  • amount is a number between 0 and 1.
color.lighten(amount);

Shade

Shade the color by a specified amount.

  • amount is a number between 0 and 1.
color.shade(amount);

Tint

Tint the color by a specified amount.

  • amount is a number between 0 and 1.
color.tint(amount);

Tone

Tone the color by a specified amount.

  • amount is a number between 0 and 1.
color.tone(amount);

Color Schemes

Complementary

Create a complementary color variation.

const complementary = color.complementary();

Split

Create an array with 2 split color variations.

const [secondary, accent] = color.split();

Analogous

Create an array with 2 analogous color variations.

const [secondary, accent] = color.analogous();

Triadic

Create an array with 2 triadic color variations.

const [secondary, accent] = color.triadic();

Tetradic

Create an array with 3 tetradic color variations.

const [secondary, alternate, accent] = color.tetradic();

Color Palettes

Create a palette of colors from a Color object you have created using the following methods.

Shades

Create an array with a specified number of shade variations.

  • shades is a number indicating how many shades you wish to generate, and will default to 10.
const colorShades = color.shades(shades);

Tints

Create an array with a specified number of tint variations.

  • tints is a number indicating how many tints you wish to generate, and will default to 10.
const colorTints = color.tints(tints);

Tones

Create an array with a specified number of tone variations.

  • tones is a number indicating how many tones you wish to generate, and will default to 10.
const colorTones = color.tones(tones);

Palette

Create a palette object with a specified number of shades, tints and tone variations.

  • shades is a number indicating how many shades you wish to generate, and will default to 10.
  • tints is a number indicating how many tints you wish to generate, and will default to 10.
  • tones is a number indicating how many tones you wish to generate, and will default to 10.
const colorPalette = color.palette(shades, tints, tones);

Static Methods

Contrast

Calculate the contrast between two colors (between 1 and 21).

  • color1 is a Color object.
  • color2 is a Color object.
const contrast = Color.contrast(color1, color2);

Distance

Calculate the distance between two colors.

  • color1 is a Color object.
  • color2 is a Color object.
const distance = Color.dist(color1, color2);

Find Contrast

Find an optimally contrasting color for another color.

  • color1 is a Color object.
  • color2 is a Color object, and will default to null.
  • minContrast is a number between 1 and 21 indicating the minimum valid contrast, and will default to 4.5.
  • stepSize is a number between 0 and 1 indicating the amount to darken/lighten the color on each iteration, and will default to 0.01.
const contrastColor = Color.findContrast(color1, color2, minContrast, stepSize);

If color2 value is null, a clone of color1 will be used instead.

This method will tint/shade color2 until it meets a minimum contrast threshold with color1, then the new color will be returned. If no valid contrast value can be found, this method will return null instead.

Mix

Create a new Color by mixing two colors together by a specified amount.

  • color1 is a Color object.
  • color2 is a Color object.
  • amount is a number between 0 and 1.
const mixed = Color.mix(color1, color2, amount);

Multiply

Create a new Color by multiplying two colors together by a specified amount.

  • color1 is a Color object.
  • color2 is a Color object.
  • amount is a number between 0 and 1.
const multiplied = Color.multiply(color1, color2, amount);