JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17
  • Score
    100M100P100Q58379F
  • License MIT

🏆 A powerful and fully typed module for all your coloring needs.

Package Exports

  • colormaster

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (colormaster) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ColorMaster is a powerful and fully typed module for all your coloring needs.

⭐ Getting Started

npm install colormaster

Then simply start using ColorMaster in your project:

RGBA Color Space 
import CM from "colormaster";

// object argument
CM.RGBAFrom({ r: 128, g: 128, b: 128, a: 0.5 }).string(); // "rgba(128, 128, 128, 0.5)"
CM.RGBAFrom({ r: 128, g: 128, b: 128, a: 0.5 }).string({ withAlpha: false }); // "rgb(128, 128, 128)"
CM.RGBAFrom({ r: 128, g: 128, b: 128, a: 0.5 }).alphaTo(0.8).string(); // "rgba(128, 128, 128, 0.8)"

// array argument
CM.RGBAFrom([128, 128, 128, 0.5]).string(); // "rgba(128, 128, 128, 0.5)"
CM.RGBAFrom([128, 128, 128, 0.5]).string({ withAlpha: false }); // "rgb(128, 128, 128)"
CM.RGBAFrom([128, 128, 128, 0.5]).alphaTo(0.8).string(); // "rgba(128, 128, 128, 0.8)"

// string argument
CM.RGBAFrom("128, 128, 128, 0.5").string(); // "rgba(128, 128, 128, 0.5)"
CM.RGBAFrom("128, 128, 128, 0.5").string({ withAlpha: false }); // "rgb(128, 128, 128)"
CM.RGBAFrom("128, 128, 128, 0.5").alphaTo(0.8).string(); // "rgba(128, 128, 128, 0.8)"
CM.RGBAFrom("rgba(128, 128, 128, 0.5)").alphaTo(0.8).string(); // "rgba(128, 128, 128, 0.8)"

// list of values as arguments
CM.RGBAFrom(128, 128, 128, 0.5).string(); // "rgba(128, 128, 128, 0.5)"
CM.RGBAFrom(128, 128, 128, 0.5).string({ withAlpha: false }); // "rgb(128, 128, 128)"
CM.RGBAFrom(128, 128, 128, 0.5).alphaTo(0.8).string(); // "rgba(128, 128, 128, 0.8)"
HSLA Color Space 
import CM from "colormaster";

// object argument
CM.HSLAFrom({ h: 300, s: 50, l: 60, a: 0.5 }).string(); // "hsla(300, 50%, 60%, 0.5)"
CM.HSLAFrom({ h: 300, s: 50, l: 60, a: 0.5 }).string({ withAlpha: false }); // "hsl(300, 50%, 60%)"
CM.HSLAFrom({ h: 300, s: 50, l: 60, a: 0.5 }).alphaTo(0.8).string(); // "hsla(300, 50%, 60%, 0.8)"

// array argument
CM.HSLAFrom([300, 50, 60, 0.5]).string(); // "hsla(300, 50%, 60%, 0.5)"
CM.HSLAFrom([300, 50, 60, 0.5]).string({ withAlpha: false }); // "hsl(300, 50%, 60%)"
CM.HSLAFrom([300, 50, 60, 0.5]).alphaTo(0.8).string(); // "hsla(300, 50%, 60%, 0.8)"

// string argument
CM.HSLAFrom("300, 50%, 60, 0.5").string(); // "hsla(300, 50%, 60%, 0.5)"
CM.HSLAFrom("300, 50, 60%, 0.5").string({ withAlpha: false }); // "hsl(300, 50%, 60%)"
CM.HSLAFrom("300, 50%, 60%, 0.5").alphaTo(0.8).string(); // "hsla(300, 50%, 60%, 0.8)"
CM.HSLAFrom("hsla(300, 50%, 60%, 0.5)").alphaTo(0.8).string(); // "hsla(300, 50%, 60%, 0.8)"

// list of values as arguments
CM.HSLAFrom(300, 50, 60, 0.5).string(); // "hsla(300, 50%, 60%, 0.5)"
CM.HSLAFrom(300, 50, 60, 0.5).string({ withAlpha: false }); // "hsl(300, 50%, 60%)"
CM.HSLAFrom(300, 50, 60, 0.5).alphaTo(0.8).string(); // "hsla(300, 50%, 60%, 0.8)"
HEXA Color Space 
import CM from "colormaster";

