{"id":15028467,"url":"https://github.com/bgrins/tinycolor","last_synced_at":"2025-05-14T21:02:22.397Z","repository":{"id":39483259,"uuid":"1973790","full_name":"bgrins/TinyColor","owner":"bgrins","description":"Fast, small color manipulation and conversion for JavaScript","archived":false,"fork":false,"pushed_at":"2024-06-26T15:48:44.000Z","size":4971,"stargazers_count":5158,"open_issues_count":103,"forks_count":443,"subscribers_count":67,"default_branch":"master","last_synced_at":"2025-04-30T21:41:34.316Z","etag":null,"topics":["color","javascript"],"latest_commit_sha":null,"homepage":"https://bgrins.github.io/TinyColor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bgrins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2011-06-29T18:03:00.000Z","updated_at":"2025-04-29T16:49:44.000Z","dependencies_parsed_at":"2024-02-01T07:44:14.884Z","dependency_job_id":"09a0d89d-db52-43f5-ab2f-877874c30e5d","html_url":"https://github.com/bgrins/TinyColor","commit_stats":{"total_commits":366,"total_committers":39,"mean_commits":9.384615384615385,"dds":0.1885245901639344,"last_synced_commit":"b49018c9f2dbca313d80d7a4dad25e26143cfe01"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrins%2FTinyColor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrins%2FTinyColor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrins%2FTinyColor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrins%2FTinyColor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bgrins","download_url":"https://codeload.github.com/bgrins/TinyColor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252835031,"owners_count":21811469,"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":["color","javascript"],"created_at":"2024-09-24T20:08:23.763Z","updated_at":"2025-05-07T07:39:15.448Z","avatar_url":"https://github.com/bgrins.png","language":"JavaScript","readme":"# TinyColor\n\n## JavaScript color tooling\n\nTinyColor is a small, fast library for color manipulation and conversion in JavaScript.  It allows many forms of input, while providing color conversions and other color utility functions.  It has no dependencies.\n\n## Including in node\n\n`tinycolor` can be installed from npm:\n\n    npm install tinycolor2\n\nThen it can be used in your script like so:\n\n```js\nvar tinycolor = require(\"tinycolor2\");\nvar color = tinycolor(\"red\");\n```\n\nOr in a module like so:\n\n```js\nimport tinycolor from \"tinycolor2\";\nvar color = tinycolor(\"red\");\n```\n\n## Including in a browser\n\nThe package can be bundled from npm, but if you prefer to download it locally you have two choices:\n\n### ESM\n\nIt can be used as a module by downloading [npm/esm/tinycolor.js](https://github.com/bgrins/TinyColor/blob/master/npm/esm/tinycolor.js) or using https://esm.sh/tinycolor2.\n\n```html\n\u003cscript type='module'\u003e\nimport tinycolor from \"https://esm.sh/tinycolor2\";\nvar color = tinycolor(\"red\");\n\u003c/script\u003e\n```\n\n### UMD\n\nYou can use it directly in a script tag by downloading the UMD file from [npm/cjs/tinycolor.js](https://github.com/bgrins/TinyColor/blob/master/npm/cjs/tinycolor.js):\n\n```html\n\u003cscript type='text/javascript' src='tinycolor.js'\u003e\u003c/script\u003e\n\u003cscript type='text/javascript'\u003e\nvar color = tinycolor(\"red\");\n\u003c/script\u003e\n```\n\n## Usage\n\nCall `tinycolor(input)` or `new tinycolor(input)`, and you will have an object with the following properties.  See Accepted String Input and Accepted Object Input below for more information about what is accepted.\n\n## Accepted String Input\n\nThe string parsing is very permissive.  It is meant to make typing a color as input as easy as possible.  All commas, percentages, parenthesis are optional, and most input allow either 0-1, 0%-100%, or 0-n (where n is either 100, 255, or 360 depending on the value).\n\nHSL and HSV both require either 0%-100% or 0-1 for the `S`/`L`/`V` properties.  The `H` (hue) can have values between 0%-100% or 0-360.\n\nRGB input requires either 0-255 or 0%-100%.\n\nIf you call `tinycolor.fromRatio`, RGB and Hue input can also accept 0-1.\n\nHere are some examples of string input:\n\n### Hex, 8-digit (RGBA) Hex\n```js\ntinycolor(\"#000\");\ntinycolor(\"000\");\ntinycolor(\"#369C\");\ntinycolor(\"369C\");\ntinycolor(\"#f0f0f6\");\ntinycolor(\"f0f0f6\");\ntinycolor(\"#f0f0f688\");\ntinycolor(\"f0f0f688\");\n```\n### RGB, RGBA\n```js\ntinycolor(\"rgb (255, 0, 0)\");\ntinycolor(\"rgb 255 0 0\");\ntinycolor(\"rgba (255, 0, 0, .5)\");\ntinycolor({ r: 255, g: 0, b: 0 });\ntinycolor.fromRatio({ r: 1, g: 0, b: 0 });\ntinycolor.fromRatio({ r: .5, g: .5, b: .5 });\n```\n### HSL, HSLA\n```js\ntinycolor(\"hsl(0, 100%, 50%)\");\ntinycolor(\"hsla(0, 100%, 50%, .5)\");\ntinycolor(\"hsl(0, 100%, 50%)\");\ntinycolor(\"hsl 0 1.0 0.5\");\ntinycolor({ h: 0, s: 1, l: .5 });\ntinycolor.fromRatio({ h: 1, s: 0, l: 0 });\ntinycolor.fromRatio({ h: .5, s: .5, l: .5 });\n```\n### HSV, HSVA\n```js\ntinycolor(\"hsv(0, 100%, 100%)\");\ntinycolor(\"hsva(0, 100%, 100%, .5)\");\ntinycolor(\"hsv (0 100% 100%)\");\ntinycolor(\"hsv 0 1 1\");\ntinycolor({ h: 0, s: 100, v: 100 });\ntinycolor.fromRatio({ h: 1, s: 0, v: 0 });\ntinycolor.fromRatio({ h: .5, s: .5, v: .5 });\n```\n### Named\n\nCase insenstive names are accepted, using the [list of colors in the CSS spec](https://www.w3.org/TR/css-color-4/#named-colors).\n\n```js\ntinycolor(\"RED\");\ntinycolor(\"blanchedalmond\");\ntinycolor(\"darkblue\");\n```\n### Accepted Object Input\n\nIf you are calling this from code, you may want to use object input.  Here are some examples of the different types of accepted object inputs:\n\n    { r: 255, g: 0, b: 0 }\n    { r: 255, g: 0, b: 0, a: .5 }\n    { h: 0, s: 100, l: 50 }\n    { h: 0, s: 100, v: 100 }\n\n## Methods\n\n### getFormat\n\nReturns the format used to create the tinycolor instance\n```js\nvar color = tinycolor(\"red\");\ncolor.getFormat(); // \"name\"\ncolor = tinycolor({r:255, g:255, b:255});\ncolor.getFormat(); // \"rgb\"\n```\n\n### getOriginalInput\n\nReturns the input passed into the constructor used to create the tinycolor instance\n```js\nvar color = tinycolor(\"red\");\ncolor.getOriginalInput(); // \"red\"\ncolor = tinycolor({r:255, g:255, b:255});\ncolor.getOriginalInput(); // \"{r: 255, g: 255, b: 255}\"\n```\n\n### isValid\n\nReturn a boolean indicating whether the color was successfully parsed.  Note: if the color is not valid then it will act like `black` when being used with other methods.\n```js\nvar color1 = tinycolor(\"red\");\ncolor1.isValid(); // true\ncolor1.toHexString(); // \"#ff0000\"\n\nvar color2 = tinycolor(\"not a color\");\ncolor2.isValid(); // false\ncolor2.toString(); // \"#000000\"\n```\n### getBrightness\n\nReturns the perceived brightness of a color, from `0-255`, as defined by [Web Content Accessibility Guidelines (Version 1.0)](http://www.w3.org/TR/AERT#color-contrast).\n```js\nvar color1 = tinycolor(\"#fff\");\ncolor1.getBrightness(); // 255\n\nvar color2 = tinycolor(\"#000\");\ncolor2.getBrightness(); // 0\n```\n### isLight\n\nReturn a boolean indicating whether the color's perceived brightness is light.\n```js\nvar color1 = tinycolor(\"#fff\");\ncolor1.isLight(); // true\n\nvar color2 = tinycolor(\"#000\");\ncolor2.isLight(); // false\n```\n### isDark\n\nReturn a boolean indicating whether the color's perceived brightness is dark.\n```js\nvar color1 = tinycolor(\"#fff\");\ncolor1.isDark(); // false\n\nvar color2 = tinycolor(\"#000\");\ncolor2.isDark(); // true\n```\n### getLuminance\n\nReturns the perceived luminance of a color, from `0-1` as defined by [Web Content Accessibility Guidelines (Version 2.0).](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)\n```js\nvar color1 = tinycolor(\"#fff\");\ncolor1.getLuminance(); // 1\n\nvar color2 = tinycolor(\"#000\");\ncolor2.getLuminance(); // 0\n```\n### getAlpha\n\nReturns the alpha value of a color, from `0-1`.\n```js\nvar color1 = tinycolor(\"rgba(255, 0, 0, .5)\");\ncolor1.getAlpha(); // 0.5\n\nvar color2 = tinycolor(\"rgb(255, 0, 0)\");\ncolor2.getAlpha(); // 1\n\nvar color3 = tinycolor(\"transparent\");\ncolor3.getAlpha(); // 0\n```\n### setAlpha\n\nSets the alpha value on a current color.  Accepted range is in between `0-1`.\n```js\nvar color = tinycolor(\"red\");\ncolor.getAlpha(); // 1\ncolor.setAlpha(.5);\ncolor.getAlpha(); // .5\ncolor.toRgbString(); // \"rgba(255, 0, 0, .5)\"\n```\n### String Representations\n\nThe following methods will return a property for the `alpha` value, which can be ignored: `toHsv`, `toHsl`, `toRgb`\n\n### toHsv\n```js\nvar color = tinycolor(\"red\");\ncolor.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }\n```\n### toHsvString\n```js\nvar color = tinycolor(\"red\");\ncolor.toHsvString(); // \"hsv(0, 100%, 100%)\"\ncolor.setAlpha(0.5);\ncolor.toHsvString(); // \"hsva(0, 100%, 100%, 0.5)\"\n```\n### toHsl\n```js\nvar color = tinycolor(\"red\");\ncolor.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }\n```\n### toHslString\n```js\nvar color = tinycolor(\"red\");\ncolor.toHslString(); // \"hsl(0, 100%, 50%)\"\ncolor.setAlpha(0.5);\ncolor.toHslString(); // \"hsla(0, 100%, 50%, 0.5)\"\n```\n### toHex\n```js\nvar color = tinycolor(\"red\");\ncolor.toHex(); // \"ff0000\"\n```\n### toHexString\n```js\nvar color = tinycolor(\"red\");\ncolor.toHexString(); // \"#ff0000\"\n```\n### toHex8\n```js\nvar color = tinycolor(\"red\");\ncolor.toHex8(); // \"ff0000ff\"\n```\n### toHex8String\n```js\nvar color = tinycolor(\"red\");\ncolor.toHex8String(); // \"#ff0000ff\"\n```\n### toRgb\n```js\nvar color = tinycolor(\"red\");\ncolor.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }\n```\n### toRgbString\n```js\nvar color = tinycolor(\"red\");\ncolor.toRgbString(); // \"rgb(255, 0, 0)\"\ncolor.setAlpha(0.5);\ncolor.toRgbString(); // \"rgba(255, 0, 0, 0.5)\"\n```\n### toPercentageRgb\n```js\nvar color = tinycolor(\"red\");\ncolor.toPercentageRgb() // { r: \"100%\", g: \"0%\", b: \"0%\", a: 1 }\n```\n### toPercentageRgbString\n```js\nvar color = tinycolor(\"red\");\ncolor.toPercentageRgbString(); // \"rgb(100%, 0%, 0%)\"\ncolor.setAlpha(0.5);\ncolor.toPercentageRgbString(); // \"rgba(100%, 0%, 0%, 0.5)\"\n```\n### toName\n```js\nvar color = tinycolor(\"red\");\ncolor.toName(); // \"red\"\n```\n### toFilter\n```\nvar color = tinycolor(\"red\");\ncolor.toFilter(); // \"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)\"\n```\n### toString\n\nPrint to a string, depending on the input format.  You can also override this by passing one of `\"rgb\", \"prgb\", \"hex6\", \"hex3\", \"hex8\", \"name\", \"hsl\", \"hsv\"` into the function.\n```js\nvar color1 = tinycolor(\"red\");\ncolor1.toString(); // \"red\"\ncolor1.toString(\"hsv\"); // \"hsv(0, 100%, 100%)\"\n\nvar color2 = tinycolor(\"rgb(255, 0, 0)\");\ncolor2.toString(); // \"rgb(255, 0, 0)\"\ncolor2.setAlpha(.5);\ncolor2.toString(); // \"rgba(255, 0, 0, 0.5)\"\n```\n### Color Modification\n\nThese methods manipulate the current color, and return it for chaining.  For instance:\n```js\ntinycolor(\"red\").lighten().desaturate().toHexString() // \"#f53d3d\"\n```\n### lighten\n\n`lighten: function(amount = 10) -\u003e TinyColor`.  Lighten the color a given amount, from 0 to 100.  Providing 100 will always return white.\n```js\ntinycolor(\"#f00\").lighten().toString(); // \"#ff3333\"\ntinycolor(\"#f00\").lighten(100).toString(); // \"#ffffff\"\n```\n### brighten\n\n`brighten: function(amount = 10) -\u003e TinyColor`.  Brighten the color a given amount, from 0 to 100.\n```js\ntinycolor(\"#f00\").brighten().toString(); // \"#ff1919\"\n```\n### darken\n\n`darken: function(amount = 10) -\u003e TinyColor`.  Darken the color a given amount, from 0 to 100.  Providing 100 will always return black.\n```js\ntinycolor(\"#f00\").darken().toString(); // \"#cc0000\"\ntinycolor(\"#f00\").darken(100).toString(); // \"#000000\"\n```\n### desaturate\n\n`desaturate: function(amount = 10) -\u003e TinyColor`.  Desaturate the color a given amount, from 0 to 100.  Providing 100 will is the same as calling `greyscale`.\n```js\ntinycolor(\"#f00\").desaturate().toString(); // \"#f20d0d\"\ntinycolor(\"#f00\").desaturate(100).toString(); // \"#808080\"\n```\n### saturate\n\n`saturate: function(amount = 10) -\u003e TinyColor`.  Saturate the color a given amount, from 0 to 100.\n```js\ntinycolor(\"hsl(0, 10%, 50%)\").saturate().toString(); // \"hsl(0, 20%, 50%)\"\n```\n### greyscale\n\n`greyscale: function() -\u003e TinyColor`.  Completely desaturates a color into greyscale.  Same as calling `desaturate(100)`.\n```js\ntinycolor(\"#f00\").greyscale().toString(); // \"#808080\"\n```\n### spin\n\n`spin: function(amount = 0) -\u003e TinyColor`.  Spin the hue a given amount, from -360 to 360.  Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).\n```js\ntinycolor(\"#f00\").spin(180).toString(); // \"#00ffff\"\ntinycolor(\"#f00\").spin(-90).toString(); // \"#7f00ff\"\ntinycolor(\"#f00\").spin(90).toString(); // \"#80ff00\"\n\n// spin(0) and spin(360) do nothing\ntinycolor(\"#f00\").spin(0).toString(); // \"#ff0000\"\ntinycolor(\"#f00\").spin(360).toString(); // \"#ff0000\"\n```\n### Color Combinations\n\nCombination functions return an array of TinyColor objects unless otherwise noted.\n\n### analogous\n\n`analogous: function(, results = 6, slices = 30) -\u003e array\u003cTinyColor\u003e`.\n```js\nvar colors = tinycolor(\"#f00\").analogous();\n\ncolors.map(function(t) { return t.toHexString(); }); // [ \"#ff0000\", \"#ff0066\", \"#ff0033\", \"#ff0000\", \"#ff3300\", \"#ff6600\" ]\n```\n### monochromatic\n\n`monochromatic: function(, results = 6) -\u003e array\u003cTinyColor\u003e`.\n```js\nvar colors = tinycolor(\"#f00\").monochromatic();\n\ncolors.map(function(t) { return t.toHexString(); }); // [ \"#ff0000\", \"#2a0000\", \"#550000\", \"#800000\", \"#aa0000\", \"#d40000\" ]\n```\n### splitcomplement\n\n`splitcomplement: function() -\u003e array\u003cTinyColor\u003e`.\n```js\nvar colors = tinycolor(\"#f00\").splitcomplement();\n\ncolors.map(function(t) { return t.toHexString(); }); // [ \"#ff0000\", \"#ccff00\", \"#0066ff\" ]\n```\n### triad\n\n`triad: function() -\u003e array\u003cTinyColor\u003e`.\n```js\nvar colors = tinycolor(\"#f00\").triad();\n\ncolors.map(function(t) { return t.toHexString(); }); // [ \"#ff0000\", \"#00ff00\", \"#0000ff\" ]\n```\n### tetrad\n\n`tetrad: function() -\u003e array\u003cTinyColor\u003e`.\n```js\nvar colors = tinycolor(\"#f00\").tetrad();\n\ncolors.map(function(t) { return t.toHexString(); }); // [ \"#ff0000\", \"#80ff00\", \"#00ffff\", \"#7f00ff\" ]\n\n```\n### complement\n\n`complement: function() -\u003e TinyColor`.\n```js\ntinycolor(\"#f00\").complement().toHexString(); // \"#00ffff\"\n```\n## Color Utilities\n```js\ntinycolor.equals(color1, color2)\ntinycolor.mix(color1, color2, amount = 50)\n```\n### random\n\nReturns a random color.\n```js\nvar color = tinycolor.random();\ncolor.toRgb(); // \"{r: 145, g: 40, b: 198, a: 1}\"\n```\n\n### Readability\n\nTinyColor assesses readability based on the [Web Content Accessibility Guidelines (Version 2.0)](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef).\n\n#### readability\n\n`readability: function(TinyColor, TinyColor) -\u003e Object`.\nReturns the contrast ratio between two colors.\n```js\ntinycolor.readability(\"#000\", \"#000\"); // 1\ntinycolor.readability(\"#000\", \"#111\"); // 1.1121078324840545\ntinycolor.readability(\"#000\", \"#fff\"); // 21\n```\nUse the values in your own calculations, or use one of the convenience functions below.\n\n#### isReadable\n\n`isReadable: function(TinyColor, TinyColor, Object) -\u003e Boolean`.  Ensure that foreground and background color combinations meet WCAG guidelines. `Object` is optional, defaulting to `{level: \"AA\",size: \"small\"}`.  `level` can be `\"AA\"` or \"AAA\" and `size` can be `\"small\"` or `\"large\"`.\n\nHere are links to read more about the [AA](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) and [AAA](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html) requirements.\n```js\ntinycolor.isReadable(\"#000\", \"#111\", {}); // false\ntinycolor.isReadable(\"#ff0088\", \"#5c1a72\",{level:\"AA\",size:\"small\"}); //false\ntinycolor.isReadable(\"#ff0088\", \"#5c1a72\",{level:\"AA\",size:\"large\"}), //true\n```\n#### mostReadable\n\n`mostReadable: function(TinyColor, [TinyColor, Tinycolor ...], Object) -\u003e Boolean`.\nGiven a base color and a list of possible foreground or background colors for that base, returns the most readable color.\nIf none of the colors in the list is readable, `mostReadable` will return the better of black or white if `includeFallbackColors:true`.\n```js\ntinycolor.mostReadable(\"#000\", [\"#f00\", \"#0f0\", \"#00f\"]).toHexString(); // \"#00ff00\"\ntinycolor.mostReadable(\"#123\", [\"#124\", \"#125\"],{includeFallbackColors:false}).toHexString(); // \"#112255\"\ntinycolor.mostReadable(\"#123\", [\"#124\", \"#125\"],{includeFallbackColors:true}).toHexString();  // \"#ffffff\"\ntinycolor.mostReadable(\"#ff0088\", [\"#2e0c3a\"],{includeFallbackColors:true,level:\"AAA\",size:\"large\"}).toHexString()   // \"#2e0c3a\",\ntinycolor.mostReadable(\"#ff0088\", [\"#2e0c3a\"],{includeFallbackColors:true,level:\"AAA\",size:\"small\"}).toHexString()   // \"#000000\",\n```\nSee [index.html](https://github.com/bgrins/TinyColor/blob/master/index.html) in the project for a demo.\n\n## Common operations\n\n### clone\n\n`clone: function() -\u003e TinyColor`.\nInstantiate a new TinyColor object with the same color.  Any changes to the new one won't affect the old one.\n```js\nvar color1 = tinycolor(\"#F00\");\nvar color2 = color1.clone();\ncolor2.setAlpha(.5);\n\ncolor1.toString(); // \"#ff0000\"\ncolor2.toString(); // \"rgba(255, 0, 0, 0.5)\"\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbgrins%2Ftinycolor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbgrins%2Ftinycolor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbgrins%2Ftinycolor/lists"}