• Stars
    star
    1,639
  • Rank 28,521 (Top 0.6 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 15 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

jQuery plugin for color manipulation and animation support.

Build Status

jQuery Color

Supported jQuery versions: 1.8+

Browser Support

jQuery Color 3.x supports the following browsers:

Desktop:

  • Chrome: (Current - 1) and Current
  • Edge: (Current - 1) and Current, 18
  • Firefox: (Current - 1) and Current, ESR
  • Internet Explorer: 9+
  • Safari: (Current - 1) and Current
  • Opera: Current

Mobile:

  • Chrome on Android: (Current - 1) and Current
  • Safari on iOS: (Current - 2), (Current - 1) and Current

Information on browser support of jQuery Color 2.x can be found in the Browser Support section in its README.

Using jQuery Color in Production

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 build from the following list:

Current version: 2.1.2

How to build and test jQuery Color

First, get a copy of the git repo by running:

git clone git://github.com/jquery/jquery-color.git

Enter the directory and install the node dependencies:

cd jquery-color && npm install

Make sure you have grunt installed by testing:

grunt -version

If not, run:

npm install -g grunt

To run tests locally, run grunt, and this will run the tests in PhantomJS.

You can also run the tests in a browser by navigating to the test/ directory.

Animated colors

This plugins installs a cssHook which allows jQuery's .animate() to animate between two colors.

Supported properties

backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, columnRuleColor, outlineColor, textDecorationColor, textEmphasisColor

Example use

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-color: #bada55;
	width: 100px;
	border: 1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="jquery.color.min.js"></script>
</head>
<body>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="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>

Supporting other properties

The jQuery.Color.hook() function can be called to support additional css properties as colors, and allow them to be animated.

Example use

// we want to animate SVG fill and stroke properties
jQuery.Color.hook( "fill stroke" );

The jQuery.Color Factory

The jQuery.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() or jQuery.Event
  • Accepts many formats to create a new Color object with a jQuery.Color.fn prototype

Example uses:

// 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 );

jQuery.Color.fn / prototype / the Color Object methods

Getters / Setters:

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 val
green()           // 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 val
blue()            // 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 val
alpha()           // 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 val
hue()             // 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 val
saturation()      // 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 val
lightness()       // 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 value
rgba( 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 set
hsla( hue, saturation, lightness, alpha )
hsla( { hue: hue, saturation: saturation, lightness: lightness, alpha: alpha } )
hsla( [ hue, saturation, lightness, alpha ] )

String methods

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)

The toRgbaString and toHslaString methods will only include the alpha channel if it is not 1. They will return rgb(...) and hsl(...) strings if the alpha is set to 1.

Working with other colors:

transition( othercolor, distance ) // the color distance ( 0.0 - 1.0 ) of the way between this color and othercolor
blend( othercolor ) // Will apply this color on top of the other color using alpha blending
is( othercolor ) // Will determine if this color is equal to all defined properties of othercolor

jQuery.Color properties

Internals on The Color Object

  • 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/null values for colors indicate non-existence. This signals the transition() function to keep whatever value was set in the other end of the transition. For example, animating to jQuery.Color([ 255, null, null, 1 ]) would only animate the red and alpha values of the color.

jQuery.Color.names

A list of named colors is stored on the jQuery.Color.names object. The value they contain should be parseable by jQuery.Color(). All names on this object should be lowercased. I.E. jQuery.Color("Red") is the same as doing jQuery.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.

"transparent"

A special note about the color "transparent" - It returns null 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.

HSLA Support

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

Extensibility

It is possible for you to add your own functions to the color object. For instance, this function will tell you if its better to use black or white on a given background color.

// method taken from https://gist.github.com/960189
jQuery.Color.fn.contrastColor = function() {
	var r = 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() );

More Repositories

1

jquery

jQuery JavaScript Library
JavaScript
59,064
star
2

jquery-ui

The official jQuery user interface library.
JavaScript
11,252
star
3

esprima

ECMAScript parsing infrastructure for multipurpose analysis
TypeScript
7,020
star
4

sizzle

A sizzlin' hot selector engine.
JavaScript
6,278
star
5

jquery-mousewheel

A jQuery plugin that adds cross-browser mouse wheel support.
JavaScript
3,897
star
6

jquery-migrate

A development tool to help migrate away from APIs and features that have been or will be removed from jQuery core
JavaScript
2,006
star
7

testswarm

Distributed continuous integration testing for JavaScript.
PHP
968
star
8

learn.jquery.com

jQuery Learning Center web site content
JavaScript
924
star
9

api.jquery.com

API documentation for jQuery Core
HTML
318
star
10

jquery-wp-content

WordPress themes and plugins for the jQuery sites
PHP
252
star
11

jquery-simulate

jQuery Event Unit Testing Helpers
JavaScript
173
star
12

themeroller.jquerymobile.com

ThemeRoller site for jQuery Mobile
CSS
140
star
13

jqueryui.com

jQuery UI web site content
HTML
133
star
14

jquery-dist

Distribution repo for jQuery Core releases
JavaScript
102
star
15

download.jqueryui.com

Download Builder for jQuery UI
JavaScript
86
star
16

jquery.com

jQuery web site content
HTML
77
star
17

api.jqueryui.com

API documentation for jQuery UI
HTML
70
star
18

codeorigin.jquery.com

jQuery CDN
JavaScript
57
star
19

jquerymobile.com

jQuery Mobile web site content
HTML
54
star
20

api.jquerymobile.com

API documentation for jQuery Mobile
HTML
54
star
21

jquery.org

jQuery Foundation web site content
HTML
51
star
22

gsoc

Home for the jQuery Foundations ideas list for Google Summer of Code 2015
41
star
23

grunt-jquery-content

XSLT
38
star
24

typesense-minibar

Fast 2kB autocomplete search bar. Alternative to Algolia DocSearch, InstantSearch, and autocomplete-js.
JavaScript
36
star
25

eslint-config-jquery

jQuery's eslint config, enforcing the jQuery styleguide
JavaScript
32
star
26

meetings.jquery.org

Calendar and minutes of public jQuery team meetings
JavaScript
27
star
27

testswarm-browserstack

Integration layer between TestSwarm and BrowserStack
JavaScript
26
star
28

contribute.jquery.org

Developer documentation common to jQuery projects
HTML
25
star
29

jquery-release

Release automation script for jQuery projects
JavaScript
24
star
30

demos.jquerymobile.com

jQuery Mobile demo site
HTML
21
star
31

2012-dev-summit

Information regarding the 2012 Developer Summit in DC
15
star
32

jquery-license

jQuery Foundation License Verification
JavaScript
12
star
33

2015-developer-summit

a sandbox site for making mistakes
HTML
10
star
34

globalizejs.com

Globalize web site content
JavaScript
10
star
35

irc.jquery.org

jQuery Foundation IRC channels and logs site content
HTML
9
star
36

brand.jquery.org

Information on jQuery's branding
HTML
8
star
37

events.jquery.org

jQuery Events & Conferences web site content
HTML
8
star
38

node-amd-builder

jQuery Mobile download builder, a Node.js service
JavaScript
7
star
39

jquery.github.io

HTML
7
star
40

infrastructure-puppet

Puppet configuration for jQuery Infrastructure servers.
HTML
6
star
41

ci-management

Shell
5
star
42

jquery-compat-dist

Distribution repo for jQuery Core Compat releases
JavaScript
5
star
43

healthyweb.org

Check any website for the latest version of jQuery
Svelte
4
star
44

content

Content Team
3
star
45

blog.jquery.com-theme

Themes for blogs during transition period to jquery-wp-content.
CSS
2
star
46

node-packager

Build a package for your library or application on the fly on Node.js
JavaScript
2
star
47

podcast.jquery.com

HTML
1
star