// object argument
CM.HEXAFrom({ r: "45", g: "67", b: "89", a: "AB" }).string(); // "#456789AB"
CM.HEXAFrom({ r: "45", g: "67", b: "89", a: "AB" }).string({ withAlpha: false }); // "#456789"
CM.HEXAFrom({ r: "45", g: "67", b: "89", a: "AB" }).alphaTo("CC").string(); // "#456789CC"

// array argument
CM.HEXAFrom(["45", "67", "89", "AB"]).string(); // "#456789AB"
CM.HEXAFrom(["45", "67", "89", "AB"]).string({ withAlpha: false }); // "#456789"
CM.HEXAFrom(["45", "67", "89", "AB"]).alphaTo("CC").string(); // "#456789CC"

// string argument
CM.HEXAFrom("45, 67, 89, AB").string(); // "#456789AB"
CM.HEXAFrom("#456789AB").string(); // "#456789AB" ← 8-Digit Hex Input
CM.HEXAFrom("#456789").string(); // "#456789FF"
CM.HEXAFrom("#4567").string(); // "#44556677" ← 4-Digit Hex Input
CM.HEXAFrom("#456").string(); // "#445566FF"
CM.HEXAFrom("45, 67, 89, AB").string({ withAlpha: false }); // "#456789"
CM.HEXAFrom("45, 67, 89, AB").alphaTo("CC").string(); // "#456789CC"
CM.HEXAFrom("#456789AB").alphaTo("CC").string(); // "#456789CC"

// list of values as arguments
CM.HEXAFrom("45", "67", "89", "AB").string(); // "#456789AB"
CM.HEXAFrom("45", "67", "89", "AB").string({ withAlpha: false }); // "#456789"
CM.HEXAFrom("45", "67", "89", "AB").alphaTo("CC").string(); // "#456789CC"

Note: HEXA string are always returned in upperCase by ColorMaster. If you prefer lowerCase strings, you can simply use (chain) the built in toLowerCase(). More information is available here

🔥 API

ColorMaster (currently) supports RGBA, HEXA, and HSLA color spaces. The following will show examples in a few color spaces (namely RGBA and HSLA) to illustrate how the API should be used. Rest assured that all the presented functionally is available for each color space.

Formatting

string(opts) Generates a human readable string from a given color instance 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).string(); // "rgba(255, 0, 0, 1.0)"
CM.RGBAFrom(255, 0, 0, 1).string({ withAlpha: false }); // "rgba(255, 0, 0)"
CM.RGBAFrom(200.1234, 100.1234, 50.1234, 0.61234).string({ precision: [1, 2, 3, 4] }); // "rgba(200.1, 100.12, 50.123, 0.6123)"
name() Gets the color table CSS/HTML name for a given color 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).name(); // "red"
CM.RGBAFrom(0, 255, 0, 1).name(); // "green"
CM.RGBAFrom(0, 0, 255, 1).name(); // "blue"

Channel/Instance Level Information

