diff --git a/README.md b/README.md index 165777a..4c260a1 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ TinyColor is a small, fast library for color manipulation and conversion in Java ## Including in a browser -Download [tinycolor.js](https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js) or install it with bower: +Download [tinycolor.js](tinycolor.js?raw=true) or install it with bower: bower install tinycolor @@ -50,13 +50,20 @@ Here are some examples of string input: ```js tinycolor("#000"); tinycolor("000"); -tinycolor("#369C"); +tinycolor("#"); tinycolor("369C"); tinycolor("#f0f0f6"); tinycolor("f0f0f6"); tinycolor("#f0f0f688"); tinycolor("f0f0f688"); ``` +### Hex (Argb), 8-digit (ARGB) Hex +```js +tinycolor("#C369", {"hex8Argb":true}); +tinycolor("C369", {"hex8Argb":true}); +tinycolor("#88f0f0f6", {"hex8Argb":true}); +tinycolor("88f0f0f6", {"hex8Argb":true}); +``` ### RGB, RGBA ```js tinycolor("rgb (255, 0, 0)"); @@ -246,6 +253,16 @@ color.toHex8(); // "ff0000ff" var color = tinycolor("red"); color.toHex8String(); // "#ff0000ff" ``` +### toHex8Argb +```js +var color = tinycolor("red"); +color.toHex8Argb(); // "ffff0000" +``` +### toHex8ArgbString +```js +var color = tinycolor("red"); +color.toHex8ArgbString(); // "#ffff0000" +``` ### toRgb ```js var color = tinycolor("red"); @@ -451,7 +468,7 @@ tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).to 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. +See [index.html](index.html) in the project for a demo. ## Common operations diff --git a/tinycolor.js b/tinycolor.js index 9580299..d0f8d33 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -1,4 +1,4 @@ -// TinyColor v1.4.1 +// TinyColor v1.4.2 // https://github.com/bgrins/TinyColor // Brian Grinstead, MIT License @@ -25,14 +25,20 @@ function tinycolor (color, opts) { if (!(this instanceof tinycolor)) { return new tinycolor(color, opts); } - - var rgb = inputToRGB(color); + var rgb; + + if(opts.hex8Argb){ + rgb = stringHexArgbInputToObject(color); + } else { + rgb = inputToRGB(color); + } + this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, - this._roundA = mathRound(100*this._a) / 100, + this._roundA = mathRound(1000*this._a) / 1000, this._format = opts.format || rgb.format; this._gradientType = opts.gradientType; @@ -87,9 +93,14 @@ tinycolor.prototype = { }, setAlpha: function(value) { this._a = boundAlpha(value); - this._roundA = mathRound(100*this._a) / 100; + this._roundA = mathRound(1000*this._a) / 1000; return this; }, + toArgbString: function() { + return (typeof this._a === "undefined" || this._a == 1) ? + "argb(1, " + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : + "argb(" + parseIntFromHex(convertDecimalToHex(this._a)) + ", " + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")"; + }, toHsv: function() { var hsv = rgbToHsv(this._r, this._g, this._b); return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; @@ -124,14 +135,25 @@ tinycolor.prototype = { toHex8String: function(allow4Char) { return '#' + this.toHex8(allow4Char); }, + toHex8Argb: function(allow4Char) { + return rgbaToArgbHex(this._r, this._g, this._b,this._a); + }, + toHex8ArgbString: function(allow4Char) { + return '#' + this.toHex8Argb(allow4Char); + }, toRgb: function() { return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; }, toRgbString: function() { - return (this._a == 1) ? + return (typeof this._a === "undefined" || this._a == 1) ? "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; }, + toRgbaString: function() { + return (typeof this._a === "undefined" || this._a == 1) ? + "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", 1)" : + "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; + }, toPercentageRgb: function() { return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; }, @@ -353,8 +375,8 @@ function inputToRGB(color) { a: a }; } - - + + // Conversion Functions // -------------------- @@ -1067,6 +1089,7 @@ var matchers = (function() { return { CSS_UNIT: new RegExp(CSS_UNIT), + argb: new RegExp("argb" + PERMISSIVE_MATCH4), rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), @@ -1107,6 +1130,9 @@ function stringInputToObject(color) { // 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; + if ((match = matchers.argb.exec(color))) { + return { a: (match[1] / 255), r: match[2], g: match[3], b: match[4] }; + } if ((match = matchers.rgb.exec(color))) { return { r: match[1], g: match[2], b: match[3] }; } @@ -1163,6 +1189,54 @@ function stringInputToObject(color) { return false; } +// `stringHexArgbInputToObject` +// 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 stringHexArgbInputToObject(color) { + + // 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; + if ((match = matchers.hex8.exec(color))) { + return { + r: parseIntFromHex(match[2]), + g: parseIntFromHex(match[3]), + b: parseIntFromHex(match[4]), + a: convertHexToDecimal(match[1]), + format: "hex8" + }; + } + if ((match = matchers.hex6.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + format: "hex" + }; + } + if ((match = matchers.hex4.exec(color))) { + return { + r: parseIntFromHex(match[2] + '' + match[1]), + g: parseIntFromHex(match[3] + '' + match[2]), + b: parseIntFromHex(match[4] + '' + match[3]), + a: convertHexToDecimal(match[1] + '' + match[4]), + format: "hex8" + }; + } + if ((match = matchers.hex3.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + format: named ? "name" : "hex" + }; + } + + return false; +} + function validateWCAG2Parms(parms) { // return valid WCAG2 parms for isReadable. // If input parms are invalid, return {"level":"AA", "size":"small"}