jQuery color is a plugin released by the jQuery development team to support color manipulation and animations in web development.
$.color() or jQuery.color() function allows you to create and manipulate color objects which are accepted by .animate() and .css() functions.
$.color() or jQuery.color() function allows you to create and manipulate color objects which are accepted by .animate() and .css() functions.
//parsing string colors
jQuery.Color( "#abcdef" );
jQuery.Color( "rgb(100,200,255)" );
jQuery.Color( "rgba(100,200,255,0.5)" );
jQuery.Color( "aqua" );
// Creating Color Objects in Code:
// use null or undefined for values you wish to leave out
jQuery.Color( red, green, blue, alpha );
jQuery.Color([ red, green, blue, alpha ]);
jQuery.Color({ red: red, green: green, blue: blue, alpha: alpha });
jQuery.Color({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha });
// Helper to get value from CSS
jQuery.Color( element, cssProperty );
element : The DOM element to query for the color.
cssProperty : A css color property of the element to query for the color.
//getters
color.red() // returns the "red" component of the color ( Integer from 0 - 255 )
color.green() // returns the "green" component of the color from ( Integer from 0 - 255 )
color.blue() // returns the "blue" component of the color from ( Integer from 0 - 255 )
color.alpha() // returns the "alpha" component of the color from ( Float from 0.0 - 1.0 )
color.hue() // returns the "hue" component of the color ( Integer from 0 - 359 )
color.saturation() // returns the "saturation" component of the color ( Float from 0.0 - 1.0 )
color.lightness() // returns the "lightness" component of the color ( Float from 0.0 - 1.0 )
color.rgba() // returns a rgba "tuple" [ red, green, blue, alpha ]
color.hsla() // returns a HSL tuple [ hue, saturation, lightness, alpha ]
//setters
color.red( val ) // returns a copy of the color object with the red set to val
color.green( val ) // returns a copy of the color object with the green set to val
color.blue( val ) // returns a copy of the color object with the blue set to val
color.alpha( val ) // returns a copy of the color object with the alpha set to val
color.hue( val ) // returns a copy of the color object with the hue set to val
color.saturation( val ) // returns a copy of the color object with the saturation set to val
color.lightness( val ) // returns a copy of the color object with the lightness set to val
// all of the above values can also take strings in the format of "+=100" or "-=100"
// rgba() setters: returns a copy of the color with any defined values set to the new value
rgba( red, green, blue, alpha )
rgba({ red: red, green: green, blue: blue, alpha: alpha })
rgba([ red, green, blue, alpha ])
// much like the rgb setter - returns a copy with any defined values set
color.hsla( hue, saturation, lightness, alpha )
color.hsla({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha )
color.hsla([ hue, saturation, lightness, alpha ])
//String methods
color.toRgbaString() // returns a css string "rgba(255, 255, 255, 0.4)"
color.toHslaString() // returns a css string "hsla(330, 75%, 25%, 0.4)"
color.toHexString( includeAlpha ) // returns a css string "#abcdef", with "includeAlpha" uses "#rrggbbaa" (alpha *= 255)
//Using with other color objects
color.transition( othercolor, distance ) // the color distance ( 0.0 - 1.0 ) of the way between this color and othercolor
color.blend( othercolor ) // Will apply this color on top of the other color using alpha blending
color.is( othercolor ) // Will determine if this color is equal to all defined properties of othercolor object
//jQuery.color properties
jQuery.color.names
eg-
jQuery.Color( jQuery.Color.names["red"] );
the color name passed should be parsable by jQuery.color().
There is also a named color "_default" which by default is white, this is used for situations where a color is unparseable.
There are two more methods :
color.valid()- its return type is boolean
jQuery.Color("#abcdef").transition("transparent", 0.5)
Example of using the JQuery color
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#eeeeee;
width:200px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="jquery.color.min.js"></script>
</head>
<body>
<button id="save">Save</button>
<button id="cancel">Cancel</button>
<div id="block">Hello!</div>
<script>
jQuery("#save").click(function(){
jQuery("#block").animate({
backgroundColor: "#abcdef"
}, 1500 );
});
jQuery("#cancel").click(function(){
jQuery("#block").animate({
backgroundColor: jQuery.Color({ saturation: 0 })
}, 1500 );
});
</script>
</body>
</html>
jQuery.Color( "#abcdef" );
jQuery.Color( "rgb(100,200,255)" );
jQuery.Color( "rgba(100,200,255,0.5)" );
jQuery.Color( "aqua" );
// Creating Color Objects in Code:
// use null or undefined for values you wish to leave out
jQuery.Color( red, green, blue, alpha );
jQuery.Color([ red, green, blue, alpha ]);
jQuery.Color({ red: red, green: green, blue: blue, alpha: alpha });
jQuery.Color({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha });
// Helper to get value from CSS
jQuery.Color( element, cssProperty );
element : The DOM element to query for the color.
cssProperty : A css color property of the element to query for the color.
//getters
color.red() // returns the "red" component of the color ( Integer from 0 - 255 )
color.green() // returns the "green" component of the color from ( Integer from 0 - 255 )
color.blue() // returns the "blue" component of the color from ( Integer from 0 - 255 )
color.alpha() // returns the "alpha" component of the color from ( Float from 0.0 - 1.0 )
color.hue() // returns the "hue" component of the color ( Integer from 0 - 359 )
color.saturation() // returns the "saturation" component of the color ( Float from 0.0 - 1.0 )
color.lightness() // returns the "lightness" component of the color ( Float from 0.0 - 1.0 )
color.rgba() // returns a rgba "tuple" [ red, green, blue, alpha ]
color.hsla() // returns a HSL tuple [ hue, saturation, lightness, alpha ]
//setters
color.red( val ) // returns a copy of the color object with the red set to val
color.green( val ) // returns a copy of the color object with the green set to val
color.blue( val ) // returns a copy of the color object with the blue set to val
color.alpha( val ) // returns a copy of the color object with the alpha set to val
color.hue( val ) // returns a copy of the color object with the hue set to val
color.saturation( val ) // returns a copy of the color object with the saturation set to val
color.lightness( val ) // returns a copy of the color object with the lightness set to val
// all of the above values can also take strings in the format of "+=100" or "-=100"
// rgba() setters: returns a copy of the color with any defined values set to the new value
rgba( red, green, blue, alpha )
rgba({ red: red, green: green, blue: blue, alpha: alpha })
rgba([ red, green, blue, alpha ])
// much like the rgb setter - returns a copy with any defined values set
color.hsla( hue, saturation, lightness, alpha )
color.hsla({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha )
color.hsla([ hue, saturation, lightness, alpha ])
//String methods
color.toRgbaString() // returns a css string "rgba(255, 255, 255, 0.4)"
color.toHslaString() // returns a css string "hsla(330, 75%, 25%, 0.4)"
color.toHexString( includeAlpha ) // returns a css string "#abcdef", with "includeAlpha" uses "#rrggbbaa" (alpha *= 255)
//Using with other color objects
color.transition( othercolor, distance ) // the color distance ( 0.0 - 1.0 ) of the way between this color and othercolor
color.blend( othercolor ) // Will apply this color on top of the other color using alpha blending
color.is( othercolor ) // Will determine if this color is equal to all defined properties of othercolor object
//jQuery.color properties
jQuery.color.names
eg-
jQuery.Color( jQuery.Color.names["red"] );
the color name passed should be parsable by jQuery.color().
There is also a named color "_default" which by default is white, this is used for situations where a color is unparseable.
There are two more methods :
color.valid()- its return type is boolean
jQuery.Color("#abcdef").transition("transparent", 0.5)
Example of using the JQuery color
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#eeeeee;
width:200px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="jquery.color.min.js"></script>
</head>
<body>
<button id="save">Save</button>
<button id="cancel">Cancel</button>
<div id="block">Hello!</div>
<script>
jQuery("#save").click(function(){
jQuery("#block").animate({
backgroundColor: "#abcdef"
}, 1500 );
});
jQuery("#cancel").click(function(){
jQuery("#block").animate({
backgroundColor: jQuery.Color({ saturation: 0 })
}, 1500 );
});
</script>
</body>
</html>