# RGB以及RGBA

R：红色。0~255 整数
G：绿色。0~255 整数
B：蓝色。0~255 整数
A：透明度。0~1。整数或者小数

### RGB和RGBA的关系

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


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


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


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;