object Retrieve the object corresponding to the color instance 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).object; // "{ r: 255, g: 0, b: 0, a: 1 }"
array Retrieve the array corresponding to the color instance 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).array; // "[255, 0, 0, 1]"
format Retrieve the format of color instance (what is the color space) 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).format; // "rgb"
red Get the "red" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).red; // 255
CM.HSLAFrom(0, 100%, 50%, 1).red; // 255
CM.HEXAFrom("FF", "00", "00", "FF").red; // "FF"
green Get the "green" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(0, 255, 0, 1).green; // 255
CM.HSLAFrom(120, 100%, 50%, 1).green; // 255
CM.HEXAFrom("00", "FF", "00", "FF").green; // "FF"
blue Get the "blue" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(0, 0, 255, 1).blue; // 255
CM.HSLAFrom(240, 100%, 50%, 1).blue; // 255
CM.HEXAFrom("00", "00", "FF", "FF").blue; // "FF"
alpha Get the "alpha" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(0, 0, 255, 1).alpha; // 1
CM.HSLAFrom(240, 100%, 50%, 1).alpha; // 1
CM.HEXAFrom("00", "00", "FF", "FF").alpha; // "FF"
hue Get the "hue" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(0, 0, 255, 1).hue; // 240
CM.HSLAFrom(240, 100%, 50%, 1).hue; // 240
CM.HEXAFrom("00", "00", "FF", "FF").hue; // 240
saturation Get the "saturation" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(0, 0, 255, 1).saturation; // 100
CM.HSLAFrom(240, 100%, 50%, 1).saturation; // 100
CM.HEXAFrom("00", "00", "FF", "FF").saturation; // 100
lightness Get the "lightness" channel value for the color instance. 
import CM from "colormaster";
CM.RGBAFrom(0, 0, 255, 1).lightness; // 50
CM.HSLAFrom(240, 100%, 50%, 1).lightness; // 50
CM.HEXAFrom("00", "00", "FF", "FF").lightness; // 50

Generation

RGBAFrom(input) Creates a RGBA color instance from a given input. Alpha channel values are considered as well. 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).string(); // "rgba(255, 0, 0, 1.0)"
CM.RGBAFrom(255, 0, 0).string(); // "rgba(255, 0, 0, 1.0)"
CM.RGBAFrom(255, 0, 0, 0.7).string(); // "rgba(255, 0, 0, 0.7)"
CM.RGBAFrom("rgba(255, 0, 0, 1)").string(); // "rgba(255, 0, 0, 1.0)"
CM.RGBAFrom([255, 0, 0, 1]).string(); // "rgba(255, 0, 0, 1.0)"
CM.RGBAFrom({ r: 255, g: 0, b: 0, a: 1 }).string(); // "rgba(255, 0, 0, 1.0)"
HSLAFrom(input) Creates a HSLA color instance from a given input. Alpha channel values are considered as well. 
import CM from "colormaster";
CM.HSLAFrom(120, 100, 50, 1).string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HSLAFrom(120, 100, 50).string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HSLAFrom(120, 100, 50, 0.7).string(); // "hsla(120, 100%, 50%, 0.7)"
CM.HSLAFrom("hsla(120, 100%, 50%, 1)").string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HSLAFrom([120, 100, 50, 1]).string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HSLAFrom({ h: 120, s: 100, l: 50, a: 1 }).string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HSLAFrom("green", 90, 40, 0.5).string(); // "hsla(120, 90%, 40%, 0.5)"
HEXAFrom(input) Creates a HEXA color instance from a given input. Alpha channel values are considered as well. Supports 3-digit, 4-digit, 6-digit, and 8-digit HEX(A) input. 
import CM from "colormaster";
CM.HEXAFrom("45", "67", "89", "AB").string(); // "#456789AB"
CM.HEXAFrom("45", "67", "89").string(); // "#456789FF"
CM.HEXAFrom("#456789").string(); // "#456789FF"
CM.HEXAFrom(["45", "67", "89", "AB"]).string(); // "#456789AB"
CM.HEXAFrom({ r: "45", g: "67", b: "89", a: "AB" }).string(); // "#456789AB"
fromName() Generates an RGBA color from an input CSS/HTML name You can use this to also convert to HSLA or HEXA space via chaining of the `hsl()` or `hex()` methods. 
import CM from "colormaster";
CM.fromName("red").string(); // "rgba(255, 0, 0, 1.0)"
CM.fromName("green").string(); // "rgba(0, 255, 0, 1.0)"
CM.fromName("blue").string(); // "rgba(0, 0, 255, 1.0)"
CM.fromName("blue").hsl().string(); // "hsla(240, 100%, 50%, 1.0)"
CM.fromName("blue").hex().string(); // "#0000FFFF"
random() Generates a random RGBA color. You can use this to also convert to HSLA or HEXA space via chaining of the `hsl()` or `hex()` methods. 
import CM from "colormaster";
CM.random().string(); // "rgba(255, 0, 0, 1.0)"
CM.random()().hsl().string(); // "hsla(0, 100%, 50%, 1.0)"
CM.random().hex().string(); // "#FF0000FF"

Conversion

rgb() Convert a color instance to the corresponding RGBA color 
import CM from "colormaster";
CM.HEXAFrom("#F00").rgb().string(); // "rgba(255, 0, 0, 1)"
CM.HSLAFrom(0, 100, 50, 1).rgb().string(); // "rgba(255, 0, 0, 1)"
hsl() Convert a color instance to the corresponding HSLA color 
import CM from "colormaster";
CM.HEXAFrom("#F00").hsl().string(); // "hsla(0, 100%, 50%, 1)"
CM.RGBAFrom(255, 0, 0, 1).hsl().string(); // "hsla(0, 100%, 50%, 1)"
hex() Convert a color instance to the corresponding HEXA color 
import CM from "colormaster";
CM.HSLAFrom(0, 100, 50, 1).hex().string(); // "#FF0000FF"
CM.RGBAFrom(255, 0, 0, 1).hex().string(); // "#FF0000FF"

Manipulation

changeValueTo(channel, value) Lets you set a single channel value to a specific number 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).changeValueTo("red", 120).string(); // "rgba(120, 0, 0, 1.0)"
CM.HSLAFrom(0, 100, 50, 1).changeValueTo("hue", 120).string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HEXAFrom("FF", "00", "00").changeValueTo("red", "AA").string(); // "#AA0000FF"
changeValueBy(channel, delta) Lets you set a single channel value to a specific number 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).changeValueBy("red", -55).string(); // "rgba(200, 0, 0, 1.0)"
CM.HSLAFrom(10, 100, 50, 1).changeValueBy("hue", 120).string(); // "hsla(130, 100%, 50%, 1.0)"
CM.HEXAFrom("BB", "00", "00").changeValueBy("red", "21").string(); // "#DC0000FF"
hueTo(value | cssName) Syntactic sugar for changeValueTo('hue', value) 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).hueTo(120).string(); // "rgba(0, 255, 0, 1.0)"
CM.HSLAFrom(0, 100, 50, 1).hueTo(120).string(); // "hsla(120, 100%, 50%, 1.0)"
CM.HEXAFrom("FF", "00", "00").hueTo("green").string(); // "#00FF00FF"
hueBy(delta) Syntactic sugar for changeValueBy('hue', delta) 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).hueBy(120).string(); // "rgba(0, 255, 0, 1.0)"
CM.HSLAFrom(0, 100, 50, 1).hueBy(-10).string(); // "hsla(350, 100%, 50%, 1.0)"
CM.HEXAFrom("FF", "00", "00").hueBy(240).string(); // "#0000FFFF"
alphaTo(value) Syntactic sugar for changeValueTo('alpha', value) 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).alphaTo(0.5).string(); // "rgba(255, 0, 0, 0.5)"
CM.HSLAFrom(0, 100, 50, 1).alphaTo(0.5).string(); // "hsla(0, 100%, 50%, 0.5)"
CM.HEXAFrom("FF", "00", "00").alphaTo("AA").string(); // "#FF0000AA"
alphaBy(delta) Syntactic sugar for changeValueBy('alpha', delta) 
import CM from "colormaster";
CM.RGBAFrom(255, 0, 0, 1).alphaBy(-0.1).string(); // "rgba(255, 0, 0, 0.9)"
CM.HSLAFrom(0, 100, 50, 1).alphaBy(-0.1).string(); // "hsla(0, 100%, 50%, 0.9)"
CM.HEXAFrom("FF", "00", "00", "99").alphaBy("23").string(); // "#FF0000BC"
saturateBy(delta) Syntactic sugar for changeValueBy('saturation', delta). This adds pigmentation to a color, making it less gray. 
import CM from "colormaster";
CM.HSLAFrom(0, 60, 50, 1).saturateBy(20).string(); // "hsla(0, 80%, 50%, 1.0)"
desaturateBy(delta) The opposite affect of saturateBy(delta). This removes pigmentation from a color making it more gray. 
import CM from "colormaster";
CM.HSLAFrom(0, 60, 50, 1).desaturateBy(20).string(); // "hsla(0, 40%, 50%, 1.0)"
lighterBy(delta) Syntactic sugar for changeValueBy('lightness', delta). This adds white to a color. 
import CM from "colormaster";
CM.HSLAFrom(0, 60, 50, 1).lighterBy(10).string(); // "hsla(0, 60%, 60%, 1.0)"
darkerBy(delta) The opposite of lighterBy(delta). This adds black to a color. 
import CM from "colormaster";
CM.HSLAFrom(0, 60, 50, 1).darkerBy(10).string(); // "hsla(0, 60%, 40%, 1.0)"
grayscale() The same as setting the saturation to "0%" for a color. This makes the color appear grey as it completely removes all pigmentation. 
import CM from "colormaster";
CM.HSLAFrom(0, 60, 50, 1).grayscale().string(); // "hsla(0, 0%, 50%, 1.0)"
rotate(value) This simply adjusts the angle of the color along the color wheel by incrementing the hue value. 
import CM from "colormaster";
CM.HSLAFrom(0, 60, 50, 1).rotate(120).string(); // "hsla(120, 60%, 50%, 1.0)"
invert(opts) Gets the inverted color corresponding to the current color. This is different from a complementary color.

