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.

jQuery extension

$(node).isReadable()

Performs a readability test on the first selected element.

// Example:
var bReadable = $("#tag").isReadable();

$(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

// Example:
$(this).animate({ backgroundColor: "#fff" }, 300);

Note: As you can see in the example, all CSS colors have to passed in the common JavaScript CamelCase formatting style.

Download the jQuery xcolor plugin

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
• 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.greyfilter(color[, fomula=1])

Gray a given color using different formulas.

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

$.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);

$.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');

$.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.complementary(color)

Calculates the complementary color.

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

$.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.splitcomplements(color)

Generates the split complements of a given color.

// Example:
$.xcolor.splitcomplements('#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');