使用js 如何把 rgb 颜色的值转换成16进制 “#” 的值

最新推荐文章于 2024-05-30 16:35:50 发布

京城烟雨灬落

最新推荐文章于 2024-05-30 16:35:50 发布

阅读量1.2k

点赞数 2

分类专栏： js方法 vue 知识文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42174597/article/details/132480296

版权

vue 知识同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

js方法

15 篇文章 1 订阅

订阅专栏

1，最近遇到一个需求就是需要把rgb的颜色来转成 16进制的# 颜色，思考半天最后还是决定用正则来解决了。

例如把 rgb(254, 204, 205) 转成 # FECCCD，代码如下：

        //转换颜色  把rgb 转成 16进制 #
        rgbToHex(rgb) {
          const rgbValues = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
          if (!rgbValues) {
            return '';
          }
          const r = parseInt(rgbValues[1]);
          const g = parseInt(rgbValues[2]);
          const b = parseInt(rgbValues[3]);
          const hex = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
          return hex;
        },

如图调用这个方法（vue）里直接把颜色传进去：

例如: var a = "rgb(254, 204, 205)" this.rgbToHex(a)
得到结果就是 #fecccd。如果需要转成大写可以加上 .toUpperCase() 方法。

转成大写就是 # FECCCD。

如果对您有帮助，还请点个赞，感谢！！！