Example, hue of 120 is 240 for the inverted color (360-120), but 300 for the complementary color (120+180)

import CM from "colormaster";
CM.HSLAFrom(120, 60, 30, 0.3).invert().string(); // "hsla(240, 40%, 70%, 0.7)"
CM.HSLAFrom(120, 60, 30, 0.3).invert({ includeAlpha: false }).string(); // "hsla(240, 40%, 70%, 0.3)"

Accessibility (A11y)

brightness(opts) Finds the normalized brightness of the color as defined by WCAG 
import CM from "colormaster";
CM.HSLAFrom(0, 0, 0).brightness(); // 0
CM.HSLAFrom(0, 0, 0).brightness({ percentage: true }); // 0
CM.HSLAFrom(0, 0, 25.1).brightness(); // 0.251
CM.HSLAFrom(0, 0, 25.1).brightness({ percentage: true }); // 25.1
CM.HSLAFrom(0, 0, 50.2).brightness(); // 0.502
CM.HSLAFrom(0, 0, 50.2).brightness({ percentage: true }); // 50.2
CM.HSLAFrom(0, 0, 75.29).brightness(); // 0.7529
CM.HSLAFrom(0, 0, 75.29).brightness({ percentage: true }); // 75.29
CM.HSLAFrom(0, 0, 100).brightness(); // 1
CM.HSLAFrom(0, 0, 100).brightness({ percentage: true }); // 100
luminance(opts) Finds the normalized luminance of the color as defined by WCAG 2.0 
import CM from "colormaster";
CM.HSLAFrom(0, 0, 0).luminance(); // 0
CM.HSLAFrom(0, 0, 0).luminance({ percentage: true }); // 0
CM.HSLAFrom(0, 0, 25.1).luminance(); // 0.0513
CM.HSLAFrom(0, 0, 25.1).luminance({ percentage: true }); // 5.13
CM.HSLAFrom(0, 0, 50.2).luminance(); // 0.2159
CM.HSLAFrom(0, 0, 50.2).luminance({ percentage: true }); // 21.59
CM.HSLAFrom(0, 0, 75.29).luminance(); // 0.5271
CM.HSLAFrom(0, 0, 75.29).luminance({ percentage: true }); // 52.71
CM.HSLAFrom(0, 0, 100).luminance(); // 1
CM.HSLAFrom(0, 0, 100).luminance({ percentage: true }); // 100
contrast(bgColor, opts) Indicates how well a given color can be read/seen when on a background given by bgColor. A ratio of "1:1" indicates very poor contrast, while "21:1" indicates very good contrast. The calculated value also depends on factors such as text size and contrast ratio type. The lowest acceptable contrast ratio is "3:1" according to WCAG 
import CM from "colormaster";
CM.HSLAFrom(0, 0, 0).contrast(); // 21
CM.HSLAFrom(0, 0, 0).contrast("0, 0, 100", { ratio: true }); // "21.0000:1"
CM.HSLAFrom(0, 0, 25.1).contrast(); // 10.3653
CM.HSLAFrom(0, 0, 25.1).contrast("0, 0, 100", { ratio: true }); // "10.3653:1"
CM.HSLAFrom(0, 0, 50.2).contrast(); // 3.9489
CM.HSLAFrom(0, 0, 50.2).contrast("0, 0, 100", { ratio: true }); // "3.9489:1"
CM.HSLAFrom(0, 0, 75.29).contrast(); // 1.8194
CM.HSLAFrom(0, 0, 75.29).contrast("0, 0, 100", { ratio: true }); // "1.8194:1"
CM.HSLAFrom(0, 0, 100).contrast(); // 1
CM.HSLAFrom(0, 0, 100).contrast("0, 0, 100", { ratio: true }); // "1.0000:1"
isLight() Based on the color brightness (true if brightness >= 0.5) 
import CM from "colormaster";
CM.HSLAFrom(0, 0, 0).isLight(); // false
CM.HSLAFrom(0, 0, 49.9).isLight(); // false
CM.HSLAFrom(0, 0, 50.1).isLight(); // true
CM.HSLAFrom(0, 0, 100).isLight(); // true
isDark() Based on the color brightness (true if brightness < 0.5) 
import CM from "colormaster";
CM.HSLAFrom(0, 0, 0).isDark(); // true
CM.HSLAFrom(0, 0, 49.9).isDark(); // true
CM.HSLAFrom(0, 0, 50.1).isDark(); // false
CM.HSLAFrom(0, 0, 100).isDark(); // false
readableOn(bgColor, opts) Based on the contrast value of a color on a given background color. The output is obtained by the conditions outlined in WCAG 
import CM from "colormaster";
const blackColor = CM.HSLAFrom(0, 0, 0);

