- Notifications
You must be signed in to change notification settings - Fork412
jQuery plugin for color manipulation and animation support.
License
jquery/jquery-color
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Supported jQuery versions: 1.12+ / 2.2+
jQuery Color 3.x supports the following browsers:
- Chrome: Current
- Edge: Current
- Firefox: Current
- Safari: Current
Other browsers may also work correctly with this plugin but support is not guaranteed.
Information on browser support of jQuery Color 2.x can be found in theBrowser Support section in its README.
We release jQuery Color by itself, or in a bundle. The extended names can be included as a jQuery Color plugin, or you can download the version of jQuery Color that includes the names. Choose your version & build from the list athttps://releases.jquery.com/color/.
First,clone the jQuery Color git repo.
Enter the directory and install the node dependencies:
cd jquery-color&& npm install
To build and test jQuery Color, run:
npm testThis plugin installs acssHook which allows jQuery's.animate() to animate between two colors.
backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color,columnRuleColor,outlineColor,textDecorationColor,textEmphasisColor
<!DOCTYPE html><html><head><title>jQuery Color demo</title><style>div {background-color:#bada55;width:100px;border:1px solid green;}</style><scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"></script><scriptsrc="jquery.color.min.js"></script></head><body><buttonid="go">Simple</button><buttonid="sat">Desaturate</button><divid="block">Hello!</div><script>$("#go").on("click",function(){$("#block").animate({backgroundColor:"#abcdef"},1500);});$("#sat").on("click",function(){$("#block").animate({backgroundColor:jQuery.Color({saturation:0})},1500);});</script></body></html>
ThejQuery.Color.hook() function can be called to support additional css properties as colors, and allow them to be animated.
// we want to animate SVG fill and stroke propertiesjQuery.Color.hook("fill stroke");
ThejQuery.Color() function allows you to create and manipulate color objects that are accepted by jQuery's.animate() and.css() functions.
- Returns a new Color object, similar to
jQuery()orjQuery.Event - Accepts many formats to create a new Color object with a
jQuery.Color.fnprototype
// 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 outjQuery.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 CSSjQuery.Color(element,cssProperty);
red()// returns the "red" component of the color ( Integer from 0 - 255 )red(val)// returns a copy of the color object with the red set to valgreen()// returns the "green" component of the color from ( Integer from 0 - 255 )green(val)// returns a copy of the color object with the green set to valblue()// returns the "blue" component of the color from ( Integer from 0 - 255 )blue(val)// returns a copy of the color object with the blue set to valalpha()// returns the "alpha" component of the color from ( Float from 0.0 - 1.0 )alpha(val)// returns a copy of the color object with the alpha set to valhue()// returns the "hue" component of the color ( Integer from 0 - 359 )hue(val)// returns a copy of the color object with the hue set to valsaturation()// returns the "saturation" component of the color ( Float from 0.0 - 1.0 )saturation(val)// returns a copy of the color object with the saturation set to vallightness()// returns the "lightness" component of the color ( Float from 0.0 - 1.0 )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()// returns a rgba "tuple" [ red, green, blue, alpha ]// rgba() setters: returns a copy of the color with any defined values set to the new valuergba(red,green,blue,alpha)rgba({red:red,green:green,blue:blue,alpha:alpha})rgba([red,green,blue,alpha])hsla()// returns a HSL tuple [ hue, saturation, lightness, alpha ]// much like the rgb setter - returns a copy with any defined values sethsla(hue,saturation,lightness,alpha)hsla({hue:hue,saturation:saturation,lightness:lightness,alpha:alpha})hsla([hue,saturation,lightness,alpha])
toRgbaString()// returns a css string "rgba(255, 255, 255, 0.4)"toHslaString()// returns a css string "hsla(330, 75%, 25%, 0.4)"toHexString(includeAlpha)// returns a css string "#abcdef", with "includeAlpha" uses "#rrggbbaa" (alpha *= 255)
ThetoRgbaString andtoHslaString methods will only include the alpha channel if it is not1. They will returnrgb(...) andhsl(...) strings if the alpha is set to1.
transition(othercolor,distance)// the color distance ( 0.0 - 1.0 ) of the way between this color and othercolorblend(othercolor)// Will apply this color on top of the other color using alpha blendingis(othercolor)// Will determine if this color is equal to all defined properties of othercolor
- Internally, RGBA values are stored as
color._rgba[0] = red, color._rgba[1] = green, color._rgba[2] = blue, color._rgba[3] = alpha. However, please remember there are nice convenient setters and getters for each of these properties. undefined/nullvalues for colors indicate non-existence. This signals thetransition()function to keep whatever value was set in the other end of the transition. For example, animating tojQuery.Color([ 255, null, null, 1 ])would only animate the red and alpha values of the color.
A list of named colors is stored on thejQuery.Color.names object. The value they contain should be parseable byjQuery.Color(). All names on this object should be lowercased. I.E.jQuery.Color("Red") is the same as doingjQuery.Color( jQuery.Color.names["red"] );
There is also a named color"_default" which by default is white, this is used for situations where a color is unparseable.
A special note about the color"transparent" - It returnsnull for red green and blue unless you specify colors for these values.
jQuery.Color("#abcdef").transition("transparent",0.5)
Animating to or from the value"transparent" will still use "#abcdef" for red green and blue.
If a color is created using any of the HSLA functions or parsers, it will keep the_rgba array up to date as well as having a_hsla array. Once an RGBA operation is performed on HSLA, however, the_hsla cache is removed and all operations will continue based off of rgb (unless you go back into HSLA). The._hsla array follows the same format as._rbga,[hue, saturation, lightness, alpha ]. If you need to build an HSLA color from an HSLA array,jQuery.Color().hsla( array ) works for that purpose.
Colors with 0 saturation, or 100%/0% lightness will be stored with a hue of 0
It is possible for you to add your own functions to the color object. For instance, this function will tell you if it's better to use black or white on a given background color.
// method taken from https://gist.github.com/960189jQuery.Color.fn.contrastColor=function(){varr=this._rgba[0],g=this._rgba[1],b=this._rgba[2];return(((r*299)+(g*587)+(b*144))/1000)>=131.5 ?"black" :"white";};// usage examples:jQuery.Color("#bada55").contrastColor();// "black"element.css("color",jQuery.Color(element,"backgroundColor").contrastColor());
About
jQuery plugin for color manipulation and animation support.
Resources
License
Code of conduct
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.