`RGB`
和 `
RGBA` 是表示颜色的两种常见方式，它们都基于红（Red）、绿（Green）、蓝（Blue）三种基本颜色的组合来表示各种颜色。
区别在于：
---
### ✅ RGB（Red Green Blue）
- **定义**：由三个通道组成，分别代表红色、绿色
和蓝色。
- **取值范围**：每个通道为 0 到 255 的整数，或 0.0 到 1.0 的浮点数。
- **用途**：用于描述不透明的颜色，常用于图像显示、网页设计、图形软件等。
- **示例**：`RGB(255, 0, 0)` 表示红色。
---
### ✅
RGBA（Red Green Blue Alpha）
- **定义**：在 RGB 基础上增加了一个 **Alpha 通道（透明度）**。
- **Alpha 取值范围**：
- 通常为 0.0（完全透明）到 1.0（完全不透明），有时也用 0~255 表示。
- **用途**：用于支持透明效果的颜色表示，广泛用于 Web 开发（如 CSS）、图像处理、游戏开发等。
- **示例**：`
RGBA(255, 0, 0, 0.5)` 表示半透明红色。
---
## 🧠 示例代码
下面是一些使用 Python 演示 RGB 与
RGBA 区别的代码。
### 示例 1：使用 `matplotlib` 显示 RGB
和 RGBA 颜色块
```python
import matplotlib.pyplot as plt
import numpy as np
# RGB 颜色（不透明）
rgb_color = (255/255.0, 0/255.0, 0/255.0) # 红色
#
RGBA 颜色（带透明度）
rgba_color = (0/255.0, 0/255.0, 255/255.0, 0.5) # 半透明蓝色
# 创建两个纯色图像
rgb_block = np.ones((100, 100, 3)) * rgb_color
rgba_block = np.ones((100, 100, 4)) *
rgba_color
# 显示颜色块
plt.figure(figsize=(8, 4))
plt.subplot(1, 2, 1)
plt.imshow(rgb_block)
plt.title("RGB Color (Red)")
plt.axis('off')
plt.subplot(1, 2, 2)
plt.imshow(
rgba_block)
plt.title("
RGBA Color (Blue with 50%
Opacity)")
plt.axis('off')
plt.tight_layout
()
plt.show
()
```
> 上述代码创建了两个颜色块，一个是纯红色的 RGB，另一个是半透明蓝色的
RGBA。
---
### 示例 2：将十六进制颜色转为 RGB 或
RGBA（Python）
```python
def hex_to_
rgba(hex_color):
hex_color = hex_color.lstrip('#')
if len(hex_color) == 6:
r, g, b = tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
return (r / 255.0, g / 255.0, b / 255.0, 1.0)
elif len(hex_color) == 8:
r, g, b, a = tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4, 6))
return (r / 255.0, g / 255.0, b / 255.0, a / 255.0)
else:
raise ValueError("Invalid HEX color format")
print(hex_to_
rgba("#FF0000")) # 输出: (1.0, 0.0, 0.0, 1.0)
print(hex_to_
rgba("#0000FF80")) # 输出: (0.0, 0.0, 1.0, 0.5)
```
---
### 示例 3：CSS 中使用 RGB
和 RGBA（前端示例）
```css
.red-box {
background-color: rgb(255, 0, 0);
}
.transparent-blue-box {
background-color:
rgba(0, 0, 255, 0.5);
}
```
```html
<div class="red-box">红色</div>
<div class="transparent-blue-box">半透明蓝色</div>
```
---
## 🔁 总结对比表
| 特性 | RGB |
RGBA |
|------------|------------------------------|-----------------------------------|
| 含义 | 红绿蓝三通道 | 红绿蓝+透明度四通道 |
| 透明度 | 不支持 | 支持 |
| 使用场景 | 图像处理、无透明背景 | 网页设计、UI 设计、特效 |
| 数值长度 | 3 个数字 | 4 个数字 |
| 示例 | `rgb(255, 0, 0)` | `
rgba(0, 0, 255, 0.5)` |
---
扫一扫
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