// extremes (default color is white as bg, size = body, ratio = minimum)
CM.HSLAFrom(0, 0, 100).readableOn(); // false
blackColor.readableOn(); // true
blackColor.readableOn(blackColor); // false

// 3.0:1
blackColor.readableOn([0, 0, 34.9], { size: "large", ratio: "minimum" }); // false
blackColor.readableOn([0, 0, 35.3], { size: "large", ratio: "minimum" }); // true

// 4.5:1
blackColor.readableOn([0, 0, 45.5]); // false
blackColor.readableOn([0, 0, 45.9]); // true
blackColor.readableOn([0, 0, 45.5], { size: "large", ratio: "enhanced" }); // false
blackColor.readableOn([0, 0, 45.9], { size: "large", ratio: "enhanced" }); // true

// 7.0:1
blackColor.readableOn([0, 0, 58.0], { size: "body", ratio: "enhanced" }); // false
blackColor.readableOn([0, 0, 58.4], { size: "body", ratio: "enhanced" }); // true
equalTo(compareColor) Determines if the current color is identical (all channels are the same) to compareColor 
import CM from "colormaster";
CM.HSLAFrom(0, 0, 99, 1).equalTo(CM.HSLAFrom(0, 0, 99, 1)); // true
CM.HSLAFrom(0, 0, 99, 1).equalTo(CM.HSLAFrom(1, 0, 99, 1)); // false
CM.HSLAFrom(0, 0, 99, 1).equalTo(CM.HSLAFrom(0, 1, 99, 1)); // false
CM.HSLAFrom(0, 0, 99, 1).equalTo(CM.HSLAFrom(0, 0, 98, 1)); // false
CM.HSLAFrom(0, 0, 99, 1).equalTo(CM.HSLAFrom(0, 0, 99, 0.9)); // false
isWarm() "Warm colors are the colors from red through to yellow. These colors are said to bring to mind warmth, like the sun." Based on the information presented on Canva 
import CM from "colormaster";
CM.HSLAFrom(74.9, 100, 50, 1).isWarm(); // true
CM.HSLAFrom(255, 100, 50, 1).isWarm(); // true
CM.HSLAFrom(0, 100, 50, 1).isWarm(); // true
CM.HSLAFrom(180, 100, 50, 1).isWarm(); // false
isCool() "Cool colors are the colors from blue to green and purple. These colors are said to bring to mind coolness, like water." Based on the information presented on Canva 
import CM from "colormaster";
CM.HSLAFrom(75, 100, 50, 1).isCool(); // true
CM.HSLAFrom(254.9, 100, 50, 1).isCool(); // true
CM.HSLAFrom(180, 100, 50, 1).isCool(); // true
CM.HSLAFrom(0, 100, 50, 1).isCool(); // false
isTinted() A color is tinted if its lightness value is strictly greater than 50%. 
import CM from "colormaster";
CM.HSLAFrom(0, 100, 51, 1).isTinted(); // true
CM.HSLAFrom(0, 100, 50, 1).isTinted(); // false
CM.HSLAFrom(0, 100, 49, 1).isTinted(); // false
isShaded() A color is shaded if its lightness value is strictly less than 50%. 
import CM from "colormaster";
CM.HSLAFrom(0, 100, 51, 1).isShaded(); // false
CM.HSLAFrom(0, 100, 50, 1).isShaded(); // false
CM.HSLAFrom(0, 100, 49, 1).isShaded(); // true
isToned() A color is toned if its saturation value is strictly less than 100%. 
import CM from "colormaster";
CM.HSLAFrom(0, 100, 50, 1).isToned(); // false
CM.HSLAFrom(0, 99, 50, 1).isToned(); // true
isPureHue(opts) A color is pure if its saturation value is 100% and lightness value is 50%. 
import CM from "colormaster";
CM.HSLAFrom(0, 100, 50, 1).isPureHue(); // { pure: true, reason: 'N/A' }
CM.HSLAFrom(0, 100, 50, 1).isPureHue({ reason: false }); // true
CM.HSLAFrom(0, 100, 51, 1).isPureHue(); // { pure: false, reason: 'tinted' }
CM.HSLAFrom(0, 100, 51, 1).isPureHue({ reason: false }); // false
CM.HSLAFrom(0, 100, 49, 1).isPureHue(); // { pure: false, reason: 'shaded' }
CM.HSLAFrom(0, 100, 49, 1).isPureHue({ reason: false }); // false
CM.HSLAFrom(0, 99, 50, 1).isPureHue(); // { pure: false, reason: 'toned' }
CM.HSLAFrom(0, 99, 50, 1).isPureHue({ reason: false }); // false

