RGB以及RGBA

字母含義及取值

R：紅色。0~255 整數
G：綠色。0~255 整數
B：藍色。0~255 整數
A：透明度。0~1。整數或者小數

RGB和RGBA的關系

項目遇見一個需求，后台返回所占比例，前端根據比例漸變渲染元素背景色

剛聽見這個需求的時候，也沒有想到更改透明度，第一反應是根據比例計算R，G，B對應的值。
主色調 R = 96, G = 195, B = 248 （范圍為0~255）
所占比例為X

RGB(R*X,G*X,B*X)

實際效果，比例越小，顏色越深

RGB(R*(1-X),G*(1-X),B*(1-X))

那更改一下比例，實際效果，雖然比例小的顏色最淺，可是呈現出按主色調加深的漸變，不符合需求。

一直到這里，自己都沒有認真的思考過顏色的漸變到底是怎么實現的，所以暫時放棄了這種方式，選擇用RGBA，控制透明度實現漸變

RGBA(R,G,B,A*X)

完美的滿足了需求

但是用吸色工具取值，會得到一個對應的RGB值

於是有些執着於找他們的關系
男票是做繪畫相關的，我問他時，他這樣答,'色盤里面隨便選，誰管他們的關系'。成年人的生活，真是怎么簡單怎么來。不過他提醒了我一句，用透明度后就和你底層背景色有關系了，就比如背景色是白色的，當前顏色透明度是30%，顯示出來的顏色就相當於30%用量30%的主色混合70%的底色。醍醐灌頂呀。默認底色是白色，替換成黑色，果然結果就不一樣了。

現在需求是從白色漸變到主色。也就是底色為背景色RGB(255,255,255)，可得如下轉換關系

RGBA(R,G,B,A*X)
RGBA(R*X+255*(1-X),G*X+255*(1-X),B*X+255*(1-X))

完美~

測試代碼

html

    <div class="one-box">主色：<span :style="'background:rgb(96,195,248)'"></span></div>
    <div class="one-box"><span>RGBA</span><span :style="'background:'+item.color"
            v-for="(item,index) of RgbaList"
            :key='index'>{{item.percentage}}</span></div>
    <div class="one-box"><span>RGB</span><span :style="'background:'+item.color"
            v-for="(item,index) of RgbList"
            :key='index'>{{item.percentage}}</span></div>
    <div class="one-box ">
      <div><span style="background: rgba(96, 195, 248, 0.3)">30%</span><span style="width:200px">rgba(96, 195, 248, 0.3)</span></div>
      <div><span style="background:rgba(207,237, 253, 1)">30%</span><span style="width:200px">rgba(207,237, 253, 1)</span></div>
    </div>
    <div class="one-box"><span>RGB</span><span :style="'background:'+item.color"
            v-for="(item,index) of RgbTest"
            :key='index'>{{item.percentage}}</span></div>

data

      RgbTest: [],
      RgbList: [],
      RgbaList: []

JS

    let R = 96, G = 195, B = 248, A = 1;
    let arr = [1, 4, 3, 0, 2, 4, 5, 3, 8, 10]
    let all = 12
    arr.forEach(i => {
      let count = (i / all) //所占比列
      let r = R * count + 255 * (1 - count), g = G * count + 255 * (1 - count), b = B * count + 255 * (1 - count), a = A * count
      let rgb = `rgb(${parseInt(r)}, ${parseInt(g)}, ${parseInt(b)})`
      let rgba2 = `rgba(${R}, ${G}, ${B}, ${a})`
      let rgbTest = `rgb(${parseInt(R * count)}, ${parseInt(G * count)}, ${parseInt(B * count)})`
      console.log(rgb, rgba2)
      let percentage = parseInt((i / all) * 100) + '%'
      this.RgbTest.push({
        color: rgbTest,
        percentage
      })
      this.RgbList.push({
        color: rgb,
        percentage
      })
      this.RgbaList.push({
        color: rgba2,
        percentage
      })
    })

CSS

  .one-box {
    width: 100vw;
    margin: 40px 0;
    display: flex;
    align-items: center;
    padding-left: 40px;
    span {
      display: block;
      width: 50px;
      height: 50px;
      border: 1px solid;
      margin: 2px;
      line-height: 50px;
      background: #fff;
      text-align: center;
    }
  }