快捷導(dǎo)航

JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼

更新時間：2024年01月31日 10:45:18 作者：瓜月半

這篇文章主要介紹了JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過示例代碼介紹了JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換問題,感興趣的朋友一起看看吧

JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換

16進(jìn)制轉(zhuǎn) rgb

function hexToRgba(hex, opacity) {
    if (!hex) hex = '#ededed';
    let rgba = 'rgba(' + parseInt('0x' + hex.slice(1,3)) + ',' +
        parseInt('0x' + hex.slice(3,5)) + ',' +
        parseInt('0x' + hex.slice(5,7)) + ',' +
        (opacity || "1") + ')'
    return rgba
}

rgb 轉(zhuǎn) 16進(jìn)制

function RGBToHex(rgb) {
  if (!rgb) rgb = 'rgb(237,237,237)'  
  var regexp = /[0-9]{0,3}/g
  var res = rgb.match(regexp) // 利用正則表達(dá)式去掉多余的部分，將rgb中的數(shù)字提取
  var hexRes = '#'
  var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
  var hexArr = []
  for (let i = 0; i < res.length; i++) {
    if (res[i]) {
      if (res[i] > 16) {
        let leftIndex = (res[i] / 16) >> 0 // 向下取整
        let rightIndex = +res[i] % 16
        hexArr.push(hex[leftIndex])
        hexArr.push(hex[rightIndex])
      } else {
        hexArr.push(0)
        hexArr.push(hex[res[i]])
      }
    }
  }
  return hexRes += hexArr.join('')  // #EDEDED
}

補(bǔ)充：

JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換

1、16進(jìn)制轉(zhuǎn)rgba

16進(jìn)制顏色模版

轉(zhuǎn)換代碼

function hexToRgba(hex){
        const rgba = [];
        hex = hex.replace('#', '').padEnd(8, 'F');
        for (let i = 0; i < hex.length; i+=2) {
            rgba.push(parseInt(hex.slice(i, i+2), 16))
        }
        return rgba;
    }

2、rgba轉(zhuǎn)16進(jìn)制

function rgbaToHex(rgba){
    let hex = '#';
    for (const i of rgba) {
        hex += i.toString(16).padStart(2, '0');
    }
    return hex;
}

到此這篇關(guān)于JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)js 16進(jìn)制顏色與rgb顏色轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: