hu19891110 / colormix

JavaScript Color mixer and manipulation tool

ColorMix.js

ColorMix.js makes it easy to manipulate Color objects in RGB, HSL, XYZ and Lab color spaces. It allows you to mix, blend and render these colors with a gradient some colors.

Authored and currently maintained by Flo-Schield-Bobby.

Please refer to the website to get started or watch the complete documentation!

Contributions are welcome !

---

Usage

Create a Color object

var color = new ColorMix.Color(255, 255, 255);
// Or if you prefer hexadecimal strings, it looks like this:
var color = new ColorMix.Color('#ffffff');

Manipulate a Color object

var red = color.getRed();
// Chaining operations is possible
color.setRed(200).setBlue(300).setGreen(0);
// Then get the color value (of course "toString()" or other getters will break the chaining...)
color.toString('hex'); // "#c800ff" --> Hexadecimal by default
color.toString('rgb'); // "rgb(200, 0, 300)"
color.toString('hsl'); // "hsl(287, 100%, 50%)"
// And if you want rgba or hsla formats, even if the alpha is static
color.toString('rgba'); // "rgba(200, 0, 300, 1)"
color.toString('hsla'); // "hsla(287, 100%, 50%, 1)"
// Reset from an hexadecimal string
color.fromHex('#dd9911');

Render your colors on DOM HTML elements

// Note that jQuery is used with the selector parameter if possible.
// A fallback is provided otherwise, but may not works for "complex" selectors as tag#id
color.useAsBackground('body');
color.useAsColor('#id');

Switch of color space

// Note that this ColorSpace singleton is used in mix and blend functions.
// You probably will not need to use it directly.
var RGB = ColorMix.ColorSpace.RGB(255, 255, 255), // { red: 255, green: 255, blue: 255 }
	XYZ = ColorMix.ColorSpace.RGBtoXYZ(RGB), // { x: 95.05, y: 100, z: 108.89999999999999 }
	Lab = ColorMix.ColorSpace.XYZtoLab(XYZ); // { L: 100, a: 0.00526049995830391, b: -0.010408184525267927 }

Mix several colors with a percent ratio

// Note that mix accept two argument: an array of ColorMix.Color instances and an array of ratio (the percent for each color)
// The sum of all this second argument should always be equal to 100.
var white = new ColorMix.Color(255, 255, 255),
	bootstrapLinkColor = new ColorMix.Color(0, 152, 204),
	bootstrapLinkColorLight = ColorMix.mix([white, bootstrapLinkColor], [30, 70]); // A lighted, "creamy" version of bootstapLinkColor !

// For instance, the following things will throw an exception
var M1 = ColorMix.mix([white, bootstrapLinkColor], [20]);
var M2 = ColorMix.mix([white, bootstrapLinkColor], [50, 80]);
var M3 = ColorMix.mix([white, bootstrapLinkColor], ['somestring', 80]);

// However, you can ignore this second array. In this case, the mix will returns the average of your colors in the L*a*b color space.
var M4 = ColorMix.mix([white, bootstrapLinkColor]); // Equivalent to ColorMix.mix([white, bootstrapLinkColor], [50, 50]);

Blend a reference in your gradient

// You definitely should set up your own gradient before using the blend feature!
ColorMix.setGradient([
	{ reference: -10, color: { red: 0, green: 120, blue: 240 } },
	{ reference: 0, color: { red: 60, green: 90, blue: 180 } },
	{ reference: 10, color: { red: 120, green: 60, blue: 120 } }
]);

ColorMix.blend(7.34); // ColorMix.Color { red: 109, green: 70, blue: 138 }
// Then, as you get a ColorMix.Color instance, feel free to render it on a DOM element, for instance!