JSPM – colormaster@0.0.9

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: "44", g: "55", b: "66", a: "77" }).string(); // "#44556677"
CM.HEXAFrom({ r: "44", g: "55", b: "66", a: "77" }).string({ withAlpha: false }); // "#445566"
CM.HEXAFrom({ r: "44", g: "55", b: "66", a: "77" }).alphaTo("CC").string(); // "#445566CC"

// array argument
CM.HEXAFrom(["44", "55", "66", "77"]).string(); // "#44556677"
CM.HEXAFrom(["44", "55", "66", "77"]).string({ withAlpha: false }); // "#445566"
CM.HEXAFrom(["44", "55", "66", "77"]).alphaTo("CC").string(); // "#445566CC"

// string argument
CM.HEXAFrom("44, 55, 66, 77").string(); // "#44556677"
CM.HEXAFrom("44, 55, 66, 77").string({ withAlpha: false }); // "#445566"
CM.HEXAFrom("44, 55, 66, 77").alphaTo("CC").string(); // "#445566CC"
CM.HEXAFrom("#44556677").alphaTo("CC").string(); // "#445566CC"

// list of values as arguments
CM.HEXAFrom("44", "55", "66", "77").string(); // "#44556677"
CM.HEXAFrom("44", "55", "66", "77").string({ withAlpha: false }); // "#445566"
CM.HEXAFrom("44", "55", "66", "77").alphaTo("CC").string(); // "#445566CC"

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

😍 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

API documentation can be found on our documentation site.
A more in depth guide can be seen in our Wikis.

📈 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.

License

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