Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
tinycolor2
Advanced tools
tinycolor2 - npm Package Compare versions
Comparing version 0.10.0 to 1.0.0
| { | ||
| "name": "tinycolor", | ||
| "version": "0.10.0", | ||
| "main": ["./tinycolor.js"], | ||
| "dependencies": { | ||
| } | ||
| } | ||
| "repository": "bgrins/TinyColor", | ||
| "version": "1.0.0", | ||
| "main": "tinycolor.js", | ||
| "scripts": ["tinycolor.js"], | ||
| "license": "MIT" | ||
| } |
| { | ||
| "version": "0.10.0", | ||
| "version": "1.0.0", | ||
| "name": "tinycolor2", | ||
@@ -4,0 +4,0 @@ "description": "Fast Color Parsing and Manipulation", |
177
README.md
| # TinyColor | ||
| ## JavaScript color parsing | ||
| ## JavaScript color tooling | ||
| Fast, small color manipulation and conversion for JavaScript. TinyColor is allows many forms of input, while providing color conversions and other color utility functions. It has no dependancies. | ||
| TinyColor 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. | ||
@@ -11,2 +11,8 @@ [](https://travis-ci.org/bgrins/TinyColor) | ||
| Download [tinycolor.js](https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js) or install it with bower: | ||
| bower install tinycolor | ||
| Then just include it in the page in a `script` tag: | ||
| <script type='text/javascript' src='tinycolor.js'></script> | ||
@@ -106,2 +112,22 @@ <script type='text/javascript'> | ||
| ### isLight | ||
| Return a boolean indicating whether the color's perceived brightness is light. | ||
| var color1 = tinycolor("#fff"); | ||
| color1.isLight(); // true | ||
| var color2 = tinycolor("#000"); | ||
| color2.isLight(); // false | ||
| ### isDark | ||
| Return a boolean indicating whether the color's perceived brightness is dark. | ||
| var color1 = tinycolor("#fff"); | ||
| color1.isDark(); // false | ||
| var color2 = tinycolor("#000"); | ||
| color2.isDark(); // true | ||
| ### getAlpha | ||
@@ -120,2 +146,12 @@ | ||
| ### getBrightness | ||
| Returns the perceived brightness of a color, from `0-255`. | ||
| var color1 = tinycolor("#fff"); | ||
| color1.getBrightness(); // 255 | ||
| var color2 = tinycolor("#000"); | ||
| color2.getBrightness(); // 0 | ||
| ### setAlpha | ||
@@ -214,41 +250,134 @@ | ||
| ## Color Utilities | ||
| ### Color Modification | ||
| tinycolor.equals(color1, color2) | ||
| These methods manipulate the current color, and return it for chaining. For instance: | ||
| ### Color Modification | ||
| tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d" | ||
| Modification functions may take an `amount` variable from 0 - 100, indicating how much the effect should be applied. | ||
| ### lighten | ||
| tinycolor.lighten(color, amount = 10) | ||
| tinycolor.darken(color, amount = 10) | ||
| tinycolor.desaturate(color, amount = 10) | ||
| tinycolor.saturate(color, amount = 10) | ||
| tinycolor.greyscale(color) | ||
| `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" | ||
| ### brighten | ||
| `brighten: function(amount = 10) -> TinyColor`. Brighten the color a given amount, from 0 to 100. | ||
| 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" | ||
| ### 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" | ||
| ### 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%)" | ||
| ### greyscale | ||
| `greyscale: function() -> TinyColor`. Completely desaturates a color into greyscale. Same as calling `desaturate(100)`. | ||
| 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). | ||
| 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" | ||
| ### Color Combinations | ||
| Combination functions return an Array of TinyColor objects. | ||
| Combination functions return an array of TinyColor objects unless otherwise noted. | ||
| tinycolor.analogous(color, results = 6, slices = 30) | ||
| tinycolor.complement(color) | ||
| tinycolor.monochromatic(color, results = 6) | ||
| tinycolor.splitcomplements(color) | ||
| tinycolor.triad(color) | ||
| tinycolor.tetrad(color) | ||
| ### analogous | ||
| ### Readability | ||
| `analogous: function(, results = 6, slices = 30) -> array<TinyColor>`. | ||
| Analyze 2 colors and returns an object with the following properties. `brightness` is difference in brightness between the two colors. `color`: difference in color/hue between the two colors. | ||
| var colors = tinycolor("#f00").analogous(); | ||
| tinycolor.readability(color1, color2); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ] | ||
| Ensure that foreground and background color combinations provide sufficient contrast. | ||
| ### monochromatic | ||
| tinycolor.readable(color1, color2); | ||
| `monochromatic: function(, results = 6) -> array<TinyColor>`. | ||
| var colors = tinycolor("#f00").monochromatic(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ] | ||
| ### splitcomplement | ||
| `splitcomplement: function() -> array<TinyColor>`. | ||
| var colors = tinycolor("#f00").splitcomplement(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ccff00", "#0066ff" ] | ||
| ### triad | ||
| `triad: function() -> array<TinyColor>`. | ||
| var colors = tinycolor("#f00").triad(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#00ff00", "#0000ff" ] | ||
| ### tetrad | ||
| `tetrad: function() -> array<TinyColor>`. | ||
| var colors = tinycolor("#f00").tetrad(); | ||
| colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ] | ||
| ### complement | ||
| `complement: function() -> TinyColor`. | ||
| tinycolor("#f00").complement().toHexString(); // "#00ffff" | ||
| ## Color Utilities | ||
| tinycolor.equals(color1, color2) | ||
| tinycolor.mix(color1, color2, amount = 50) | ||
| ### readability | ||
| `readable: function(TinyColor, TinyColor) -> Object`. Analyze 2 colors and returns an object with the following properties. `brightness` is difference in brightness between the two colors. `color`: difference in color/hue between the two colors. | ||
| tinycolor.readability("#000", "#111"); // {brightness: 17, color: 51} | ||
| tinycolor.readability("#000", "#fff"); // {brightness: 255, color: 765} | ||
| ### isReadable | ||
| `isReadable: function(TinyColor, TinyColor) -> Boolean`. Ensure that foreground and background color combinations provide sufficient contrast. | ||
| tinycolor.isReadable("#000", "#111"); // false | ||
| ### mostReadable | ||
| Given a base color and a list of possible foreground or background colors for that base, returns the most readable color. | ||
| tinycolor.mostReadable(baseColor, colorList); | ||
| tinycolor.mostReadable("#000", ["#f00", "#0f0", "#00f"]).toHexString(); // "#00ff00" | ||
| See [index.html](https://github.com/bgrins/TinyColor/blob/master/index.html) in the project for a demo. |
196
test/test.js
@@ -34,3 +34,2 @@ | ||
| module("Color translations"); | ||
| test("Color Equality", function() { | ||
@@ -62,2 +61,3 @@ for (var i = 0; i < conversions.length; i++) { | ||
| module("Ratio Parsing"); | ||
@@ -76,9 +76,7 @@ test("With Ratio", function() { | ||
| equal (tinycolor("rgb .1 .1 .1").toHexString(), "#000000", "000000"); | ||
| }); | ||
| module("String Parsing"); | ||
| test("RGB Text Parsing", function() { | ||
| equal (tinycolor("rgb 255 0 0").toHexString(), "#ff0000", "spaced input"); | ||
@@ -105,7 +103,5 @@ equal (tinycolor("rgb(255, 0, 0)").toHexString(), "#ff0000", "parenthesized input"); | ||
| ok (tinycolor.equals(tinycolor({r:200, g: 100, b: 0 }), "rgb 200 100 0")); | ||
| }); | ||
| test("Percentage RGB Text Parsing", function() { | ||
| equal (tinycolor("rgb 100% 0% 0%").toHexString(), "#ff0000", "spaced input"); | ||
@@ -132,3 +128,2 @@ equal (tinycolor("rgb(100%, 0%, 0%)").toHexString(), "#ff0000", "parenthesized input"); | ||
| ok (tinycolor.equals(tinycolor({r:"90%", g: "45%", b: "0%" }), "rgb 90% 45% 0%")); | ||
| }); | ||
@@ -146,5 +141,3 @@ | ||
| test("Hex Parsing", function() { | ||
| equal (tinycolor("rgb 255 0 0").toHexString(), "#ff0000"); | ||
@@ -158,10 +151,7 @@ equal (tinycolor("rgb 255 0 0").toHexString(true), "#f00"); | ||
| equal (tinycolor("rgba 255 0 0 0.5").toHex8(), "80ff0000"); | ||
| }); | ||
| test("HSV Parsing", function() { | ||
| equal (tinycolor("hsv 251.1 0.887 .918").toHsvString(), "hsv(251, 89%, 92%)"); | ||
| equal (tinycolor("hsv 251.1 0.887 0.918").toHsvString(), "hsv(251, 89%, 92%)"); | ||
| }); | ||
@@ -322,2 +312,3 @@ | ||
| module("Alpha handling"); | ||
@@ -342,2 +333,5 @@ test("Invalid alpha should normalize to 1", function() { | ||
| equal(redNamed.getFormat(), "name", "getFormat() is correct"); | ||
| equal(redHex.getFormat(), "hex", "getFormat() is correct"); | ||
| equal (redNamed.toString(), "rgba(255, 0, 0, 0.5)", "Names should default to rgba if alpha is < 1"); | ||
@@ -355,9 +349,12 @@ equal (redHex.toString(), "rgba(255, 0, 0, 0.5)", "Hex should default to rgba if alpha is < 1"); | ||
| equal (transparentNamed.toString(), "transparent", "Named color should equal transparent if alpha == 0"); | ||
| redHex.setAlpha(0); | ||
| equal (redHex.toString(), "rgba(255, 0, 0, 0)", "Hex should default to rgba if alpha is = 0"); | ||
| }); | ||
| test("setting alpha", function() { | ||
| var hexSetter = tinycolor("rgba(255, 0, 0, 1)"); | ||
| equal (hexSetter.getAlpha(), 1, "Alpha should start as 1"); | ||
| hexSetter.setAlpha(.9); | ||
| var returnedFromSetAlpha = hexSetter.setAlpha(.9); | ||
| equal (returnedFromSetAlpha, hexSetter, "setAlpha return value should be the color."); | ||
| equal (hexSetter.getAlpha(), .9, "setAlpha should change alpha value"); | ||
@@ -378,3 +375,2 @@ hexSetter.setAlpha(.5); | ||
| equal (hexSetter.getAlpha(), 1, "setAlpha with invalid value should be bound to 1"); | ||
| }); | ||
@@ -388,2 +384,48 @@ | ||
| module("Brightness handling"); | ||
| test("getBrightness", function() { | ||
| equal(tinycolor('#000').getBrightness(), 0, 'returns 0 for #000'); | ||
| equal(tinycolor('#fff').getBrightness(), 255, 'returns 255 for #fff'); | ||
| }); | ||
| test("isDark returns true/false for dark/light colors", function() { | ||
| equal(tinycolor('#000').isDark(), true, '#000 is dark'); | ||
| equal(tinycolor('#111').isDark(), true, '#111 is dark'); | ||
| equal(tinycolor('#222').isDark(), true, '#222 is dark'); | ||
| equal(tinycolor('#333').isDark(), true, '#333 is dark'); | ||
| equal(tinycolor('#444').isDark(), true, '#444 is dark'); | ||
| equal(tinycolor('#555').isDark(), true, '#555 is dark'); | ||
| equal(tinycolor('#666').isDark(), true, '#666 is dark'); | ||
| equal(tinycolor('#777').isDark(), true, '#777 is dark'); | ||
| equal(tinycolor('#888').isDark(), false, '#888 is not dark'); | ||
| equal(tinycolor('#999').isDark(), false, '#999 is not dark'); | ||
| equal(tinycolor('#aaa').isDark(), false, '#aaa is not dark'); | ||
| equal(tinycolor('#bbb').isDark(), false, '#bbb is not dark'); | ||
| equal(tinycolor('#ccc').isDark(), false, '#ccc is not dark'); | ||
| equal(tinycolor('#ddd').isDark(), false, '#ddd is not dark'); | ||
| equal(tinycolor('#eee').isDark(), false, '#eee is not dark'); | ||
| equal(tinycolor('#fff').isDark(), false, '#fff is not dark'); | ||
| }); | ||
| test("isLight returns true/false for light/dark colors", function() { | ||
| equal(tinycolor('#000').isLight(), false, '#000 is not light'); | ||
| equal(tinycolor('#111').isLight(), false, '#111 is not light'); | ||
| equal(tinycolor('#222').isLight(), false, '#222 is not light'); | ||
| equal(tinycolor('#333').isLight(), false, '#333 is not light'); | ||
| equal(tinycolor('#444').isLight(), false, '#444 is not light'); | ||
| equal(tinycolor('#555').isLight(), false, '#555 is not light'); | ||
| equal(tinycolor('#666').isLight(), false, '#666 is not light'); | ||
| equal(tinycolor('#777').isLight(), false, '#777 is not light'); | ||
| equal(tinycolor('#888').isLight(), true, '#888 is light'); | ||
| equal(tinycolor('#999').isLight(), true, '#999 is light'); | ||
| equal(tinycolor('#aaa').isLight(), true, '#aaa is light'); | ||
| equal(tinycolor('#bbb').isLight(), true, '#bbb is light'); | ||
| equal(tinycolor('#ccc').isLight(), true, '#ccc is light'); | ||
| equal(tinycolor('#ddd').isLight(), true, '#ddd is light'); | ||
| equal(tinycolor('#eee').isLight(), true, '#eee is light'); | ||
| equal(tinycolor('#fff').isLight(), true, '#fff is light'); | ||
| }); | ||
| module("Initialization from tinycolor output"); | ||
@@ -411,2 +453,3 @@ test("HSL Object", function() { | ||
| }); | ||
| test("HSV String", function() { | ||
@@ -433,2 +476,3 @@ for (var i = 0; i < conversions.length; i++) { | ||
| }); | ||
| test("RGB Object", function() { | ||
@@ -441,2 +485,3 @@ for (var i = 0; i < conversions.length; i++) { | ||
| }); | ||
| test("RGB String", function() { | ||
@@ -449,2 +494,3 @@ for (var i = 0; i < conversions.length; i++) { | ||
| }); | ||
| test("PRGB Object", function() { | ||
@@ -463,2 +509,3 @@ for (var i = 0; i < conversions.length; i++) { | ||
| }); | ||
| test("PRGB String", function() { | ||
@@ -477,2 +524,3 @@ for (var i = 0; i < conversions.length; i++) { | ||
| }); | ||
| test("Object", function() { | ||
@@ -488,3 +536,2 @@ for (var i = 0; i < conversions.length; i++) { | ||
| module("Utilities"); | ||
| test("Color equality", function() { | ||
@@ -501,9 +548,15 @@ ok (tinycolor.equals("#ff0000", "#ff0000"), "Same hex"); | ||
| }); | ||
| test("Readability", function () { | ||
| ok (tinycolor.readable("#000000", "#ffffff"), "white/black is readable"); | ||
| ok (!tinycolor.readable("#FF0088", "#8822AA"), "pink on pink is not readable"); | ||
| equal (tinycolor.mostReadable("#000", ["#111", "#222"]).toHexString(), "#222222", "pick most readable color"); | ||
| equal (tinycolor.mostReadable("#f00", ["#d00", "#0d0"]).toHexString(), "#00dd00", "pick most readable color"); | ||
| test("isReadable", function() { | ||
| ok (tinycolor.isReadable("#000000", "#ffffff"), "white/black is readable"); | ||
| ok (!tinycolor.isReadable("#FF0088", "#8822AA"), "pink on pink is not readable"); | ||
| }); | ||
| test("readability", function() { | ||
| // XXX: Need tests for readability | ||
| deepEqual(tinycolor.readability("#000", "#111"), {brightness: 17, color: 51}, "Readability 1"); | ||
| deepEqual(tinycolor.readability("#000", "#fff"), {brightness: 255, color: 765}, "Readability 2"); | ||
| }); | ||
| test("mostReadable", function () { | ||
| equal (tinycolor.mostReadable("#000", ["#111", "#222"]).toHexString(), "#222222", "pick most readable color"); | ||
| equal (tinycolor.mostReadable("#f00", ["#d00", "#0d0"]).toHexString(), "#00dd00", "pick most readable color"); | ||
| }); | ||
@@ -522,2 +575,4 @@ test("Filters", function () { | ||
| module("Modifications"); | ||
| /* Originally generated with: | ||
@@ -531,36 +586,99 @@ var results = []; | ||
| var LIGHTENS = ["ff0000","ff0505","ff0a0a","ff0f0f","ff1414","ff1a1a","ff1f1f","ff2424","ff2929","ff2e2e","ff3333","ff3838","ff3d3d","ff4242","ff4747","ff4d4d","ff5252","ff5757","ff5c5c","ff6161","ff6666","ff6b6b","ff7070","ff7575","ff7a7a","ff8080","ff8585","ff8a8a","ff8f8f","ff9494","ff9999","ff9e9e","ffa3a3","ffa8a8","ffadad","ffb3b3","ffb8b8","ffbdbd","ffc2c2","ffc7c7","ffcccc","ffd1d1","ffd6d6","ffdbdb","ffe0e0","ffe5e5","ffebeb","fff0f0","fff5f5","fffafa","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff"]; | ||
| var BRIGHTENS = ["ff0000","ff0303","ff0505","ff0808","ff0a0a","ff0d0d","ff0f0f","ff1212","ff1414","ff1717","ff1919","ff1c1c","ff1f1f","ff2121","ff2424","ff2626","ff2929","ff2b2b","ff2e2e","ff3030","ff3333","ff3636","ff3838","ff3b3b","ff3d3d","ff4040","ff4242","ff4545","ff4747","ff4a4a","ff4c4c","ff4f4f","ff5252","ff5454","ff5757","ff5959","ff5c5c","ff5e5e","ff6161","ff6363","ff6666","ff6969","ff6b6b","ff6e6e","ff7070","ff7373","ff7575","ff7878","ff7a7a","ff7d7d","ff7f7f","ff8282","ff8585","ff8787","ff8a8a","ff8c8c","ff8f8f","ff9191","ff9494","ff9696","ff9999","ff9c9c","ff9e9e","ffa1a1","ffa3a3","ffa6a6","ffa8a8","ffabab","ffadad","ffb0b0","ffb2b2","ffb5b5","ffb8b8","ffbaba","ffbdbd","ffbfbf","ffc2c2","ffc4c4","ffc7c7","ffc9c9","ffcccc","ffcfcf","ffd1d1","ffd4d4","ffd6d6","ffd9d9","ffdbdb","ffdede","ffe0e0","ffe3e3","ffe5e5","ffe8e8","ffebeb","ffeded","fff0f0","fff2f2","fff5f5","fff7f7","fffafa","fffcfc","ffffff"]; | ||
| var DARKENS = ["ff0000","fa0000","f50000","f00000","eb0000","e60000","e00000","db0000","d60000","d10000","cc0000","c70000","c20000","bd0000","b80000","b30000","ad0000","a80000","a30000","9e0000","990000","940000","8f0000","8a0000","850000","800000","7a0000","750000","700000","6b0000","660000","610000","5c0000","570000","520000","4d0000","470000","420000","3d0000","380000","330000","2e0000","290000","240000","1f0000","190000","140000","0f0000","0a0000","050000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000"]; | ||
| test("Combinations", function () { | ||
| test("Modifications", function () { | ||
| for (var i = 0; i <= 100; i++) { | ||
| equal (tinycolor.desaturate("red", i).toHex(), DESATURATIONS[i], "Desaturation " + i + " works"); | ||
| equal (tinycolor("red").desaturate(i).toHex(), DESATURATIONS[i], "Desaturation " + i + " works"); | ||
| } | ||
| for (var i = 0; i <= 100; i++) { | ||
| equal (tinycolor.saturate("red", i).toHex(), SATURATIONS[i], "Saturation " + i + " works"); | ||
| equal (tinycolor("red").saturate(i).toHex(), SATURATIONS[i], "Saturation " + i + " works"); | ||
| } | ||
| for (var i = 0; i <= 100; i++) { | ||
| equal (tinycolor.lighten("red", i).toHex(), LIGHTENS[i], "Lighten " + i + " works"); | ||
| equal (tinycolor("red").lighten(i).toHex(), LIGHTENS[i], "Lighten " + i + " works"); | ||
| } | ||
| for (var i = 0; i <= 100; i++) { | ||
| equal (tinycolor.darken("red", i).toHex(), DARKENS[i], "Darken " + i + " works"); | ||
| equal (tinycolor("red").brighten(i).toHex(), BRIGHTENS[i], "Brighter " + i + " works"); | ||
| } | ||
| for (var i = 0; i <= 100; i++) { | ||
| equal (tinycolor("red").darken(i).toHex(), DARKENS[i], "Darken " + i + " works"); | ||
| } | ||
| equal (tinycolor("red").greyscale().toHex(), "808080", "Greyscale works"); | ||
| }); | ||
| equal (tinycolor.greyscale("red").toHex(), "808080", "Greyscale works") | ||
| equal (tinycolor.complement("red").toHex(), "00ffff", "Complement works"); | ||
| test("Spin", function () { | ||
| equal (Math.round(tinycolor("#f00").spin(-1234).toHsl().h), 206, "Spinning -1234 works"); | ||
| equal (Math.round(tinycolor("#f00").spin(-360).toHsl().h), 0, "Spinning -360 works"); | ||
| equal (Math.round(tinycolor("#f00").spin(-120).toHsl().h), 240, "Spinning -120 works"); | ||
| equal (Math.round(tinycolor("#f00").spin(0).toHsl().h), 0, "Spinning 0 works"); | ||
| equal (Math.round(tinycolor("#f00").spin(10).toHsl().h), 10, "Spinning 10 works"); | ||
| equal (Math.round(tinycolor("#f00").spin(360).toHsl().h), 0, "Spinning 360 works"); | ||
| equal (Math.round(tinycolor("#f00").spin(2345).toHsl().h), 185, "Spinning 2345 works"); | ||
| }); | ||
| test("Mix", function () { | ||
| // amount 0 or none | ||
| equal(tinycolor.mix('#000', '#fff').toHsl().l, 0.5, "Mixing without amount works"); | ||
| equal(tinycolor.mix('#f00', '#000', 0).toHex(), 'ff0000', "Mixing with 0 amount works"); | ||
| /* Too slow: 1677731 possibilities | ||
| asyncTest("Ajax load", function() { | ||
| // black and white | ||
| for (var i = 0; i < 100; i++) { | ||
| equal(Math.round(tinycolor.mix('#000', '#fff', i).toHsl().l * 100) / 100, i / 100, "Mixing black and white with " + i + " amount works"); | ||
| } | ||
| $.get("allhex.txt", function(d) { | ||
| var hex = d.split('\n'); | ||
| for (var i = 0, l = hex.length; i < l; i++) { | ||
| ok (tinycolor(hex[i]).toHex(), hex[i]); | ||
| // with colors | ||
| for (var i = 0; i < 100; i++) { | ||
| var new_hex = Math.round(255 * (1 - (i / 100))).toString(16); | ||
| if (new_hex.length === 1) { | ||
| new_hex = '0' + new_hex; | ||
| } | ||
| equal(tinycolor.mix('#f00', '#000', i).toHex(), new_hex + '0000', "Mixing " + i + " (red channel)"); | ||
| equal(tinycolor.mix('#0f0', '#000', i).toHex(), '00' + new_hex + '00', "Mixing " + i + " (green channel)"); | ||
| equal(tinycolor.mix('#00f', '#000', i).toHex(), '0000' + new_hex, "Mixing " + i + " (blue channel)"); | ||
| equal(tinycolor.mix(tinycolor('transparent'), '#000', i).toRgb().a, i / 100, "Mixing " + i + " (alpha channel)"); | ||
| } | ||
| console.log(hex.length); | ||
| start(); | ||
| }); | ||
| }); | ||
| */ | ||
| // The combination tests need to be expanded further | ||
| module("Combinations"); | ||
| function colorsToHexString(colors) { | ||
| return colors.map(function(c) { | ||
| return c.toHex(); | ||
| }).join(","); | ||
| } | ||
| test("complement", function() { | ||
| var complementDoesntModifyInstance = tinycolor("red"); | ||
| equal (complementDoesntModifyInstance.complement().toHex(), "00ffff", "Complement works"); | ||
| equal (complementDoesntModifyInstance.toHex(), "ff0000", "Complement did not modify this color"); | ||
| }); | ||
| test("analogous", function() { | ||
| var combination = tinycolor("red").analogous(); | ||
| equal(colorsToHexString(combination), "ff0000,ff0066,ff0033,ff0000,ff3300,ff6600", "Correct Combination"); | ||
| }); | ||
| test("monochromatic", function() { | ||
| var combination = tinycolor("red").monochromatic(); | ||
| equal(colorsToHexString(combination), "ff0000,2a0000,550000,800000,aa0000,d40000", "Correct Combination"); | ||
| }); | ||
| test("splitcomplement", function() { | ||
| var combination = tinycolor("red").splitcomplement(); | ||
| equal(colorsToHexString(combination), "ff0000,ccff00,0066ff", "Correct Combination"); | ||
| }); | ||
| test("triad", function() { | ||
| var combination = tinycolor("red").triad(); | ||
| equal(colorsToHexString(combination), "ff0000,00ff00,0000ff", "Correct Combination"); | ||
| }); | ||
| test("tetrad", function() { | ||
| var combination = tinycolor("red").tetrad(); | ||
| equal(colorsToHexString(combination), "ff0000,80ff00,00ffff,7f00ff", "Correct Combination"); | ||
| }); |
210
tinycolor.js
@@ -1,4 +0,4 @@ | ||
| // TinyColor v0.10.0 | ||
| // TinyColor v1.0.0 | ||
| // https://github.com/bgrins/TinyColor | ||
| // 2013-08-10, Brian Grinstead, MIT License | ||
| // Brian Grinstead, MIT License | ||
@@ -52,11 +52,25 @@ (function() { | ||
| tinycolor.prototype = { | ||
| isDark: function() { | ||
| return this.getBrightness() < 128; | ||
| }, | ||
| isLight: function() { | ||
| return !this.isDark(); | ||
| }, | ||
| isValid: function() { | ||
| return this._ok; | ||
| }, | ||
| getFormat: function() { | ||
| return this._format; | ||
| }, | ||
| getAlpha: function() { | ||
| return this._a; | ||
| }, | ||
| getBrightness: function() { | ||
| var rgb = this.toRgb(); | ||
| return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; | ||
| }, | ||
| setAlpha: function(value) { | ||
| this._a = boundAlpha(value); | ||
| this._roundA = mathRound(100*this._a) / 100; | ||
| return this; | ||
| }, | ||
@@ -141,6 +155,11 @@ toHsv: function() { | ||
| var formattedString = false; | ||
| var hasAlphaAndFormatNotSet = !formatSet && this._a < 1 && this._a > 0; | ||
| var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); | ||
| var hasAlpha = this._a < 1 && this._a >= 0; | ||
| var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); | ||
| if (formatWithAlpha) { | ||
| if (needsAlphaFormat) { | ||
| // Special case for "transparent", all other non-alpha formats | ||
| // will return rgba when there is transparency. | ||
| if (format === "name" && this._a === 0) { | ||
| return this.toName(); | ||
| } | ||
| return this.toRgbString(); | ||
@@ -174,2 +193,54 @@ } | ||
| return formattedString || this.toHexString(); | ||
| }, | ||
| _applyModification: function(fn, args) { | ||
| var color = fn.apply(null, [this].concat([].slice.call(args))); | ||
| this._r = color._r; | ||
| this._g = color._g; | ||
| this._b = color._b; | ||
| this.setAlpha(color._a); | ||
| return this; | ||
| }, | ||
| lighten: function() { | ||
| return this._applyModification(lighten, arguments); | ||
| }, | ||
| brighten: function() { | ||
| return this._applyModification(brighten, arguments); | ||
| }, | ||
| darken: function() { | ||
| return this._applyModification(darken, arguments); | ||
| }, | ||
| desaturate: function() { | ||
| return this._applyModification(desaturate, arguments); | ||
| }, | ||
| saturate: function() { | ||
| return this._applyModification(saturate, arguments); | ||
| }, | ||
| greyscale: function() { | ||
| return this._applyModification(greyscale, arguments); | ||
| }, | ||
| spin: function() { | ||
| return this._applyModification(spin, arguments); | ||
| }, | ||
| _applyCombination: function(fn, args) { | ||
| return fn.apply(null, [this].concat([].slice.call(args))); | ||
| }, | ||
| analogous: function() { | ||
| return this._applyCombination(analogous, arguments); | ||
| }, | ||
| complement: function() { | ||
| return this._applyCombination(complement, arguments); | ||
| }, | ||
| monochromatic: function() { | ||
| return this._applyCombination(monochromatic, arguments); | ||
| }, | ||
| splitcomplement: function() { | ||
| return this._applyCombination(splitcomplement, arguments); | ||
| }, | ||
| triad: function() { | ||
| return this._applyCombination(triad, arguments); | ||
| }, | ||
| tetrad: function() { | ||
| return this._applyCombination(tetrad, arguments); | ||
| } | ||
@@ -456,3 +527,3 @@ }; | ||
| tinycolor.desaturate = function (color, amount) { | ||
| function desaturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
@@ -463,4 +534,5 @@ var hsl = tinycolor(color).toHsl(); | ||
| return tinycolor(hsl); | ||
| }; | ||
| tinycolor.saturate = function (color, amount) { | ||
| } | ||
| function saturate(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
@@ -471,7 +543,9 @@ var hsl = tinycolor(color).toHsl(); | ||
| return tinycolor(hsl); | ||
| }; | ||
| tinycolor.greyscale = function(color) { | ||
| return tinycolor.desaturate(color, 100); | ||
| }; | ||
| tinycolor.lighten = function(color, amount) { | ||
| } | ||
| function greyscale(color) { | ||
| return tinycolor(color).desaturate(100); | ||
| } | ||
| function lighten (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
@@ -482,5 +556,15 @@ var hsl = tinycolor(color).toHsl(); | ||
| return tinycolor(hsl); | ||
| }; | ||
| tinycolor.darken = function (color, amount) { | ||
| } | ||
| function brighten(color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var rgb = tinycolor(color).toRgb(); | ||
| rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); | ||
| rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); | ||
| rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); | ||
| return tinycolor(rgb); | ||
| } | ||
| function darken (color, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 10); | ||
| var hsl = tinycolor(color).toHsl(); | ||
@@ -490,10 +574,13 @@ hsl.l -= amount / 100; | ||
| return tinycolor(hsl); | ||
| }; | ||
| tinycolor.complement = function(color) { | ||
| } | ||
| // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. | ||
| // Values outside of this range will be wrapped into this range. | ||
| function spin(color, amount) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| var hue = (mathRound(hsl.h) + amount) % 360; | ||
| hsl.h = hue < 0 ? 360 + hue : hue; | ||
| return tinycolor(hsl); | ||
| }; | ||
| } | ||
| // Combination Functions | ||
@@ -504,4 +591,10 @@ // --------------------- | ||
| tinycolor.triad = function(color) { | ||
| function complement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| hsl.h = (hsl.h + 180) % 360; | ||
| return tinycolor(hsl); | ||
| } | ||
| function triad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
| var h = hsl.h; | ||
@@ -513,4 +606,5 @@ return [ | ||
| ]; | ||
| }; | ||
| tinycolor.tetrad = function(color) { | ||
| } | ||
| function tetrad(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
@@ -524,4 +618,5 @@ var h = hsl.h; | ||
| ]; | ||
| }; | ||
| tinycolor.splitcomplement = function(color) { | ||
| } | ||
| function splitcomplement(color) { | ||
| var hsl = tinycolor(color).toHsl(); | ||
@@ -534,4 +629,5 @@ var h = hsl.h; | ||
| ]; | ||
| }; | ||
| tinycolor.analogous = function(color, results, slices) { | ||
| } | ||
| function analogous(color, results, slices) { | ||
| results = results || 6; | ||
@@ -549,4 +645,5 @@ slices = slices || 30; | ||
| return ret; | ||
| }; | ||
| tinycolor.monochromatic = function(color, results) { | ||
| } | ||
| function monochromatic(color, results) { | ||
| results = results || 6; | ||
@@ -564,2 +661,37 @@ var hsv = tinycolor(color).toHsv(); | ||
| return ret; | ||
| } | ||
| // Utility Functions | ||
| // --------------------- | ||
| tinycolor.mix = function(color1, color2, amount) { | ||
| amount = (amount === 0) ? 0 : (amount || 50); | ||
| var rgb1 = tinycolor(color1).toRgb(); | ||
| var rgb2 = tinycolor(color2).toRgb(); | ||
| var p = amount / 100; | ||
| var w = p * 2 - 1; | ||
| var a = rgb2.a - rgb1.a; | ||
| var w1; | ||
| if (w * a == -1) { | ||
| w1 = w; | ||
| } else { | ||
| w1 = (w + a) / (1 + w * a); | ||
| } | ||
| w1 = (w1 + 1) / 2; | ||
| var w2 = 1 - w1; | ||
| var rgba = { | ||
| r: rgb2.r * w1 + rgb1.r * w2, | ||
| g: rgb2.g * w1 + rgb1.g * w2, | ||
| b: rgb2.b * w1 + rgb1.b * w2, | ||
| a: rgb2.a * p + rgb1.a * (1 - p) | ||
| }; | ||
| return tinycolor(rgba); | ||
| }; | ||
@@ -577,10 +709,12 @@ | ||
| tinycolor.readability = function(color1, color2) { | ||
| var a = tinycolor(color1).toRgb(); | ||
| var b = tinycolor(color2).toRgb(); | ||
| var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000; | ||
| var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000; | ||
| var c1 = tinycolor(color1); | ||
| var c2 = tinycolor(color2); | ||
| var rgb1 = c1.toRgb(); | ||
| var rgb2 = c2.toRgb(); | ||
| var brightnessA = c1.getBrightness(); | ||
| var brightnessB = c2.getBrightness(); | ||
| var colorDiff = ( | ||
| Math.max(a.r, b.r) - Math.min(a.r, b.r) + | ||
| Math.max(a.g, b.g) - Math.min(a.g, b.g) + | ||
| Math.max(a.b, b.b) - Math.min(a.b, b.b) | ||
| Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) + | ||
| Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) + | ||
| Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b) | ||
| ); | ||
@@ -598,4 +732,4 @@ | ||
| // *Example* | ||
| // tinycolor.readable("#000", "#111") => false | ||
| tinycolor.readable = function(color1, color2) { | ||
| // tinycolor.isReadable("#000", "#111") => false | ||
| tinycolor.isReadable = function(color1, color2) { | ||
| var readability = tinycolor.readability(color1, color2); | ||
@@ -602,0 +736,0 @@ return readability.brightness > 125 && readability.color > 500; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by51.39%
380
Worsened metrics
- Total package byte prevSize
- decreased by-24.77%
655503
- Number of package files
- decreased by-10.53%
17
- Lines of code
- decreased by-37.09%
11974
No dependency changes