Utilities

closestWebSafe() Finds the closest color to the current color instance that is considered to be web safe 
import CM from "colormaster";
CM.HSLAFrom(3, 97, 47, 0.7).closestWebSafe().string(); // "hsla(0, 100%, 50%, 0.7)"
closestCool() Finds the closest color to the current color instance that is a "Cool" color 
import CM from "colormaster";
CM.HSLAFrom(300, 100, 50, 1).closestCool().string(); // "hsla(254, 100%, 50%, 1.0)"
closestWarm() Finds the closest color to the current color instance that is a "Warm" color 
import CM from "colormaster";
CM.HSLAFrom(120, 100, 50, 1).closestWarm().string(); // "hsla(74, 100%, 50%, 1.0)"
closestPureHue() Finds the closest color (hue) to the current color instance that has 100% saturation and 50% lightness. 
import CM from "colormaster";
CM.HSLAFrom(120, 99, 51, 1).closestPureHue().string(); // "hsla(120, 100%, 50%, 1.0)"
harmony(type, monochromaticOpts) Generates a color harmony according to the selected type. Note that for the 'monochromatic' color harmony, an array of tints, shades, or tones is generated based on the provided monochromaticOpts 
import CM from "colormaster";
const ogColor = "hsla(30, 50%, 50%, 1)";
CM.HSLAFrom(ogColor)
  .harmony("analogous")
  .map((c) => c.string());
