769f04029903ce60441db4f169a864309ec4f77b1119ce257646c0efecfcff90ec40d2e36de0c6e131e38e1d8120b53bf566bc7b1f686dd395a34272baa9c3 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /*
  2. ## Color
  3. http://llllll.li/randomColor/
  4. A color generator for JavaScript.
  5. randomColor generates attractive colors by default. More specifically, randomColor produces bright colors with a reasonably high saturation. This makes randomColor particularly useful for data visualizations and generative art.
  6. http://randomcolour.com/
  7. var bg_colour = Math.floor(Math.random() * 16777215).toString(16);
  8. bg_colour = "#" + ("000000" + bg_colour).slice(-6);
  9. document.bgColor = bg_colour;
  10. http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
  11. Creating random colors is actually more difficult than it seems. The randomness itself is easy, but aesthetically pleasing randomness is more difficult.
  12. https://github.com/devongovett/color-generator
  13. http://www.paulirish.com/2009/random-hex-color-code-snippets/
  14. Random Hex Color Code Generator in JavaScript
  15. http://chancejs.com/#color
  16. chance.color()
  17. // => '#79c157'
  18. chance.color({format: 'hex'})
  19. // => '#d67118'
  20. chance.color({format: 'shorthex'})
  21. // => '#60f'
  22. chance.color({format: 'rgb'})
  23. // => 'rgb(110,52,164)'
  24. http://tool.c7sky.com/webcolor
  25. 网页设计常用色彩搭配表
  26. https://github.com/One-com/one-color
  27. An OO-based JavaScript color parser/computation toolkit with support for RGB, HSV, HSL, CMYK, and alpha channels.
  28. API 很赞
  29. https://github.com/harthur/color
  30. JavaScript color conversion and manipulation library
  31. https://github.com/leaverou/css-colors
  32. Share & convert CSS colors
  33. http://leaverou.github.io/css-colors/#slategray
  34. Type a CSS color keyword, #hex, hsl(), rgba(), whatever:
  35. 色调 hue
  36. http://baike.baidu.com/view/23368.htm
  37. 色调指的是一幅画中画面色彩的总体倾向,是大的色彩效果。
  38. 饱和度 saturation
  39. http://baike.baidu.com/view/189644.htm
  40. 饱和度是指色彩的鲜艳程度,也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越大;消色成分越大,饱和度越小。
  41. 亮度 brightness
  42. http://baike.baidu.com/view/34773.htm
  43. 亮度是指发光体(反光体)表面发光(反光)强弱的物理量。
  44. 照度 luminosity
  45. 物体被照亮的程度,采用单位面积所接受的光通量来表示,表示单位为勒[克斯](Lux,lx) ,即 1m / m2 。
  46. http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
  47. var letters = '0123456789ABCDEF'.split('')
  48. var color = '#'
  49. for (var i = 0; i < 6; i++) {
  50. color += letters[Math.floor(Math.random() * 16)]
  51. }
  52. return color
  53. // 随机生成一个无脑的颜色,格式为 '#RRGGBB'。
  54. // _brainlessColor()
  55. var color = Math.floor(
  56. Math.random() *
  57. (16 * 16 * 16 * 16 * 16 * 16 - 1)
  58. ).toString(16)
  59. color = "#" + ("000000" + color).slice(-6)
  60. return color.toUpperCase()
  61. */
  62. var Convert = require('./color_convert')
  63. var DICT = require('./color_dict')
  64. module.exports = {
  65. // 随机生成一个有吸引力的颜色,格式为 '#RRGGBB'。
  66. color: function(name) {
  67. if (name || DICT[name]) return DICT[name].nicer
  68. return this.hex()
  69. },
  70. // #DAC0DE
  71. hex: function() {
  72. var hsv = this._goldenRatioColor()
  73. var rgb = Convert.hsv2rgb(hsv)
  74. var hex = Convert.rgb2hex(rgb[0], rgb[1], rgb[2])
  75. return hex
  76. },
  77. // rgb(128,255,255)
  78. rgb: function() {
  79. var hsv = this._goldenRatioColor()
  80. var rgb = Convert.hsv2rgb(hsv)
  81. return 'rgb(' +
  82. parseInt(rgb[0], 10) + ', ' +
  83. parseInt(rgb[1], 10) + ', ' +
  84. parseInt(rgb[2], 10) + ')'
  85. },
  86. // rgba(128,255,255,0.3)
  87. rgba: function() {
  88. var hsv = this._goldenRatioColor()
  89. var rgb = Convert.hsv2rgb(hsv)
  90. return 'rgba(' +
  91. parseInt(rgb[0], 10) + ', ' +
  92. parseInt(rgb[1], 10) + ', ' +
  93. parseInt(rgb[2], 10) + ', ' +
  94. Math.random().toFixed(2) + ')'
  95. },
  96. // hsl(300,80%,90%)
  97. hsl: function() {
  98. var hsv = this._goldenRatioColor()
  99. var hsl = Convert.hsv2hsl(hsv)
  100. return 'hsl(' +
  101. parseInt(hsl[0], 10) + ', ' +
  102. parseInt(hsl[1], 10) + ', ' +
  103. parseInt(hsl[2], 10) + ')'
  104. },
  105. // http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
  106. // https://github.com/devongovett/color-generator/blob/master/index.js
  107. // 随机生成一个有吸引力的颜色。
  108. _goldenRatioColor: function(saturation, value) {
  109. this._goldenRatio = 0.618033988749895
  110. this._hue = this._hue || Math.random()
  111. this._hue += this._goldenRatio
  112. this._hue %= 1
  113. if (typeof saturation !== "number") saturation = 0.5;
  114. if (typeof value !== "number") value = 0.95;
  115. return [
  116. this._hue * 360,
  117. saturation * 100,
  118. value * 100
  119. ]
  120. }
  121. }