diff --git a/README.md b/README.md index 165777a..8b4f2e0 100644 --- a/README.md +++ b/README.md @@ -319,6 +319,20 @@ tinycolor("#f00").brighten().toString(); // "#ff1919" tinycolor("#f00").darken().toString(); // "#cc0000" tinycolor("#f00").darken(100).toString(); // "#000000" ``` +### tint + +`tint: function(amount = 10) -> TinyColor`. Mix the color with pure white, from 0 to 100. Providing 0 will do nothing, providing 100 will always return white. +```js +tinycolor("#f00").tint().toString(); // "#ff1a1a" +tinycolor("#f00").tint(100).toString(); // "#ffffff" +``` +### shade + +`shade: function(amount = 10) -> TinyColor`. Mix the color with pure black, from 0 to 100. Providing 0 will do nothing, providing 100 will always return black. +```js +tinycolor("#f00").shade().toString(); // "#e60000" +tinycolor("#f00").shade(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`. diff --git a/index.html b/index.html index 67a906e..a497c9b 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,12 @@ ); filters.find(".darken").css("background-color", tinycolor(color).darken(20).toHexString() + ); + filters.find(".tint").css("background-color", + tinycolor(color).tint(20).toHexString() + ); + filters.find(".shade").css("background-color", + tinycolor(color).shade(20).toHexString() ); filters.find(".saturate").css("background-color", tinycolor(color).saturate(20).toHexString() @@ -145,6 +151,14 @@

Demo

Darken
+ + Tint +
+ + + Shade +
+ Saturate
diff --git a/test/test.js b/test/test.js index d5bd787..c25cffe 100644 --- a/test/test.js +++ b/test/test.js @@ -686,6 +686,8 @@ var SATURATIONS = ["ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000 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"]; +var TINTS = ["ff0000","ff0303","ff0505","ff0808","ff0a0a","ff0d0d","ff0f0f","ff1212","ff1414","ff1717","ff1a1a","ff1c1c","ff1f1f","ff2121","ff2424","ff2626","ff2929","ff2b2b","ff2e2e","ff3030","ff3333","ff3636","ff3838","ff3b3b","ff3d3d","ff4040","ff4242","ff4545","ff4747","ff4a4a","ff4d4d","ff4f4f","ff5252","ff5454","ff5757","ff5959","ff5c5c","ff5e5e","ff6161","ff6363","ff6666","ff6969","ff6b6b","ff6e6e","ff7070","ff7373","ff7575","ff7878","ff7a7a","ff7d7d","ff8080","ff8282","ff8585","ff8787","ff8a8a","ff8c8c","ff8f8f","ff9191","ff9494","ff9696","ff9999","ff9c9c","ff9e9e","ffa1a1","ffa3a3","ffa6a6","ffa8a8","ffabab","ffadad","ffb0b0","ffb3b3","ffb5b5","ffb8b8","ffbaba","ffbdbd","ffbfbf","ffc2c2","ffc4c4","ffc7c7","ffc9c9","ffcccc","ffcfcf","ffd1d1","ffd4d4","ffd6d6","ffd9d9","ffdbdb","ffdede","ffe0e0","ffe3e3","ffe6e6","ffe8e8","ffebeb","ffeded","fff0f0","fff2f2","fff5f5","fff7f7","fffafa","fffcfc","ffffff"]; +var SHADES = ["ff0000","fc0000","fa0000","f70000","f50000","f20000","f00000","ed0000","eb0000","e80000","e60000","e30000","e00000","de0000","db0000","d90000","d60000","d40000","d10000","cf0000","cc0000","c90000","c70000","c40000","c20000","bf0000","bd0000","ba0000","b80000","b50000","b30000","b00000","ad0000","ab0000","a80000","a60000","a30000","a10000","9e0000","9c0000","990000","960000","940000","910000","8f0000","8c0000","8a0000","870000","850000","820000","800000","7d0000","7a0000","780000","750000","730000","700000","6e0000","6b0000","690000","660000","630000","610000","5e0000","5c0000","590000","570000","540000","520000","4f0000","4d0000","4a0000","470000","450000","420000","400000","3d0000","3b0000","380000","360000","330000","300000","2e0000","2b0000","290000","260000","240000","210000","1f0000","1c0000","1a0000","170000","140000","120000","0f0000","0d0000","0a0000","080000","050000","030000","000000"]; test("Modifications", function () { for (var i = 0; i <= 100; i++) { @@ -703,6 +705,12 @@ test("Modifications", function () { for (var i = 0; i <= 100; i++) { equal(tinycolor("red").darken(i).toHex(), DARKENS[i], "Darken " + i + " works"); } + for (var i = 0; i <= 100; i++) { + equal(tinycolor("red").tint(i).toHex(), TINTS[i], "Tint " + i + " works"); + } + for (var i = 0; i <= 100; i++) { + equal(tinycolor("red").shade(i).toHex(), SHADES[i], "Shade " + i + " works"); + } equal(tinycolor("red").greyscale().toHex(), "808080", "Greyscale works"); }); diff --git a/tinycolor.js b/tinycolor.js index 9580299..71c17fa 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -230,6 +230,12 @@ tinycolor.prototype = { darken: function() { return this._applyModification(darken, arguments); }, + tint: function() { + return this._applyModification(tint, arguments); + }, + shade: function() { + return this._applyModification(shade, arguments); + }, desaturate: function() { return this._applyModification(desaturate, arguments); }, @@ -614,6 +620,16 @@ function darken (color, amount) { return tinycolor(hsl); } +function tint (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + return tinycolor.mix(color, 'white', amount); +} + +function shade (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + return tinycolor.mix(color, 'black', amount); +} + // 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) {