{"id":14975448,"url":"https://github.com/jquery/jquery-color","last_synced_at":"2025-04-23T20:59:04.950Z","repository":{"id":620964,"uuid":"260394","full_name":"jquery/jquery-color","owner":"jquery","description":"jQuery plugin for color manipulation and animation support.","archived":false,"fork":false,"pushed_at":"2025-04-01T20:56:38.000Z","size":1970,"stargazers_count":1643,"open_issues_count":5,"forks_count":412,"subscribers_count":104,"default_branch":"main","last_synced_at":"2025-04-23T20:58:59.347Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jquery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.txt","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2009-07-25T16:10:40.000Z","updated_at":"2025-04-23T12:08:23.000Z","dependencies_parsed_at":"2024-04-15T22:50:27.782Z","dependency_job_id":"aa52ce6b-17bc-4b7b-9329-c62560c94da1","html_url":"https://github.com/jquery/jquery-color","commit_stats":{"total_commits":275,"total_committers":20,"mean_commits":13.75,"dds":0.5490909090909091,"last_synced_commit":"40db125d81ea38833c3a254f9bd9de43cba320ac"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Fjquery-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Fjquery-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Fjquery-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jquery%2Fjquery-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jquery","download_url":"https://codeload.github.com/jquery/jquery-color/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250514767,"owners_count":21443208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:52:02.972Z","updated_at":"2025-04-23T20:59:04.930Z","avatar_url":"https://github.com/jquery.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Color\n\nSupported jQuery versions: 1.12+ / 2.2+\n\n## Browser Support\n\njQuery Color 3.x supports the following browsers:\n* Chrome: Current\n* Edge: Current\n* Firefox: Current\n* Safari: Current\n\nOther browsers may also work correctly with this plugin but support is not guaranteed.\n\nInformation on browser support of jQuery Color 2.x can be found in the [Browser Support section](https://github.com/jquery/jquery-color/blob/2.x-stable/README.md#browser-support) in its README.\n\n## Using jQuery Color in Production\n\nWe 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 \u0026 build from the list at https://releases.jquery.com/color/.\n\n## How to build and test jQuery Color\n\nFirst, [clone the jQuery Color git repo](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository).\n\nEnter the directory and install the node dependencies:\n\n```shell\ncd jquery-color \u0026\u0026 npm install\n```\n\nTo build and test jQuery Color, run:\n```\nnpm test\n```\n\n## Animated colors\n\nThis plugin installs a [`cssHook`](https://api.jquery.com/jQuery.cssHooks/) which allows jQuery's [`.animate()`](https://api.jquery.com/animate) to animate between two colors.\n\n## Supported properties\n`backgroundColor`, `borderBottomColor`, `borderLeftColor`, `borderRightColor`, `borderTopColor`, `color`, `columnRuleColor`, `outlineColor`, `textDecorationColor`, `textEmphasisColor`\n\n## Example use\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003ctitle\u003ejQuery Color demo\u003c/title\u003e\n\u003cstyle\u003e\ndiv {\n\tbackground-color: #bada55;\n\twidth: 100px;\n\tborder: 1px solid green;\n}\n\u003c/style\u003e\n\u003cscript src=\"https://code.jquery.com/jquery-3.7.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.color.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cbutton id=\"go\"\u003eSimple\u003c/button\u003e\n\u003cbutton id=\"sat\"\u003eDesaturate\u003c/button\u003e\n\u003cdiv id=\"block\"\u003eHello!\u003c/div\u003e\n\u003cscript\u003e\n$( \"#go\" ).on( \"click\", function() {\n\t$( \"#block\" ).animate( {\n\t\tbackgroundColor: \"#abcdef\"\n\t}, 1500 );\n});\n$( \"#sat\" ).on( \"click\", function() {\n\t$( \"#block\" ).animate( {\n\t\tbackgroundColor: jQuery.Color({ saturation: 0 })\n\t}, 1500 );\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Supporting other properties\nThe `jQuery.Color.hook()` function can be called to support additional css properties as colors, and allow them to be animated.\n\n## Example use\n```javascript\n// we want to animate SVG fill and stroke properties\njQuery.Color.hook( \"fill stroke\" );\n```\n\n## The jQuery.Color Factory\n\nThe `jQuery.Color()` function allows you to create and manipulate color objects that are accepted by jQuery's `.animate()` and `.css()` functions.\n\n* Returns a new Color object, similar to `jQuery()` or `jQuery.Event`\n* Accepts many formats to create a new Color object with a `jQuery.Color.fn` prototype\n\n### Example uses:\n\n```javascript\n// Parsing String Colors:\njQuery.Color( \"#abcdef\" );\njQuery.Color( \"rgb(100, 200, 255)\" );\njQuery.Color( \"rgba(100, 200, 255, 0.5)\" );\njQuery.Color( \"aqua\" );\n\n// Creating Color Objects in Code:\n// use null or undefined for values you wish to leave out\njQuery.Color( red, green, blue, alpha );\njQuery.Color([ red, green, blue, alpha ]);\njQuery.Color({ red: red, green: green, blue: blue, alpha: alpha });\njQuery.Color({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha });\n\n// Helper to get value from CSS\njQuery.Color( element, cssProperty );\n```\n## jQuery.Color.fn / prototype / the Color Object methods\n\n### Getters / Setters:\n\n```javascript\nred()             // returns the \"red\" component of the color ( Integer from 0 - 255 )\nred( val )        // returns a copy of the color object with the red set to val\ngreen()           // returns the \"green\" component of the color from ( Integer from 0 - 255 )\ngreen( val )      // returns a copy of the color object with the green set to val\nblue()            // returns the \"blue\" component of the color from ( Integer from 0 - 255 )\nblue( val )       // returns a copy of the color object with the blue set to val\nalpha()           // returns the \"alpha\" component of the color from ( Float from 0.0 - 1.0 )\nalpha( val )      // returns a copy of the color object with the alpha set to val\nhue()             // returns the \"hue\" component of the color ( Integer from 0 - 359 )\nhue( val )        // returns a copy of the color object with the hue set to val\nsaturation()      // returns the \"saturation\" component of the color ( Float from 0.0 - 1.0 )\nsaturation( val ) // returns a copy of the color object with the saturation set to val\nlightness()       // returns the \"lightness\" component of the color ( Float from 0.0 - 1.0 )\nlightness( val )  // returns a copy of the color object with the lightness set to val\n// all of the above values can also take strings in the format of \"+=100\" or \"-=100\"\n\nrgba() // returns a rgba \"tuple\" [ red, green, blue, alpha ]\n// rgba() setters: returns a copy of the color with any defined values set to the new value\nrgba( red, green, blue, alpha )\nrgba( { red: red, green: green, blue: blue, alpha: alpha } )\nrgba( [ red, green, blue, alpha ] )\n\nhsla() // returns a HSL tuple [ hue, saturation, lightness, alpha ]\n// much like the rgb setter - returns a copy with any defined values set\nhsla( hue, saturation, lightness, alpha )\nhsla( { hue: hue, saturation: saturation, lightness: lightness, alpha: alpha } )\nhsla( [ hue, saturation, lightness, alpha ] )\n```\n\n### String methods\n\n```javascript\ntoRgbaString() // returns a css string \"rgba(255, 255, 255, 0.4)\"\ntoHslaString() // returns a css string \"hsla(330, 75%, 25%, 0.4)\"\ntoHexString( includeAlpha ) // returns a css string \"#abcdef\", with \"includeAlpha\" uses \"#rrggbbaa\" (alpha *= 255)\n```\n\nThe `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`.\n### Working with other colors:\n\n```javascript\ntransition( othercolor, distance ) // the color distance ( 0.0 - 1.0 ) of the way between this color and othercolor\nblend( othercolor ) // Will apply this color on top of the other color using alpha blending\nis( othercolor ) // Will determine if this color is equal to all defined properties of othercolor\n```\n\n## jQuery.Color properties\n\n\n## Internals on The Color Object\n* 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.\n* `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.\n\n### `jQuery.Color.names`\n\nA 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\"] );`\n\nThere is also a named color `\"_default\"` which by default is white, this is used for situations where a color is unparseable.\n\n### `\"transparent\"`\n\nA special note about the color `\"transparent\"` - It returns `null` for red green and blue unless you specify colors for these values.\n\n```javascript\njQuery.Color( \"#abcdef\" ).transition( \"transparent\", 0.5 )\n```\n\nAnimating to or from the value `\"transparent\"` will still use \"#abcdef\" for red green and blue.\n\n## HSLA Support\n\nIf 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.\n\n**Colors with 0 saturation, or 100%/0% lightness will be stored with a hue of 0**\n\n## Extensibility\n\nIt 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.\n\n\n```javascript\n// method taken from https://gist.github.com/960189\njQuery.Color.fn.contrastColor = function() {\n\tvar r = this._rgba[ 0 ], g = this._rgba[ 1 ], b = this._rgba[ 2 ];\n\treturn ( ( ( r * 299 ) + ( g * 587 ) + ( b * 144 ) ) / 1000 ) \u003e= 131.5 ? \"black\" : \"white\";\n};\n\n// usage examples:\njQuery.Color( \"#bada55\" ).contrastColor(); // \"black\"\nelement.css( \"color\", jQuery.Color( element, \"backgroundColor\" ).contrastColor() );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjquery%2Fjquery-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjquery%2Fjquery-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjquery%2Fjquery-color/lists"}