Giter Club home page Giter Club logo

colormix's Introduction

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!

colormix's People

Contributors

flo-sch avatar

Watchers

Lahir Wisada Santoso avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.