jQuery color plugin xcolor

The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations.

Overview

This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors. Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.

Basic Usage

The jQuery color plugin can be used to simply transform colors like Microsoft's million dollar color:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script>

var color = $.xcolor.greyfilter("#0044cc");

console.log(color.getHex());

</script>

getHex() is just an example, see below for the other Color methods

jQuery extension

$(node).isReadable()

Performs a readability test on the first selected element.

<span class="hljs-comment">// Example:</span>
var bReadable = $("#tag").isReadable();

$(node).css()

It's possible to use the xcolor library quite naturally via jQuerys css() method. This is useful if the input of a color comes from an user input and needs a parsing layer and some sanity checks in between.

<span class="hljs-comment">// Example:</span>
$("#css").css({
	backgroundColor: $.xcolor.sepia("#ad6a6a"),
	color: "rand"
});

$(node).colorize(from, to, method)

The colorize() function is a nice toy to colorize texts. Also nested HTML nodes get colorized. There are three callback methods shipped; gradient, flip, pillow, but it's quite easy to define a callback by yourself - like I did in this post to randomly change the color of the header of this post:

<span class="hljs-comment">// Example:</span>
$("h1").colorize("rgb(215, 104, 10)", "rgb(96, 170, 173)", 
	function(){
		// Callback has to return value between 0 (=from) and 1 (=to).
		return Math.random()
	});
});

Another example simple changes every character between a random color and the famous burnt sienna.

<span class="hljs-comment">// Example:</span>
$(".class").colorize("burntsienna", "rand", "flip");

$(node).animate()

Adds the option to smooth the following CSS colors using the default animate() method of jQuery TO the passed value:
color, background-color, border-color, border-top-color, border-bottom-color, border-left-color, border-right-color, outline-color

<span class="hljs-comment">// Example:</span>
$(this).animate({ backgroundColor: "#fff" }, 300);

As of version 1.1, it is possible to define a seperated list of colors like in the example. The keyword native is a reserved "color" which represents the previous color or the color of the parent element, to be able to simulate the one-color mode.

<span class="hljs-comment">// Example:</span>
$('#rainbow').click(function() {
	$(this).animate({ backgroundColor: "native; #00f; red; hsv(60, 60, 60); red; #00f; native" }, 5000);
});

You can test it right here, by clicking on the field:

Try out the color parser for yourself

Type in any color name or value to test the input parser:

Now it becomes colorful!

As a little test scenario, I've added a color picker to let you play around with the methods below:

Change First color

Change Second color

Simple color methods

All simple color methods return per default the color as hex value. To be correct, the hex value is generated by the overridden toString() method. Thus, in general an object is returned, which can be accessed by one of the following methods:

• getRGB() - Returns the color as RGB object
• getHSV() - Returns the color as HSV object
• getInt() - Returns the color as normalized integer value
• getArray() - Returns the color as simple array
• getFraction() - Returns the color as fractions object, with every value in the interval [0, 1]
• getCss() - Returns the color formatted as a string to be passed to a CSS color attribute
• getName() - Returns the nearest color name
• getHex() - Returns the color as Hex string (default)

$.xcolor.red(color)

Extracts the red portion of a given color.

// Example:
$.xcolor.red('#3498CD');

$.xcolor.green(color)

Extracts the green portion of a given color.

// Example:
$.xcolor.green('#ABB34F');

$.xcolor.blue(color)

Extracts the blue portion of a given color.

// Example:
$.xcolor.blue('hsl(100, 10, 60)');

$.xcolor.sepia(color)

Calculates dark brown color tones.

// Example:
$.xcolor.sepia('#4f23a0');

$.xcolor.greyfilter(color[, fomula=1])

Gray a given color using different formulas.

// Example:
$.xcolor.greyfilter('#3366CC');

$.xcolor.complementary(color)

Calculates the complementary color.

// Example:
$.xcolor.complementary('green');

$.xcolor.webround(color)

Makes the given color web safe.

// Example:
$.xcolor.webround('#557DAA');

$.xcolor.gradientlevel(color, color, position, size)

Imagine you have a gradient from the first color to the second color over a certain number of segmentations. Now you want a color at a certain position in the interval from 0 to size, this is what this function calculates.

// Example:
$.xcolor.gradientlevel('#fc0', '#f00', 23, 100);

$.xcolor.random()

Generates a random color.

// Example:
$.xcolor.random();

Combination color methods

$.xcolor.opacity(color, color, transparency)

Calculates the resulting color if the first color lies over the second color with a certain transparency level.

// Example:
$.xcolor.opacity('f00', 'lightgrey', 0.69);

$.xcolor.combine(color, color)

Combines two colors using a simple XOR algorithm.

// Example:
$.xcolor.combine(9414941, '#123456');

$.xcolor.additive(color, color)

Calculates the additive color mix of two colors.

// Example:
$.xcolor.additive('#443311', '#660066');

$.xcolor.subtractive(color, color)

Calculates the subtractive color mix of two colors.

// Example:
$.xcolor.subtractive('#cec', 'hsv(49, 88, 63)');

$.xcolor.multiply(color, color)

Calculates the multiplicative color mix of two colors.

// Example:
$.xcolor.multiply('#660066', '#443456');

$.xcolor.average(color, color)

Mixes two colors by building the average.

// Example:
$.xcolor.average('#00FF66', '#443456');

$.xcolor.breed(color, color)

Generates a new random number with parts of both colors.

// Example:
$.xcolor.breed('#443311', '#123456');

$.xcolor.lighten(color[, step=1[, shade=32]])

Lighten a color.

// Example:
$.xcolor.lighten('#05307E');

$.xcolor.darken(color[, step=1[, shade=32]])

Darken a color.

// Example:
$.xcolor.darken('#660');

More complex color methods

$.xcolor.triad(color)

Generates a color triad of a given color.

// Example:
$.xcolor.triad('#7DAD18');

$.xcolor.tetrad(color)

Generates a color tetrad of a given color.

// Example:
$.xcolor.tetrad('#1E8FA8');

$.xcolor.analogous(color[, results=8[, slices=30]])

Finds analogous colors to a given color.

// Example:
$.xcolor.analogous('#da0');

$.xcolor.monochromatic(color[, results=6])

Finds monochromatic colors to a given color.

// Example:
$.xcolor.monochromatic('#0066FF');

$.xcolor.splitcomplement(color)

Generates the split complements of a given color.

// Example:
$.xcolor.splitcomplement('#0066FF');

Miscellaneous color methods

$.xcolor.readable(color, color)

Checks if given color is readable on a certain background.

// Example:
$.xcolor.readable('#99CCFF', '#666');

$.xcolor.nearestname(color)

Searches the nearest color name of a given color.

// Example:
$.xcolor.nearestname('#257074');

$.xcolor.distance(color, color)

Calculates the distance between two colors using a fast formula.

// Example:
$.xcolor.distance('black', 'white');