Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@mobile/tinycolor2
Advanced tools
@mobile/tinycolor2 - npm Package Compare versions
Comparing version 1.1.2 to 1.2.1
| { | ||
| "version": "1.1.2", | ||
| "version": "1.2.1", | ||
| "name": "@mobile/tinycolor2", | ||
| "description": "Fast Color Parsing and Manipulation (optimized for mobile)", | ||
| "description": "Repackaged version of tinycolor2 for mobile", | ||
| "url": "http://bgrins.github.com/TinyColor", | ||
| "license": "MIT", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/mobile-optimized/tinycolor2" | ||
| "url": "https://bgrins.github.com/TinyColor" | ||
| }, | ||
| "keywords": [ | ||
| "color", | ||
| "parser", | ||
| "tinycolor", | ||
| "mobile" | ||
| ], | ||
| "author": "Brian Grinstead <briangrinstead@gmail.com> (http://briangrinstead.com)", | ||
| "contributors": [], | ||
| "main": "./tinycolor.js", | ||
| "directories": {}, | ||
| "engines": { | ||
| "node": "*" | ||
| }, | ||
| "scripts": { | ||
| "download": "npm install %npm_package_source_name%@%npm_package_version%", | ||
| "commit": "git add -A && git commit -m \":checkered_flag: v%npm_package_version% :heavy_minus_sign: Repackaging from: %npm_package_source_url%\"", | ||
| "tag": "git tag v%npm_package_version%", | ||
| "push": "git push && git push --tags", | ||
| "update:version": "npm --no-git-tag-version version --", | ||
| "update:download": "npm run update:version --", | ||
| "update:copy": "cp ./node_modules/tinycolor2/tinycolor.js .", | ||
| "update:commit": "npm run update:version --", | ||
| "update:push": "npm run update:version --", | ||
| "update:publish": "npm run update:version --", | ||
| "postupdate:download": "npm run download && npm run update:copy", | ||
| "postupdate:commit": "npm run commit && npm run tag", | ||
| "postupdate:push": "npm run postupdate:download && npm run postupdate:commit && npm run push", | ||
| "postupdate:publish": "npm run postupdate:push && npm publish" | ||
| }, | ||
| "source": { | ||
| "name": "tinycolor2", | ||
| "url": "https://www.npmjs.com/package/tinycolor2" | ||
| } | ||
| } |
536
README.md
@@ -1,4 +0,8 @@ | ||
| >This is a fork of https://github.com/bgrins/TinyColor | ||
| >This project has been modified from the original to be smaller and more compatible for use with the MobileHero Platform. | ||
| >⚡ This is a repackaging of: [`https://github.com/bgrins/TinyColor`](https://github.com/bgrins/TinyColor) | ||
| >*This project has been modified from the original to be smaller for use with mobile frameworks* | ||
| >[](http://www.npmjs.com/package/%40mobile%2Ftinycolor2) | ||
| --- | ||
| # TinyColor | ||
@@ -19,8 +23,8 @@ | ||
| Then just include it in the page in a `script` tag: | ||
| <script type='text/javascript' src='tinycolor.js'></script> | ||
| <script type='text/javascript'> | ||
| var color = tinycolor("red"); | ||
| </script> | ||
| ```html | ||
| <script type='text/javascript' src='tinycolor.js'></script> | ||
| <script type='text/javascript'> | ||
| var color = tinycolor("red"); | ||
| </script> | ||
| ``` | ||
| ## Including in node | ||
@@ -33,6 +37,6 @@ | ||
| Then it can be used in your script like so: | ||
| var tinycolor = require("./tinycolor"); | ||
| var color = tinycolor("red"); | ||
| ```js | ||
| var tinycolor = require("tinycolor2"); | ||
| var color = tinycolor("red"); | ||
| ``` | ||
| ## Usage | ||
@@ -54,46 +58,48 @@ | ||
| ### Hex, 8-digit (ARGB) Hex | ||
| tinycolor("#000"); | ||
| tinycolor("000"); | ||
| tinycolor("#f0f0f6"); | ||
| tinycolor("f0f0f6"); | ||
| tinycolor("#88f0f0f6"); | ||
| tinycolor("88f0f0f6"); | ||
| ### Hex, 8-digit (RGBA) Hex | ||
| ```js | ||
| tinycolor("#000"); | ||
| tinycolor("000"); | ||
| tinycolor("#369C"); | ||
| tinycolor("369C"); | ||
| tinycolor("#f0f0f6"); | ||
| tinycolor("f0f0f6"); | ||
| tinycolor("#f0f0f688"); | ||
| tinycolor("f0f0f688"); | ||
| ``` | ||
| ### RGB, RGBA | ||
| tinycolor("rgb (255, 0, 0)"); | ||
| tinycolor("rgb 255 0 0"); | ||
| tinycolor("rgba (255, 0, 0, .5)"); | ||
| tinycolor({ r: 255, g: 0, b: 0 }); | ||
| tinycolor.fromRatio({ r: 1, g: 0, b: 0 }); | ||
| tinycolor.fromRatio({ r: .5, g: .5, b: .5 }); | ||
| ```js | ||
| tinycolor("rgb (255, 0, 0)"); | ||
| tinycolor("rgb 255 0 0"); | ||
| tinycolor("rgba (255, 0, 0, .5)"); | ||
| tinycolor({ r: 255, g: 0, b: 0 }); | ||
| tinycolor.fromRatio({ r: 1, g: 0, b: 0 }); | ||
| tinycolor.fromRatio({ r: .5, g: .5, b: .5 }); | ||
| ``` | ||
| ### HSL, HSLA | ||
| tinycolor("hsl(0, 100%, 50%)"); | ||
| tinycolor("hsla(0, 100%, 50%, .5)"); | ||
| tinycolor("hsl(0, 100%, 50%)"); | ||
| tinycolor("hsl 0 1.0 0.5"); | ||
| tinycolor({ h: 0, s: 1, l: .5 }); | ||
| tinycolor.fromRatio({ h: 1, s: 0, l: 0 }); | ||
| tinycolor.fromRatio({ h: .5, s: .5, l: .5 }); | ||
| ```js | ||
| tinycolor("hsl(0, 100%, 50%)"); | ||
| tinycolor("hsla(0, 100%, 50%, .5)"); | ||
| tinycolor("hsl(0, 100%, 50%)"); | ||
| tinycolor("hsl 0 1.0 0.5"); | ||
| tinycolor({ h: 0, s: 1, l: .5 }); | ||
| tinycolor.fromRatio({ h: 1, s: 0, l: 0 }); | ||
| tinycolor.fromRatio({ h: .5, s: .5, l: .5 }); | ||
| ``` | ||
| ### HSV, HSVA | ||
| tinycolor("hsv(0, 100%, 100%)"); | ||
| tinycolor("hsva(0, 100%, 100%, .5)"); | ||
| tinycolor("hsv (0 100% 100%)"); | ||
| tinycolor("hsv 0 1 1"); | ||
| tinycolor({ h: 0, s: 100, v: 100 }); | ||
| tinycolor.fromRatio({ h: 1, s: 0, v: 0 }); | ||
| tinycolor.fromRatio({ h: .5, s: .5, v: .5 }); | ||
| ```js | ||
| tinycolor("hsv(0, 100%, 100%)"); | ||
| tinycolor("hsva(0, 100%, 100%, .5)"); | ||
| tinycolor("hsv (0 100% 100%)"); | ||
| tinycolor("hsv 0 1 1"); | ||
| tinycolor({ h: 0, s: 100, v: 100 }); | ||
| tinycolor.fromRatio({ h: 1, s: 0, v: 0 }); | ||
| tinycolor.fromRatio({ h: .5, s: .5, v: .5 }); | ||
| ``` | ||
| ### Named | ||
| tinycolor("RED"); | ||
| tinycolor("blanchedalmond"); | ||
| tinycolor("darkblue"); | ||
| ```js | ||
| tinycolor("RED"); | ||
| tinycolor("blanchedalmond"); | ||
| tinycolor("darkblue"); | ||
| ``` | ||
| ### Accepted Object Input | ||
@@ -114,6 +120,6 @@ | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.getFormat(); // "name" | ||
| color = tinycolor({r:255, g:255, b:255}); | ||
| color.getFormat; // "rgb" | ||
| var color = tinycolor("red"); | ||
| color.getFormat(); // "name" | ||
| color = tinycolor({r:255, g:255, b:255}); | ||
| color.getFormat(); // "rgb" | ||
| ``` | ||
@@ -125,6 +131,6 @@ | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.getOriginalInput(); // "red" | ||
| color = tinycolor({r:255, g:255, b:255}); | ||
| color.getOriginalInput; // "{r: 255, g: 255, b: 255}" | ||
| var color = tinycolor("red"); | ||
| color.getOriginalInput(); // "red" | ||
| color = tinycolor({r:255, g:255, b:255}); | ||
| color.getOriginalInput(); // "{r: 255, g: 255, b: 255}" | ||
| ``` | ||
@@ -135,74 +141,74 @@ | ||
| Return 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. | ||
| ```js | ||
| var color1 = tinycolor("red"); | ||
| color1.isValid(); // true | ||
| color1.toHexString(); // "#ff0000" | ||
| var color1 = tinycolor("red"); | ||
| color1.isValid(); // true | ||
| color1.toHexString(); // "#ff0000" | ||
| var color2 = tinycolor("not a color"); | ||
| color2.isValid(); // false | ||
| color2.toString(); // "#000000" | ||
| var color2 = tinycolor("not a color"); | ||
| color2.isValid(); // false | ||
| color2.toString(); // "#000000" | ||
| ``` | ||
| ### getBrightness | ||
| Returns 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). | ||
| ```js | ||
| var color1 = tinycolor("#fff"); | ||
| color1.getBrightness(); // 255 | ||
| var color1 = tinycolor("#fff"); | ||
| color1.getBrightness(); // 255 | ||
| var color2 = tinycolor("#000"); | ||
| color2.getBrightness(); // 0 | ||
| var color2 = tinycolor("#000"); | ||
| color2.getBrightness(); // 0 | ||
| ``` | ||
| ### isLight | ||
| Return a boolean indicating whether the color's perceived brightness is light. | ||
| ```js | ||
| var color1 = tinycolor("#fff"); | ||
| color1.isLight(); // true | ||
| var color1 = tinycolor("#fff"); | ||
| color1.isLight(); // true | ||
| var color2 = tinycolor("#000"); | ||
| color2.isLight(); // false | ||
| var color2 = tinycolor("#000"); | ||
| color2.isLight(); // false | ||
| ``` | ||
| ### isDark | ||
| Return a boolean indicating whether the color's perceived brightness is dark. | ||
| ```js | ||
| var color1 = tinycolor("#fff"); | ||
| color1.isDark(); // false | ||
| var color1 = tinycolor("#fff"); | ||
| color1.isDark(); // false | ||
| var color2 = tinycolor("#000"); | ||
| color2.isDark(); // true | ||
| var color2 = tinycolor("#000"); | ||
| color2.isDark(); // true | ||
| ``` | ||
| ### getLuminance | ||
| Returns 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) | ||
| ```js | ||
| var color1 = tinycolor("#fff"); | ||
| color1.getLuminance(); // 1 | ||
| var color1 = tinycolor("#fff"); | ||
| color1.getLuminance(); // 1 | ||
| var color2 = tinycolor("#000"); | ||
| color2.getLuminance(); // 0 | ||
| var color2 = tinycolor("#000"); | ||
| color2.getLuminance(); // 0 | ||
| ``` | ||
| ### getAlpha | ||
| Returns the alpha value of a color, from `0-1`. | ||
| ```js | ||
| var color1 = tinycolor("rgba(255, 0, 0, .5)"); | ||
| color1.getAlpha(); // 0.5 | ||
| var color1 = tinycolor("rgba(255, 0, 0, .5)"); | ||
| color1.getAlpha(); // 0.5 | ||
| var color2 = tinycolor("rgb(255, 0, 0)"); | ||
| color2.getAlpha(); // 1 | ||
| var color2 = tinycolor("rgb(255, 0, 0)"); | ||
| color2.getAlpha(); // 1 | ||
| var color3 = tinycolor("transparent"); | ||
| color3.getAlpha(); // 0 | ||
| var color3 = tinycolor("transparent"); | ||
| color3.getAlpha(); // 0 | ||
| ``` | ||
| ### setAlpha | ||
| Sets the alpha value on a current color. Accepted range is in between `0-1`. | ||
| var color = tinycolor("red"); | ||
| color.getAlpha(); // 1 | ||
| color.setAlpha(.5); | ||
| color.getAlpha(); // .5 | ||
| color.toRgbString(); // "rgba(255, 0, 0, .5)" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.getAlpha(); // 1 | ||
| color.setAlpha(.5); | ||
| color.getAlpha(); // .5 | ||
| color.toRgbString(); // "rgba(255, 0, 0, .5)" | ||
| ``` | ||
| ### String Representations | ||
@@ -213,149 +219,149 @@ | ||
| ### toHsv | ||
| var color = tinycolor("red"); | ||
| color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 } | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 } | ||
| ``` | ||
| ### toHsvString | ||
| var color = tinycolor("red"); | ||
| color.toHsvString(); // "hsv(0, 100%, 100%)" | ||
| color.setAlpha(0.5); | ||
| color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHsvString(); // "hsv(0, 100%, 100%)" | ||
| color.setAlpha(0.5); | ||
| color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)" | ||
| ``` | ||
| ### toHsl | ||
| var color = tinycolor("red"); | ||
| color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 } | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 } | ||
| ``` | ||
| ### toHslString | ||
| var color = tinycolor("red"); | ||
| color.toHslString(); // "hsl(0, 100%, 50%)" | ||
| color.setAlpha(0.5); | ||
| color.toHslString(); // "hsla(0, 100%, 50%, 0.5)" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHslString(); // "hsl(0, 100%, 50%)" | ||
| color.setAlpha(0.5); | ||
| color.toHslString(); // "hsla(0, 100%, 50%, 0.5)" | ||
| ``` | ||
| ### toHex | ||
| var color = tinycolor("red"); | ||
| color.toHex(); // "ff0000" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHex(); // "ff0000" | ||
| ``` | ||
| ### toHexString | ||
| var color = tinycolor("red"); | ||
| color.toHexString(); // "#ff0000" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHexString(); // "#ff0000" | ||
| ``` | ||
| ### toHex8 | ||
| var color = tinycolor("red"); | ||
| color.toHex8(); // "ffff0000" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHex8(); // "ff0000ff" | ||
| ``` | ||
| ### toHex8String | ||
| var color = tinycolor("red"); | ||
| color.toHex8String(); // "#ffff0000" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toHex8String(); // "#ff0000ff" | ||
| ``` | ||
| ### toRgb | ||
| var color = tinycolor("red"); | ||
| color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 } | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 } | ||
| ``` | ||
| ### toRgbString | ||
| var color = tinycolor("red"); | ||
| color.toRgbString(); // "rgb(255, 0, 0)" | ||
| color.setAlpha(0.5); | ||
| color.toRgbString(); // "rgba(255, 0, 0, 0.5)" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toRgbString(); // "rgb(255, 0, 0)" | ||
| color.setAlpha(0.5); | ||
| color.toRgbString(); // "rgba(255, 0, 0, 0.5)" | ||
| ``` | ||
| ### toPercentageRgb | ||
| var color = tinycolor("red"); | ||
| color.toPercentageRgb() // { r: "100%", g: "0%", b: "0%", a: 1 } | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toPercentageRgb() // { r: "100%", g: "0%", b: "0%", a: 1 } | ||
| ``` | ||
| ### toPercentageRgbString | ||
| var color = tinycolor("red"); | ||
| color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)" | ||
| color.setAlpha(0.5); | ||
| color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)" | ||
| color.setAlpha(0.5); | ||
| color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)" | ||
| ``` | ||
| ### toName | ||
| var color = tinycolor("red"); | ||
| color.toName(); // "red" | ||
| ```js | ||
| var color = tinycolor("red"); | ||
| color.toName(); // "red" | ||
| ``` | ||
| ### toFilter | ||
| var color = tinycolor("red"); | ||
| color.toFilter(); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)" | ||
| ``` | ||
| var color = tinycolor("red"); | ||
| color.toFilter(); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)" | ||
| ``` | ||
| ### toString | ||
| Print 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. | ||
| ```js | ||
| var color1 = tinycolor("red"); | ||
| color1.toString(); // "red" | ||
| color1.toString("hsv"); // "hsv(0, 100%, 100%)" | ||
| var color1 = tinycolor("red"); | ||
| color1.toString(); // "red" | ||
| color1.toString("hsv"); // "hsv(0, 100%, 100%)" | ||
| var color2 = tinycolor("rgb(255, 0, 0)"); | ||
| color2.toString(); // "rgb(255, 0, 0)" | ||
| color2.setAlpha(.5); | ||
| color2.toString(); // "rgba(255, 0, 0, 0.5)" | ||
| var color2 = tinycolor("rgb(255, 0, 0)"); | ||
| color2.toString(); // "rgb(255, 0, 0)" | ||
| color2.setAlpha(.5); | ||
| color2.toString(); // "rgba(255, 0, 0, 0.5)" | ||
| ``` | ||
| ### Color Modification | ||
| These methods manipulate the current color, and return it for chaining. For instance: | ||
| tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d" | ||
| ```js | ||
| tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d" | ||
| ``` | ||
| ### lighten | ||
| `lighten: function(amount = 10) -> TinyColor`. Lighten the color a given amount, from 0 to 100. Providing 100 will always return white. | ||
| tinycolor("#f00").lighten().toString(); // "#ff3333" | ||
| tinycolor("#f00").lighten(100).toString(); // "#ffffff" | ||
| ```js | ||
| tinycolor("#f00").lighten().toString(); // "#ff3333" | ||
| tinycolor("#f00").lighten(100).toString(); // "#ffffff" | ||
| ``` | ||
| ### brighten | ||
| `brighten: function(amount = 10) -> TinyColor`. Brighten the color a given amount, from 0 to 100. | ||
| tinycolor("#f00").brighten().toString(); // "#ff1919" | ||
| ```js | ||
| tinycolor("#f00").brighten().toString(); // "#ff1919" | ||
| ``` | ||
| ### darken | ||
| `darken: function(amount = 10) -> TinyColor`. Darken the color a given amount, from 0 to 100. Providing 100 will always return black. | ||
| tinycolor("#f00").darken().toString(); // "#cc0000" | ||
| tinycolor("#f00").darken(100).toString(); // "#000000" | ||
| ```js | ||
| tinycolor("#f00").darken().toString(); // "#cc0000" | ||
| tinycolor("#f00").darken(100).toString(); // "#000000" | ||
| ``` | ||
| ### desaturate | ||
| `desaturate: function(amount = 10) -> TinyColor`. Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling `greyscale`. | ||
| tinycolor("#f00").desaturate().toString(); // "#f20d0d" | ||
| tinycolor("#f00").desaturate(100).toString(); // "#808080" | ||
| ```js | ||
| tinycolor("#f00").desaturate().toString(); // "#f20d0d" | ||
| tinycolor("#f00").desaturate(100).toString(); // "#808080" | ||
| ``` | ||
| ### saturate | ||
| `saturate: function(amount = 10) -> TinyColor`. Saturate the color a given amount, from 0 to 100. | ||
| tinycolor("hsl(0, 10%, 50%)").saturate().toString(); // "hsl(0, 20%, 50%)" | ||
| ```js | ||
| tinycolor("hsl(0, 10%, 50%)").saturate().toString(); // "hsl(0, 20%, 50%)" | ||
| ``` | ||
| ### greyscale | ||
| `greyscale: function() -> TinyColor`. Completely desaturates a color into greyscale. Same as calling `desaturate(100)`. | ||
| tinycolor("#f00").greyscale().toString(); // "#808080" | ||
| ```js | ||
| tinycolor("#f00").greyscale().toString(); // "#808080" | ||
| ``` | ||
| ### spin | ||
| `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). | ||
| ```js | ||
| tinycolor("#f00").spin(180).toString(); // "#00ffff" | ||
| tinycolor("#f00").spin(-90).toString(); // "#7f00ff" | ||
| tinycolor("#f00").spin(90).toString(); // "#80ff00" | ||
| tinycolor("#f00").spin(180).toString(); // "#00ffff" | ||
| tinycolor("#f00").spin(-90).toString(); // "#7f00ff" | ||
| tinycolor("#f00").spin(90).toString(); // "#80ff00" | ||
| // spin(0) and spin(360) do nothing | ||
| tinycolor("#f00").spin(0).toString(); // "#ff0000" | ||
| tinycolor("#f00").spin(360).toString(); // "#ff0000" | ||
| // spin(0) and spin(360) do nothing | ||
| tinycolor("#f00").spin(0).toString(); // "#ff0000" | ||
| tinycolor("#f00").spin(360).toString(); // "#ff0000" | ||
| ``` | ||
| ### Color Combinations | ||
@@ -368,51 +374,51 @@ | ||
| `analogous: function(, results = 6, slices = 30) -> array<TinyColor>`. | ||
| ```js | ||
| var colors = tinycolor("#f00").analogous(); | ||
| var colors = tinycolor("#f00").analogous(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ] | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ] | ||
| ``` | ||
| ### monochromatic | ||
| `monochromatic: function(, results = 6) -> array<TinyColor>`. | ||
| ```js | ||
| var colors = tinycolor("#f00").monochromatic(); | ||
| var colors = tinycolor("#f00").monochromatic(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ] | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ] | ||
| ``` | ||
| ### splitcomplement | ||
| `splitcomplement: function() -> array<TinyColor>`. | ||
| ```js | ||
| var colors = tinycolor("#f00").splitcomplement(); | ||
| var colors = tinycolor("#f00").splitcomplement(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ccff00", "#0066ff" ] | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ccff00", "#0066ff" ] | ||
| ``` | ||
| ### triad | ||
| `triad: function() -> array<TinyColor>`. | ||
| ```js | ||
| var colors = tinycolor("#f00").triad(); | ||
| var colors = tinycolor("#f00").triad(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#00ff00", "#0000ff" ] | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#00ff00", "#0000ff" ] | ||
| ``` | ||
| ### tetrad | ||
| `tetrad: function() -> array<TinyColor>`. | ||
| ```js | ||
| var colors = tinycolor("#f00").tetrad(); | ||
| var colors = tinycolor("#f00").tetrad(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ] | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ] | ||
| ``` | ||
| ### complement | ||
| `complement: function() -> TinyColor`. | ||
| tinycolor("#f00").complement().toHexString(); // "#00ffff" | ||
| ```js | ||
| tinycolor("#f00").complement().toHexString(); // "#00ffff" | ||
| ``` | ||
| ## Color Utilities | ||
| tinycolor.equals(color1, color2) | ||
| tinycolor.mix(color1, color2, amount = 50) | ||
| ```js | ||
| tinycolor.equals(color1, color2) | ||
| tinycolor.mix(color1, color2, amount = 50) | ||
| ``` | ||
| ### random | ||
@@ -434,7 +440,7 @@ | ||
| Returns the contrast ratio between two colors. | ||
| tinycolor.readability("#000", "#000"); // 1 | ||
| tinycolor.readability("#000", "#111"); // 1.1121078324840545 | ||
| tinycolor.readability("#000", "#fff"); // 21 | ||
| ```js | ||
| tinycolor.readability("#000", "#000"); // 1 | ||
| tinycolor.readability("#000", "#111"); // 1.1121078324840545 | ||
| tinycolor.readability("#000", "#fff"); // 21 | ||
| ``` | ||
| Use the values in your own calculations, or use one of the convenience functions below. | ||
@@ -447,7 +453,7 @@ | ||
| Here 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. | ||
| tinycolor.isReadable("#000", "#111", {}); // false | ||
| tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"small"}); //false | ||
| tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"large"}), //true | ||
| ```js | ||
| tinycolor.isReadable("#000", "#111", {}); // false | ||
| tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"small"}); //false | ||
| tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"large"}), //true | ||
| ``` | ||
| #### mostReadable | ||
@@ -458,9 +464,9 @@ | ||
| If none of the colors in the list is readable, `mostReadable` will return the better of black or white if `includeFallbackColors:true`. | ||
| tinycolor.mostReadable("#000", ["#f00", "#0f0", "#00f"]).toHexString(); // "#00ff00" | ||
| tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" | ||
| tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString() // "#2e0c3a", | ||
| tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString() // "#000000", | ||
| ```js | ||
| tinycolor.mostReadable("#000", ["#f00", "#0f0", "#00f"]).toHexString(); // "#00ff00" | ||
| tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" | ||
| tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" | ||
| tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString() // "#2e0c3a", | ||
| tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString() // "#000000", | ||
| ``` | ||
| See [index.html](https://github.com/bgrins/TinyColor/blob/master/index.html) in the project for a demo. | ||
@@ -470,11 +476,13 @@ | ||
| ### Cloning | ||
| ### clone | ||
| To clone a color, you can simply instantiate a new tinycolor with the old one's `toString` output. The new color is a copy of the first one, so any changes to one won't affect the other. See this example: | ||
| `clone: function() -> TinyColor`. | ||
| Instantiate a new TinyColor object with the same color. Any changes to the new one won't affect the old one. | ||
| ```js | ||
| var color1 = tinycolor("#F00"); | ||
| var color2 = color1.clone(); | ||
| color2.setAlpha(.5); | ||
| var color1 = tinycolor("#F00"); | ||
| var color2 = tinycolor(color1.toString()); | ||
| color2.setAlpha(.5); | ||
| color1.toString(); // "#ff0000" | ||
| color2.toString(); // "rgba(255, 0, 0, 0.5)" | ||
| color1.toString(); // "#ff0000" | ||
| color2.toString(); // "rgba(255, 0, 0, 0.5)" | ||
| ``` |
@@ -1,2 +0,2 @@ | ||
| // TinyColor v1.1.2 | ||
| // TinyColor v1.2.1 | ||
| // https://github.com/bgrins/TinyColor | ||
@@ -7,3 +7,3 @@ // Brian Grinstead, MIT License | ||
| var trimLeft = /^[\s,#]+/, | ||
| var trimLeft = /^\s+/, | ||
| trimRight = /\s+$/, | ||
@@ -211,2 +211,5 @@ tinyCounter = 0, | ||
| }, | ||
| clone: function() { | ||
| return tinycolor(this.toString()); | ||
| }, | ||
@@ -1063,5 +1066,5 @@ _applyModification: function(fn, args) { | ||
| hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), | ||
| hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ | ||
| hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, | ||
| hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, | ||
| hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ | ||
| }; | ||
@@ -1068,0 +1071,0 @@ })(); |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by25%
5
- Lines of code
- increased by0.29%
1029
- Number of lines in readme file
- increased by1.71%
477
Worsened metrics
- Total package byte prevSize
- decreased by-0.07%
53297
No dependency changes