JS实现十六进制颜色值（HEX）和RGB格式相互转换

吃素的黑猫

已于 2023-11-25 18:21:16 修改

阅读量678

点赞数

分类专栏： Web开发——JS 文章标签： javascript 前端开发语言

于 2023-11-25 17:22:38 首次发布

本文链接：https://blog.csdn.net/qq_44645934/article/details/134617398

版权

Web开发——JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS实现十六进制颜色值（HEX）和RGB格式相互转换

        /**
         * 将颜色值rgb格式转换为HEX的格式
         * @param {rgb} rgb 需要转换的rgb字符串
         * @return {string}  ;
         */
        function rgbToHex(rgb) {
          let arr = rgb
            .replace("rgb", "")
            .replace("(", "")
            .replace(")", "")
            .split(",");
          // 转十六进制
          let h = parseInt(arr[0]).toString(16);
          let e = parseInt(arr[1]).toString(16);
          let x = parseInt(arr[2]).toString(16);
          return "#" + h + e + x;
        }
        let rgb = "rgb(33,44,55)";
        console.log(rgbToHex(rgb));

        /**
         * 将颜色值HEX格式转换为rgb的格式
         * @param {hex} hex 需要转换的rgb字符串
         * @return {string}  ;
         */
        function hexToRgb(hex) {
          let str = hex.replace("#", "");
          if (str.length % 3) {
            return "hex格式不正确！";
          }
          //获取截取的字符长度
          let count = str.length / 3;
          //根据字符串的长度判断是否需要 进行幂次方
          let power = 6 / str.length;
          let r = parseInt("0x" + str.substring(0 * count, 1 * count)) ** power;
          let g = parseInt("0x" + str.substring(1 * count, 2 * count)) ** power;
          let b = parseInt("0x" + str.substring(2 * count)) ** power;

          return `rgb(${r}, ${g}, ${b})`;
        }
        let hex = "#212c37";
        console.log(hexToRgb(hex));