RGBの値を個別に指定せず、[[var関数 (CSS)|var関数]]や名前付きカラーを指定したい場合。[[color-mix関数]]を使用する。
```css
<div style="
width: 50px; height: 50px;
background-color: color-mix(in srgb, red 10%, transparent);"></div>
```
↓
<div style="
width: 50px; height: 50px;
background-color: color-mix(in srgb, red 10%, transparent);"></div>
これは`rgb`と共にアルファ値を`0.1`にしたときと同じ。
```css
<div style="
width: 50px; height: 50px;
background-color: rgb(255, 0, 0, 0.1);"</div>
```
↓
<div style="
width: 50px; height: 50px;
background-color: rgb(255, 0, 0, 0.1);"</div>