If input is an object, force 1 into "1.0" to handle ratios properly String input requires "1.0" as input, so 1 will be treated as 1
tinycolor.fromRatio = function(color, opts) {
@@ -414,90 +466,65 @@
};Thanks to less.js for some of the basics here -https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js
tinycolor.desaturate = function (color, amount) {
+https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js function desaturate(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s -= amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
-};
-tinycolor.saturate = function (color, amount) {
+}
+
+function saturate(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s += amount / 100;
hsl.s = clamp01(hsl.s);
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);
var hsl = tinycolor(color).toHsl();
hsl.l += amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
-};
-tinycolor.brighten = 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);
-};
-tinycolor.darken = function (color, amount) {
+}
+
+function darken (color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l -= amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
-};
-tinycolor.complement = function(color) {
- var hsl = tinycolor(color).toHsl();
- hsl.h = (hsl.h + 180) % 360;
- return tinycolor(hsl);
-};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.
tinycolor.spin = function(color, 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) {
var hsl = tinycolor(color).toHsl();
var hue = (mathRound(hsl.h) + amount) % 360;
hsl.h = hue < 0 ? 360 + hue : hue;
return tinycolor(hsl);
-};
-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);
-};Thanks to jQuery xColor for some of the ideas behind these -https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
tinycolor.triad = function(color) {
+https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js 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;
return [
@@ -505,8 +532,9 @@
tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
];
-};
-tinycolor.tetrad = function(color) {
+}
+
+function tetrad(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
@@ -515,8 +543,9 @@
tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
];
-};
-tinycolor.splitcomplement = function(color) {
+}
+
+function splitcomplement(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
@@ -524,8 +553,9 @@
tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
];
-};
-tinycolor.analogous = function(color, results, slices) {
+}
+
+function analogous(color, results, slices) {
results = results || 6;
slices = slices || 30;
@@ -538,8 +568,9 @@
ret.push(tinycolor(hsl));
}
return ret;
-};
-tinycolor.monochromatic = function(color, results) {
+}
+
+function monochromatic(color, results) {
results = results || 6;
var hsv = tinycolor(color).toHsv();
var h = hsv.h, s = hsv.s, v = hsv.v;
@@ -552,9 +583,39 @@
}
return ret;
-};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);
+};readability
+
readability
Analyze the 2 colors and returns an object with the following properties:
brightness: difference in brightness between the two colors
color: difference in color/hue between the two colors
tinycolor.readability = function(color1, color2) {
@@ -574,14 +635,14 @@
brightness: Math.abs(brightnessA - brightnessB),
color: colorDiff
};
-};readable
+};
readable
http://www.w3.org/TR/AERT#color-contrast
Ensure that foreground and background color combinations provide sufficient contrast.
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);
return readability.brightness > 125 && readability.color > 500;
-};mostReadable
+};
mostReadable
Given a base color and a list of possible foreground or background
colors for that base, returns the most readable color.
Example
@@ -589,7 +650,7 @@
var bestColor = null;
var bestScore = 0;
var bestIsReadable = false;
- for (var i=0; i < colorList.length; i++) {
We normalize both around the "acceptable" breaking point, + for (var i=0; i < colorList.length; i++) {
We normalize both around the "acceptable" breaking point, but rank brightness constrast higher than hue.
var readability = tinycolor.readability(baseColor, colorList[i]);
var readable = readability.brightness > 125 && readability.color > 500;
var score = 3 * (readability.brightness / 125) + (readability.color / 500);
@@ -603,7 +664,7 @@
}
}
return bestColor;
-};var names = tinycolor.names = {
aliceblue: "f0f8ff",
@@ -754,7 +815,7 @@
whitesmoke: "f5f5f5",
yellow: "ff0",
yellowgreen: "9acd32"
-};Make it easy to access colors via hexNames[hex]
var hexNames = tinycolor.hexNames = flip(names);{ 'name1': 'val1' } becomes { 'val1': 'name1' }
function flip(o) {
+};Make it easy to access colors via hexNames[hex]
var hexNames = tinycolor.hexNames = flip(names);{ 'name1': 'val1' } becomes { 'val1': 'name1' }
function flip(o) {
var flipped = { };
for (var i in o) {
if (o.hasOwnProperty(i)) {
@@ -762,7 +823,7 @@
}
}
return flipped;
-}Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
+}Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
a = parseFloat(a);
if (isNaN(a) || a < 0 || a > 1) {
@@ -770,39 +831,39 @@
}
return a;
-}Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
+}Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
if (isOnePointZero(n)) { n = "100%"; }
var processPercent = isPercentage(n);
- n = mathMin(max, mathMax(0, parseFloat(n)));Automatically convert percentage into number
if (processPercent) {
+ n = mathMin(max, mathMax(0, parseFloat(n)));Automatically convert percentage into number
if (processPercent) {
n = parseInt(n * max, 10) / 100;
- }Handle floating point rounding errors
if ((math.abs(n - max) < 0.000001)) {
+ }Handle floating point rounding errors
if ((math.abs(n - max) < 0.000001)) {
return 1;
- }Convert into [0, 1] range if it isn't already
return (n % max) / parseFloat(max);
-}Force a number between 0 and 1
function clamp01(val) {
+ }Convert into [0, 1] range if it isn't already
return (n % max) / parseFloat(max);
+}Force a number between 0 and 1
function clamp01(val) {
return mathMin(1, mathMax(0, val));
-}Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
+}Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
return parseInt(val, 16);
-}Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 +}
Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0
function isOnePointZero(n) {
return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
-}Check to see if string passed in is a percentage
function isPercentage(n) {
+}Check to see if string passed in is a percentage
function isPercentage(n) {
return typeof n === "string" && n.indexOf('%') != -1;
-}Force a hex value to have 2 characters
function pad2(c) {
+}Force a hex value to have 2 characters
function pad2(c) {
return c.length == 1 ? '0' + c : '' + c;
-}Replace a decimal with it's percentage value
function convertToPercentage(n) {
+}Replace a decimal with it's percentage value
function convertToPercentage(n) {
if (n <= 1) {
n = (n * 100) + "%";
}
return n;
-}Converts a decimal to a hex value
function convertDecimalToHex(d) {
+}Converts a decimal to a hex value
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
-}Converts a hex value to a decimal
function convertHexToDecimal(h) {
+}Converts a hex value to a decimal
function convertHexToDecimal(h) {
return (parseIntFromHex(h) / 255);
}
-var matchers = (function() { var CSS_INTEGER = "[-\\+]?\\d+%?"; var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";Actual matching. +var matchers = (function() {
var CSS_INTEGER = "[-\\+]?\\d+%?"; var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";Actual matching. Parentheses and commas are optional, but not required. Whitespace can take the place of commas or opening paren
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
@@ -817,7 +878,7 @@
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})$/
};
-})();stringInputToObject
+})();
stringInputToObject
Permissive string parsing. Take in a number of formats, and output an object
based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v}
function stringInputToObject(color) {
@@ -829,7 +890,7 @@
}
else if (color == 'transparent') {
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
- }Try to match string input using regular expressions. + }
Try to match string input using regular expressions. Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] Just return an object and let the conversion functions handle that. This way the result will be the same whether the tinycolor is initialized with string or object.
var match;
@@ -875,11 +936,11 @@
}
return false;
-}Node: Export function
if (typeof module !== "undefined" && module.exports) {
+}Node: Export function
if (typeof module !== "undefined" && module.exports) {
module.exports = tinycolor;
-}AMD/requirejs: Define the module
else if (typeof define === 'function' && define.amd) {
+}AMD/requirejs: Define the module
else if (typeof define === 'function' && define.amd) {
define(function () {return tinycolor;});
-}Browser: Expose to window
else {
+}Browser: Expose to window
else {
window.tinycolor = tinycolor;
}