index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. /* MIT license */
  2. var clone = require('clone');
  3. var convert = require('color-convert');
  4. var string = require('color-string');
  5. var Color = function (obj) {
  6. if (obj instanceof Color) {
  7. return obj;
  8. }
  9. if (!(this instanceof Color)) {
  10. return new Color(obj);
  11. }
  12. this.values = {
  13. rgb: [0, 0, 0],
  14. hsl: [0, 0, 0],
  15. hsv: [0, 0, 0],
  16. hwb: [0, 0, 0],
  17. cmyk: [0, 0, 0, 0],
  18. alpha: 1
  19. };
  20. // parse Color() argument
  21. var vals;
  22. if (typeof obj === 'string') {
  23. vals = string.getRgba(obj);
  24. if (vals) {
  25. this.setValues('rgb', vals);
  26. } else if (vals = string.getHsla(obj)) {
  27. this.setValues('hsl', vals);
  28. } else if (vals = string.getHwb(obj)) {
  29. this.setValues('hwb', vals);
  30. } else {
  31. throw new Error('Unable to parse color from string "' + obj + '"');
  32. }
  33. } else if (typeof obj === 'object') {
  34. vals = obj;
  35. if (vals.r !== undefined || vals.red !== undefined) {
  36. this.setValues('rgb', vals);
  37. } else if (vals.l !== undefined || vals.lightness !== undefined) {
  38. this.setValues('hsl', vals);
  39. } else if (vals.v !== undefined || vals.value !== undefined) {
  40. this.setValues('hsv', vals);
  41. } else if (vals.w !== undefined || vals.whiteness !== undefined) {
  42. this.setValues('hwb', vals);
  43. } else if (vals.c !== undefined || vals.cyan !== undefined) {
  44. this.setValues('cmyk', vals);
  45. } else {
  46. throw new Error('Unable to parse color from object ' + JSON.stringify(obj));
  47. }
  48. }
  49. };
  50. Color.prototype = {
  51. rgb: function () {
  52. return this.setSpace('rgb', arguments);
  53. },
  54. hsl: function () {
  55. return this.setSpace('hsl', arguments);
  56. },
  57. hsv: function () {
  58. return this.setSpace('hsv', arguments);
  59. },
  60. hwb: function () {
  61. return this.setSpace('hwb', arguments);
  62. },
  63. cmyk: function () {
  64. return this.setSpace('cmyk', arguments);
  65. },
  66. rgbArray: function () {
  67. return this.values.rgb;
  68. },
  69. hslArray: function () {
  70. return this.values.hsl;
  71. },
  72. hsvArray: function () {
  73. return this.values.hsv;
  74. },
  75. hwbArray: function () {
  76. if (this.values.alpha !== 1) {
  77. return this.values.hwb.concat([this.values.alpha]);
  78. }
  79. return this.values.hwb;
  80. },
  81. cmykArray: function () {
  82. return this.values.cmyk;
  83. },
  84. rgbaArray: function () {
  85. var rgb = this.values.rgb;
  86. return rgb.concat([this.values.alpha]);
  87. },
  88. rgbaArrayNormalized: function () {
  89. var rgb = this.values.rgb;
  90. var glRgba = [];
  91. for (var i = 0; i < 3; i++) {
  92. glRgba[i] = rgb[i] / 255;
  93. }
  94. glRgba.push(this.values.alpha);
  95. return glRgba;
  96. },
  97. hslaArray: function () {
  98. var hsl = this.values.hsl;
  99. return hsl.concat([this.values.alpha]);
  100. },
  101. alpha: function (val) {
  102. if (val === undefined) {
  103. return this.values.alpha;
  104. }
  105. this.setValues('alpha', val);
  106. return this;
  107. },
  108. red: function (val) {
  109. return this.setChannel('rgb', 0, val);
  110. },
  111. green: function (val) {
  112. return this.setChannel('rgb', 1, val);
  113. },
  114. blue: function (val) {
  115. return this.setChannel('rgb', 2, val);
  116. },
  117. hue: function (val) {
  118. if (val) {
  119. val %= 360;
  120. val = val < 0 ? 360 + val : val;
  121. }
  122. return this.setChannel('hsl', 0, val);
  123. },
  124. saturation: function (val) {
  125. return this.setChannel('hsl', 1, val);
  126. },
  127. lightness: function (val) {
  128. return this.setChannel('hsl', 2, val);
  129. },
  130. saturationv: function (val) {
  131. return this.setChannel('hsv', 1, val);
  132. },
  133. whiteness: function (val) {
  134. return this.setChannel('hwb', 1, val);
  135. },
  136. blackness: function (val) {
  137. return this.setChannel('hwb', 2, val);
  138. },
  139. value: function (val) {
  140. return this.setChannel('hsv', 2, val);
  141. },
  142. cyan: function (val) {
  143. return this.setChannel('cmyk', 0, val);
  144. },
  145. magenta: function (val) {
  146. return this.setChannel('cmyk', 1, val);
  147. },
  148. yellow: function (val) {
  149. return this.setChannel('cmyk', 2, val);
  150. },
  151. black: function (val) {
  152. return this.setChannel('cmyk', 3, val);
  153. },
  154. hexString: function () {
  155. return string.hexString(this.values.rgb);
  156. },
  157. rgbString: function () {
  158. return string.rgbString(this.values.rgb, this.values.alpha);
  159. },
  160. rgbaString: function () {
  161. return string.rgbaString(this.values.rgb, this.values.alpha);
  162. },
  163. percentString: function () {
  164. return string.percentString(this.values.rgb, this.values.alpha);
  165. },
  166. hslString: function () {
  167. return string.hslString(this.values.hsl, this.values.alpha);
  168. },
  169. hslaString: function () {
  170. return string.hslaString(this.values.hsl, this.values.alpha);
  171. },
  172. hwbString: function () {
  173. return string.hwbString(this.values.hwb, this.values.alpha);
  174. },
  175. keyword: function () {
  176. return string.keyword(this.values.rgb, this.values.alpha);
  177. },
  178. rgbNumber: function () {
  179. return (this.values.rgb[0] << 16) | (this.values.rgb[1] << 8) | this.values.rgb[2];
  180. },
  181. luminosity: function () {
  182. // http://www.w3.org/TR/WCAG20/#relativeluminancedef
  183. var rgb = this.values.rgb;
  184. var lum = [];
  185. for (var i = 0; i < rgb.length; i++) {
  186. var chan = rgb[i] / 255;
  187. lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4);
  188. }
  189. return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
  190. },
  191. contrast: function (color2) {
  192. // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
  193. var lum1 = this.luminosity();
  194. var lum2 = color2.luminosity();
  195. if (lum1 > lum2) {
  196. return (lum1 + 0.05) / (lum2 + 0.05);
  197. }
  198. return (lum2 + 0.05) / (lum1 + 0.05);
  199. },
  200. level: function (color2) {
  201. var contrastRatio = this.contrast(color2);
  202. if (contrastRatio >= 7.1) {
  203. return 'AAA';
  204. }
  205. return (contrastRatio >= 4.5) ? 'AA' : '';
  206. },
  207. dark: function () {
  208. // YIQ equation from http://24ways.org/2010/calculating-color-contrast
  209. var rgb = this.values.rgb;
  210. var yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
  211. return yiq < 128;
  212. },
  213. light: function () {
  214. return !this.dark();
  215. },
  216. negate: function () {
  217. var rgb = [];
  218. for (var i = 0; i < 3; i++) {
  219. rgb[i] = 255 - this.values.rgb[i];
  220. }
  221. this.setValues('rgb', rgb);
  222. return this;
  223. },
  224. lighten: function (ratio) {
  225. this.values.hsl[2] += this.values.hsl[2] * ratio;
  226. this.setValues('hsl', this.values.hsl);
  227. return this;
  228. },
  229. darken: function (ratio) {
  230. this.values.hsl[2] -= this.values.hsl[2] * ratio;
  231. this.setValues('hsl', this.values.hsl);
  232. return this;
  233. },
  234. saturate: function (ratio) {
  235. this.values.hsl[1] += this.values.hsl[1] * ratio;
  236. this.setValues('hsl', this.values.hsl);
  237. return this;
  238. },
  239. desaturate: function (ratio) {
  240. this.values.hsl[1] -= this.values.hsl[1] * ratio;
  241. this.setValues('hsl', this.values.hsl);
  242. return this;
  243. },
  244. whiten: function (ratio) {
  245. this.values.hwb[1] += this.values.hwb[1] * ratio;
  246. this.setValues('hwb', this.values.hwb);
  247. return this;
  248. },
  249. blacken: function (ratio) {
  250. this.values.hwb[2] += this.values.hwb[2] * ratio;
  251. this.setValues('hwb', this.values.hwb);
  252. return this;
  253. },
  254. greyscale: function () {
  255. var rgb = this.values.rgb;
  256. // http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
  257. var val = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
  258. this.setValues('rgb', [val, val, val]);
  259. return this;
  260. },
  261. clearer: function (ratio) {
  262. this.setValues('alpha', this.values.alpha - (this.values.alpha * ratio));
  263. return this;
  264. },
  265. opaquer: function (ratio) {
  266. this.setValues('alpha', this.values.alpha + (this.values.alpha * ratio));
  267. return this;
  268. },
  269. rotate: function (degrees) {
  270. var hue = this.values.hsl[0];
  271. hue = (hue + degrees) % 360;
  272. hue = hue < 0 ? 360 + hue : hue;
  273. this.values.hsl[0] = hue;
  274. this.setValues('hsl', this.values.hsl);
  275. return this;
  276. },
  277. /**
  278. * Ported from sass implementation in C
  279. * https://github.com/sass/libsass/blob/0e6b4a2850092356aa3ece07c6b249f0221caced/functions.cpp#L209
  280. */
  281. mix: function (mixinColor, weight) {
  282. var color1 = this;
  283. var color2 = mixinColor;
  284. var p = weight === undefined ? 0.5 : weight;
  285. var w = 2 * p - 1;
  286. var a = color1.alpha() - color2.alpha();
  287. var w1 = (((w * a === -1) ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
  288. var w2 = 1 - w1;
  289. return this
  290. .rgb(
  291. w1 * color1.red() + w2 * color2.red(),
  292. w1 * color1.green() + w2 * color2.green(),
  293. w1 * color1.blue() + w2 * color2.blue()
  294. )
  295. .alpha(color1.alpha() * p + color2.alpha() * (1 - p));
  296. },
  297. toJSON: function () {
  298. return this.rgb();
  299. },
  300. clone: function () {
  301. var col = new Color();
  302. col.values = clone(this.values);
  303. return col;
  304. }
  305. };
  306. Color.prototype.getValues = function (space) {
  307. var vals = {};
  308. for (var i = 0; i < space.length; i++) {
  309. vals[space.charAt(i)] = this.values[space][i];
  310. }
  311. if (this.values.alpha !== 1) {
  312. vals.a = this.values.alpha;
  313. }
  314. // {r: 255, g: 255, b: 255, a: 0.4}
  315. return vals;
  316. };
  317. Color.prototype.setValues = function (space, vals) {
  318. var spaces = {
  319. rgb: ['red', 'green', 'blue'],
  320. hsl: ['hue', 'saturation', 'lightness'],
  321. hsv: ['hue', 'saturation', 'value'],
  322. hwb: ['hue', 'whiteness', 'blackness'],
  323. cmyk: ['cyan', 'magenta', 'yellow', 'black']
  324. };
  325. var maxes = {
  326. rgb: [255, 255, 255],
  327. hsl: [360, 100, 100],
  328. hsv: [360, 100, 100],
  329. hwb: [360, 100, 100],
  330. cmyk: [100, 100, 100, 100]
  331. };
  332. var i;
  333. var alpha = 1;
  334. if (space === 'alpha') {
  335. alpha = vals;
  336. } else if (vals.length) {
  337. // [10, 10, 10]
  338. this.values[space] = vals.slice(0, space.length);
  339. alpha = vals[space.length];
  340. } else if (vals[space.charAt(0)] !== undefined) {
  341. // {r: 10, g: 10, b: 10}
  342. for (i = 0; i < space.length; i++) {
  343. this.values[space][i] = vals[space.charAt(i)];
  344. }
  345. alpha = vals.a;
  346. } else if (vals[spaces[space][0]] !== undefined) {
  347. // {red: 10, green: 10, blue: 10}
  348. var chans = spaces[space];
  349. for (i = 0; i < space.length; i++) {
  350. this.values[space][i] = vals[chans[i]];
  351. }
  352. alpha = vals.alpha;
  353. }
  354. this.values.alpha = Math.max(0, Math.min(1, (alpha === undefined ? this.values.alpha : alpha)));
  355. if (space === 'alpha') {
  356. return false;
  357. }
  358. var capped;
  359. // cap values of the space prior converting all values
  360. for (i = 0; i < space.length; i++) {
  361. capped = Math.max(0, Math.min(maxes[space][i], this.values[space][i]));
  362. this.values[space][i] = Math.round(capped);
  363. }
  364. // convert to all the other color spaces
  365. for (var sname in spaces) {
  366. if (sname !== space) {
  367. this.values[sname] = convert[space][sname](this.values[space]);
  368. }
  369. // cap values
  370. for (i = 0; i < sname.length; i++) {
  371. capped = Math.max(0, Math.min(maxes[sname][i], this.values[sname][i]));
  372. this.values[sname][i] = Math.round(capped);
  373. }
  374. }
  375. return true;
  376. };
  377. Color.prototype.setSpace = function (space, args) {
  378. var vals = args[0];
  379. if (vals === undefined) {
  380. // color.rgb()
  381. return this.getValues(space);
  382. }
  383. // color.rgb(10, 10, 10)
  384. if (typeof vals === 'number') {
  385. vals = Array.prototype.slice.call(args);
  386. }
  387. this.setValues(space, vals);
  388. return this;
  389. };
  390. Color.prototype.setChannel = function (space, index, val) {
  391. if (val === undefined) {
  392. // color.red()
  393. return this.values[space][index];
  394. } else if (val === this.values[space][index]) {
  395. // color.red(color.red())
  396. return this;
  397. }
  398. // color.red(100)
  399. this.values[space][index] = val;
  400. this.setValues(space, this.values[space]);
  401. return this;
  402. };
  403. module.exports = Color;