colors.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. // Parses a string and returns a valid hex string when possible
  2. // parseHex('#fff') => '#ffffff'
  3. export const parseHex = (string) => {
  4. string = string.replace(/[^A-F0-9]/ig, '');
  5. if (string.length !== 3 && string.length !== 6) return '';
  6. if (string.length === 3) {
  7. string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
  8. }
  9. return '#' + string.toLowerCase();
  10. };
  11. // Converts an HSB object to an RGB object
  12. // hsb2rgb({h: 0, s: 0, b: 100}) => {r: 255, g: 255, b: 255}
  13. export const hsb2rgb = (hsb) => {
  14. let rgb = {};
  15. let h = Math.round(hsb.h);
  16. let s = Math.round(hsb.s * 255 / 100);
  17. let v = Math.round(hsb.b * 255 / 100);
  18. if (s === 0) {
  19. rgb.r = rgb.g = rgb.b = v;
  20. } else {
  21. var t1 = v;
  22. var t2 = (255 - s) * v / 255;
  23. var t3 = (t1 - t2) * (h % 60) / 60;
  24. if (h === 360) h = 0;
  25. if (h < 60) {
  26. rgb.r = t1;
  27. rgb.b = t2;
  28. rgb.g = t2 + t3;
  29. } else if (h < 120) {
  30. rgb.g = t1;
  31. rgb.b = t2;
  32. rgb.r = t1 - t3;
  33. } else if (h < 180) {
  34. rgb.g = t1;
  35. rgb.r = t2;
  36. rgb.b = t2 + t3;
  37. } else if (h < 240) {
  38. rgb.b = t1;
  39. rgb.r = t2;
  40. rgb.g = t1 - t3;
  41. } else if (h < 300) {
  42. rgb.b = t1;
  43. rgb.g = t2;
  44. rgb.r = t2 + t3;
  45. } else if (h < 360) {
  46. rgb.r = t1;
  47. rgb.g = t2;
  48. rgb.b = t1 - t3;
  49. } else {
  50. rgb.r = 0;
  51. rgb.g = 0;
  52. rgb.b = 0;
  53. }
  54. }
  55. return {
  56. r: Math.round(rgb.r),
  57. g: Math.round(rgb.g),
  58. b: Math.round(rgb.b)
  59. };
  60. };
  61. // Converts an RGB object to a HEX string
  62. // rgb2hex({r: 255, g: 255, b: 255}) => #ffffff
  63. export const rgb2hex = (rgb) => {
  64. var hex = [
  65. rgb.r.toString(16),
  66. rgb.g.toString(16),
  67. rgb.b.toString(16)
  68. ];
  69. hex.forEach((val, nr) => {
  70. if (val.length === 1) hex[nr] = '0' + val;
  71. });
  72. return '#' + hex.join('');
  73. };
  74. // Converts and RGB(a) string to a HEX string
  75. // rgbstr2hex('rgba(255, 255, 255, 0.5)') => #ffffff
  76. export const rgbstr2hex = (rgb) => {
  77. rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
  78. return (rgb && rgb.length === 4) ? '#' +
  79. ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
  80. ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
  81. ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
  82. };
  83. // Converts an HSB object to a HEX string
  84. // hsb2hex({h: 0, s: 0, b: 100}) => #ffffff
  85. export const hsb2hex = (hsb) => {
  86. return rgb2hex(hsb2rgb(hsb));
  87. };
  88. // Converts a HEX string to an HSB object
  89. // hex2hsb('#ffffff') => {h: 0, s: 0, b: 100}
  90. export const hex2hsb = (hex) => {
  91. let hsb = rgb2hsb(hex2rgb(hex));
  92. if (hsb.s === 0) hsb.h = 360;
  93. return hsb;
  94. };
  95. // Converts an RGB object to an HSB object
  96. // rgb2hsb({r: 255, g: 255, b: 255}) => {h: 0, s: 0, b: 100}
  97. export const rgb2hsb = (rgb) => {
  98. let hsb = {
  99. h: 0,
  100. s: 0,
  101. b: 0
  102. };
  103. let min = Math.min(rgb.r, rgb.g, rgb.b);
  104. let max = Math.max(rgb.r, rgb.g, rgb.b);
  105. let delta = max - min;
  106. hsb.b = max;
  107. hsb.s = max !== 0 ? 255 * delta / max : 0;
  108. if (hsb.s !== 0) {
  109. if (rgb.r === max) {
  110. hsb.h = (rgb.g - rgb.b) / delta;
  111. } else if (rgb.g === max) {
  112. hsb.h = 2 + (rgb.b - rgb.r) / delta;
  113. } else {
  114. hsb.h = 4 + (rgb.r - rgb.g) / delta;
  115. }
  116. } else {
  117. hsb.h = -1;
  118. }
  119. hsb.h *= 60;
  120. if (hsb.h < 0) {
  121. hsb.h += 360;
  122. }
  123. hsb.s *= 100 / 255;
  124. hsb.b *= 100 / 255;
  125. return hsb;
  126. };
  127. // Converts a HEX string to an RGB object
  128. // hex2rgb('#ffffff') => {r: 255, g: 255, b: 255}
  129. export const hex2rgb = (hex) => {
  130. hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
  131. return {
  132. /* jshint ignore:start */
  133. r: hex >> 16,
  134. g: (hex & 0x00FF00) >> 8,
  135. b: (hex & 0x0000FF)
  136. /* jshint ignore:end */
  137. };
  138. };