使用js將rgb顏色轉換爲HEX(十六進制顏色)或者將十六進制顏色(HEX)轉化爲rgb顏色

hex和rgb異同

hex的格式:#rrggbb
rgb的格式:reb(255,255,255)可以添加第四個參數用來調整透明度
10用a表示,11用b表示,12用c表示,13用d表示,14用e表示,15用f表示。(也可以用大寫字母表示,這裏用小寫字母。)
十六進制數列:1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,10,11,…,aa,ab,ac,…,fc,fd,fe,ff。
對應的十進制數列:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,…,170,171,172,…,252,253,254,255。
如果我們想直接使用某一個顏色並且存在透明度參數的顏色,顯而易見直接使用hex格式是辦不到的,這時就會想到有沒有什麼辦法將hex格式轉換成rgb,使用rgb的第四個參數直接實現我們的需求。上代碼

export const hexToRg = (hex: string, opacity?: number) => {
  // 當opacity存在說明要將hex -> rgba否則hex -> rgb
  if (hex) {
    const temp = `${parseInt(`0x${hex.slice(1, 3)}`)},${
      // eslint-disable-next-line radix
      parseInt(`0x${hex.slice(3, 5)}`)
      // eslint-disable-next-line radix
    },${parseInt(`0x${hex.slice(5, 7)}`)}`
    if (!opacity) {
      return `rgb(${temp})`
    }
    return `rgb(${temp},${opacity})`
  }
  return ''
}

生活就是不斷的積累, 奧力給!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章