js 实现颜色值格式转换 rgb 和十六进制的转换

最新推荐文章于 2023-09-02 11:20:16 发布

初遇你时动了情

最新推荐文章于 2023-09-02 11:20:16 发布

阅读量672

点赞数

分类专栏： uniapp 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/u010843503/article/details/130425299

版权

uniapp 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这里再 csdn 上看到的这里作为记录，并根据评论修复了一个补 0 的 bug

js 实现颜色值格式转换 rgb 和十六进制的转换

RGB 转换为 16 进制

String.prototype.colorHex = function () {
  // RGB颜色值的正则
  var reg = /^(rgb|RGB)/;
  var color = this;
  if (reg.test(color)) {
    var strHex = "#";
    // 把RGB的3个数值变成数组
    var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    // 转成16进制
    for (var i = 0; i < colorArr.length; i++) {
      var hex = Number(colorArr[i]).toString(16);
      if (hex === "0") {
        hex += hex;
      }
	  hex = hex.length == 1 ? '0' + hex : hex;
      strHex += hex;
    }
    return strHex;
  } else {
    return String(color);
  }
};
使用方法 "rgb(255,255,255)".colorHex();  // #ffffff

16 进制转换为 RGB

String.prototype.colorRgb = function () {
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = this.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "RGB(" + colorChange.join(",") + ")";
  } else {
    return color;
  }
};
使用方法 "#fff".colorRgb();  // rgb(255,255,255)
"#ffffff".colorRgb();  // rgb(255,255,255)