// ["hsla(0, 50%, 50%, 1.0)", "hsla(30, 50%, 50%, 1.0)", "hsla(60, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("complementary")
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(210, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("split-complementary")
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(180, 50%, 50%, 1.0)", "hsla(240, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("double-split-complementary")
  .map((c) => c.string());
// ["hsla(0, 50%, 50%, 1.0)", "hsla(30, 50%, 50%, 1.0)", "hsla(60, 50%, 50%, 1.0)", "hsla(180, 50%, 50%, 1.0)", "hsla(240, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("triad")
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(150, 50%, 50%, 1.0)", "hsla(270, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("rectangle")
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(90, 50%, 50%, 1.0)",  "hsla(210, 50%, 50%, 1.0)", "hsla(270, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("square")
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(120, 50%, 50%, 1.0)", "hsla(210, 50%, 50%, 1.0)", "hsla(300, 50%, 50%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("monochromatic", { effect: "tints" })
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(30, 50%, 60%, 1.0)", "hsla(30, 50%, 70%, 1.0)", "hsla(30, 50%, 80%, 1.0)", "hsla(30, 50%, 90%, 1.0)", "hsla(30, 50%, 100%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("monochromatic", { effect: "shades" })
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(30, 50%, 40%, 1.0)", "hsla(30, 50%, 30%, 1.0)", "hsla(30, 50%, 20%, 1.0)", "hsla(30, 50%, 10%, 1.0)", "hsla(30, 50%, 0%, 1.0)"]

CM.HSLAFrom(ogColor)
  .harmony("monochromatic", { effect: "tones" })
  .map((c) => c.string());
// ["hsla(30, 50%, 50%, 1.0)", "hsla(30, 40%, 50%, 1.0)", "hsla(30, 30%, 50%, 1.0)", "hsla(30, 20%, 50%, 1.0)", "hsla(30, 10%, 50%, 1.0)", "hsla(30, 0%, 50%, 1.0)"]

😍 Strongly Typed

Rather than using pure JavaScript which can lead to hard to debug errors during development, ColorMaster was written in TypeScript (strict mode) to provide a pleasant development experience.

The type definitions are included with the module, so you get intellisense right out of the box.

Additionally, ColorMaster exports all of its types and interfaces so that you can use them in your code.

import { Irgb, Irgba, Ihex, Ihexa, Ihsl, Ihsla } from "colormaster";

let rgb: Irgb;
rgb = { r: 128, g: 128, b: 128 }; // OK
rgb = { r: 128, g: 128, b: 128, a: 0.5 }; // ERROR
rgb = { red: 128, green: 128, blue: 128 }; // ERROR

let rgba: Irgba;
rgba = { r: 128, g: 128, b: 128, a: 0.5 }; // OK
rgba = { r: 128, g: 128, b: 128 }; // ERROR
rgba = { r: 128, g: 128, b: 128, alpha: 0.5 }; // ERROR

/* -------------------------------------------- */

let hex: Ihex;
hex = { r: "AA", g: "BB", b: "CC" }; // OK
hex = { r: "AA", g: "BB", b: "CC", a: "DD" }; // ERROR
hex = { red: "AA", green: "BB", blue: "CC" }; // ERROR

let hexa: Ihexa;
hexa = { r: "AA", g: "BB", b: "CC", a: "DD" }; // OK
hexa = { r: "AA", g: "BB", b: "CC" }; // ERROR
hexa = { r: "AA", g: "BB", b: "CC", alpha: "DD" }; // ERROR

/* -------------------------------------------- */

let hsl: Ihsl;
hsl = { h: 240, s: 50, l: 75 }; // OK
hsl = { h: 240, s: 50, l: 75, a: 0.5 }; // ERROR
hsl = { hue: 240, saturation: 50, lightness: 75 }; // ERROR

let hsla: Ihsla;
hsla = { h: 240, s: 50, l: 75, a: 0.5 }; // OK
hsla = { h: 240, s: 50, l: 75 }; // ERROR
hsla = { h: 240, s: 50, l: 75, alpha: 0.5 }; // ERROR

📕 Documentation Documentation

📈 Roadmap & Tasks

Visit our automated Kanban for a detailed overview of the features/tasks that need to be added to ColorMaster in the near future.

Here is a snapshot of what completed and planned features:

  • CSS/HTML name, HEXA, RGBA, HSLA input handling
  • Color wheel manipulation (rotation, saturation, lightness, grayscale)
  • Proper handling of improper input values
  • brightness, luminance, contrast accessibility functions - along with other helpful wrappers
  • Setting/adjusting channel values in all color spaces
  • Color harmony generation
  • Color mixing
  • XYZ/LAB/LCH/HWB/HSV/RYB/CMYK color space

License GitHub License

All of the code used in ColorMaster is released under the MIT License.

FOSSA Status