color.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /**
  2. * 16进制转rgb
  3. * @param {String} color
  4. * @returns {String}
  5. */
  6. export const hex2rgb = (color) => {
  7. var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  8. var sColor = color.toLowerCase()
  9. if (sColor && reg.test(sColor)) {
  10. if (sColor.length === 4) {
  11. var sColorNew = "#"
  12. for (var i = 1; i < 4; i += 1) {
  13. sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
  14. }
  15. sColor = sColorNew
  16. }
  17. //处理六位的颜色值
  18. var sColorChange = [];
  19. for (var i = 1; i <= 6; i += 2) {
  20. sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
  21. }
  22. return "rgba(" + sColorChange.join(",") + ")"
  23. } else {
  24. return sColor
  25. }
  26. }
  27. // rbg带透明度转16进制
  28. export const rgb2hex = (color) => {
  29. var values = color
  30. .replace(/rgba?\(/, '')
  31. .replace(/\)/, '')
  32. .replace(/[\s+]/g, '')
  33. .split(',')
  34. var a = parseFloat(values[3] || 1),
  35. r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
  36. g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
  37. b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
  38. return "#" +
  39. ("0" + r.toString(16)).slice(-2) +
  40. ("0" + g.toString(16)).slice(-2) +
  41. ("0" + b.toString(16)).slice(-2)
  42. }
  43. // 16进制转换rgb,并设置透明度
  44. export const hex2rgba = (color, opacity) => {
  45. var theColor = color.toLowerCase()
  46. //十六进制颜色值的正则表达式
  47. var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  48. // 如果是16进制颜色
  49. if (theColor && r.test(theColor)) {
  50. if (theColor.length === 4) {
  51. var sColorNew = "#"
  52. for (var i = 1; i < 4; i += 1) {
  53. sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1))
  54. }
  55. theColor = sColorNew
  56. }
  57. //处理六位的颜色值
  58. var sColorChange = []
  59. for (var i = 1; i < 7; i += 2) {
  60. sColorChange.push(parseInt("0x" + theColor.slice(i, i + 2)))
  61. }
  62. return "rgba(" + sColorChange.join(",") + "," + opacity + ")"
  63. }
  64. return theColor
  65. }