美文网首页
js rgb转hex

js rgb转hex

作者: 时光浅影 | 来源:发表于2022-07-03 15:24 被阅读0次
        colorRgbToHex(rgb) {
                    let res = rgb.toString().split(',')
                    let r = res[0]
                    let g = res[1]
                    let b = res[2]
                    let _rgb = 'rgb(' + r + ',' + g +','+ b + ')'
                    return this.rgbToHex(_rgb);
                },
                rgbToHex(rgb) {
                    var bg = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    
                    function hex(x) {
                        return ("0" + parseInt(x).toString(16)).slice(-2);
                    }
                    return ("#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3])).toUpperCase();
                }
    
    console.log(this.rgbToHex('rgb(204,0,255)'));
    
    <view class="num-item" v-for="(rgb,i) in list" :key="i" :style="{'background':  colorRgbToHex(rgb)}">
                {{rgb}}
            </view>
    

    hex转rgb

    function hexToRgb (hex) {
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
      });
    
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? 'rgb(' + [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16)
      ].join(',') + ')' : hex;
    }
     
    console.log(hexToRgb('#C0F'));    // Output: rgb(204,0,255)
    console.log(hexToRgb('#CC00FF')); // Output: rgb(204,0,255)
    

    hex 转rgba

    function hexToRgba (hex, opacity) {
      var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
      hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
      });
    
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      opacity = opacity >= 0 && opacity <= 1 ? Number(opacity) : 1;
      return result ? 'rgba(' + [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16),
        opacity
      ].join(',') + ')' : hex;
    }
     
    console.log(hexToRgba('#C0F'));         // Output: rgb(204,0,255,1)
    console.log(hexToRgba('#CC00FF', 0.3)); // Output: rgb(204,0,255,0.3)
    

    rgb 转hex

    function rgbToHex (rgb) {
      var bg = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
      function hex (x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
      }
      return ("#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3])).toUpperCase();
    }
     
    console.log(rgbToHex('rgb(204,0,255)')); // Output: #CC00FF
    

    rgba 转hex

    function rgbaToHex(rgba) {
      var bg = rgba.match(/^rgb\((\d+),\s*(\d+),\s*(\d+),\s*(\d?(\d|(\.[1-9]{1,2})))\)$/);
      function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
      }
      return ("#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3])).toUpperCase();
    }
     
    console.log(rgbaToHex('rgb(204,0,255,1)'));   // Output: #CC00FF
    console.log(rgbaToHex('rgb(204,0,255,0.1)')); // Output: #CC00FF
    

    相关文章

      网友评论

          本文标题:js rgb转hex

          本文链接:https://www.haomeiwen.com/subject/biolbrtx.html