{"_id":"@advisr/tinycolor2","_rev":"3-dff8bbcbfca82edc513a25ccc38ef9bf","name":"@advisr/tinycolor2","dist-tags":{"latest":"1.4.3"},"versions":{"1.4.3":{"name":"@advisr/tinycolor2","version":"1.4.3","keywords":["color","parser","tinycolor"],"author":{"url":"http://briangrinstead.com","name":"Brian Grinstead","email":"briangrinstead@gmail.com"},"license":"MIT","_id":"@advisr/tinycolor2@1.4.3","maintainers":[{"name":"jrohland","email":"jesse.rohland@gmail.com"}],"homepage":"https://github.com/advisr-io/TinyColor#readme","bugs":{"url":"https://github.com/advisr-io/TinyColor/issues"},"url":"http://bgrins.github.com/TinyColor","dist":{"shasum":"0ef58d74bd8d05a1e4c16976a5e425fb4d008c3b","tarball":"https://registry.npmjs.org/@advisr/tinycolor2/-/tinycolor2-1.4.3.tgz","fileCount":16,"integrity":"sha512-wWyWiU4LoP5FeRAgaTWm/8q9KVYwksg94E26AX71kGkchC1Hdrb8L6L/nWFd4L+eAmKsVUIvC1UKn/1TSxpb0Q==","signatures":[{"sig":"MEYCIQCcgt66Y77nevnvjCCh5tiAxXyzrM3A5mH7Fxi4sw7YegIhALMeMf1wTNTsqtdFjLUryVT/jrCprFxWUlPzz8q4geMT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1Xi4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdjxAAowkXb1ToBwFD3mJfmjkUATowoozOF2sKmzvPKftXOHIT1jfc\r\nnN/hOVbaJhzPzR97zfzmDHqeYA2fFjXB/8rlfBRQXgvl9T5PkM4oP7yPD99t\r\no3ESo42JIemfwr7ZJjCQxQblmbLxcOPMWzJtkiTLtlqf7++SIJejW7tB7Uph\r\nQjBA2vWTg2DnYdoufejE3T3rq1cNZvMPiLLFYHJ/w6JfdidlkrBg/TMMdsOe\r\nRm2qk2QeVTCTDCILaNkx4s2xEtO/C2FL9vfy86LMzo357ZGSJIa62LL/z9a3\r\n3EeiRsIuFzFllG01XjFwRdCAiy8jkECs0iU7iWF0LTlRSOsITy3BHCBftyt2\r\nUPEbv+ntwcDOmZUCSs2fQed+YrHktkGIeuNEcMChdJnyhS6TQ9Gh0nTJd5IA\r\nbkqdzr9kuwzUWdp9Id7Q0qzgxW04ysDbnOWqJhXnZE7bCco+nGoy4RrcSxMZ\r\nez3Ic7eblDCvBbqkuIsmW+E/dc5Mbmd1xJ01b5h1+e9nqP9DK6V7qS2troPm\r\n+lNlpmkVuw3QLVRTcLjaV153YaSQSpNatSJlK5mPaD+D0j6FL3lzxA81Gx2K\r\n4+rm/aLW0B/4tLw94tteUv5Z5X7zu1xBDbihqqttsKc/Itxfp5WLY+04UjdW\r\nmKe79s4g5VQK1+N0Sl78lkSaKCpnBa3zEVk=\r\n=GJhV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./tinycolor.js","engines":{"node":"*"},"gitHead":"8d53b9663823b2c1b6a41bc688f00c041f18babc","_npmUser":{"name":"jrohland","email":"jesse.rohland@gmail.com"},"repository":{"url":"git+https://github.com/advisr-io/TinyColor.git","type":"git"},"_npmVersion":"8.11.0","description":"Fast Color Parsing and Manipulation","directories":{},"_nodeVersion":"16.16.0","_hasShrinkwrap":false,"devDependencies":{"grunt":"^1.0.4","grunt-docco":"^0.5.0","grunt-contrib-qunit":"^3.1.0","grunt-contrib-concat":"^1.0.1","grunt-contrib-jshint":"^2.1.0","grunt-contrib-uglify":"^4.0.1"},"_npmOperationalInternal":{"tmp":"tmp/tinycolor2_1.4.3_1658157239831_0.7861773009031789","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-07-18T15:13:59.758Z","modified":"2025-07-17T12:25:06.082Z","1.4.3":"2022-07-18T15:14:00.026Z"},"bugs":{"url":"https://github.com/advisr-io/TinyColor/issues"},"author":{"url":"http://briangrinstead.com","name":"Brian Grinstead","email":"briangrinstead@gmail.com"},"license":"MIT","homepage":"https://github.com/advisr-io/TinyColor#readme","keywords":["color","parser","tinycolor"],"repository":{"url":"git+https://github.com/advisr-io/TinyColor.git","type":"git"},"description":"Fast Color Parsing and Manipulation","maintainers":[{"email":"jesse.rohland@gmail.com","name":"jrohland"}],"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[![Build Status](https://travis-ci.org/bgrins/TinyColor.png?branch=master)](https://travis-ci.org/bgrins/TinyColor)\n\n## Including in a browser\n\nDownload [tinycolor.js](https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js) or install it with bower:\n\n    bower install tinycolor\n\nThen just include it in the page in a `script` tag:\n```html\n<script type='text/javascript' src='tinycolor.js'></script>\n<script type='text/javascript'>\nvar color = tinycolor(\"red\");\n</script>\n```\n## Including in node\n\n`tinycolor` may also be included as a [node](http://nodejs.org/) module like so:\n\n    npm install tinycolor2\n\nThen it can be used in your script like so:\n```js\nvar tinycolor = require(\"tinycolor2\");\nvar color = tinycolor(\"red\");\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```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) -> 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) -> 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) -> 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) -> 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) -> 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() -> 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) -> 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) -> array<TinyColor>`.\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) -> array<TinyColor>`.\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() -> array<TinyColor>`.\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() -> array<TinyColor>`.\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() -> array<TinyColor>`.\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() -> 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) -> 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) -> 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) -> 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() -> 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","readmeFilename":"README.md"}