编辑“︁CSS RGB颜色”︁

= CSS RGB颜色 =

== 介绍 ==
'''RGB颜色模型'''是CSS中定义颜色的主要方式之一，通过'''红(Red)、绿(Green)、蓝(Blue)'''三个颜色通道的混合来创建丰富的色彩。在Web开发中，RGB被广泛用于设置文本颜色、背景、边框等样式属性。

RGB颜色的表示方法：
* 每个通道的取值范围是0-255（十进制）或00-FF（十六进制）
* 完全混合时产生白色（255,255,255）
* 无颜色时产生黑色（0,0,0）

== 语法格式 ==
CSS支持多种RGB表示法：

=== 函数表示法 ===
<syntaxhighlight lang="css">
/* 完全饱和红色 */
color: rgb(255, 0, 0);

/* 半透明绿色（alpha通道0.5） */
background-color: rgba(0, 255, 0, 0.5);

/* 使用百分比 */
border-color: rgb(100%, 0%, 0%);
</syntaxhighlight>

=== 十六进制表示法 ===
<syntaxhighlight lang="css">
/* 三位简写 */
color: #f00;    /* 等同于 #ff0000 */

/* 六位标准 */
background-color: #00ff00;

/* 带透明度 */
border-color: #0000ff80;  /* 最后两位表示透明度 */
</syntaxhighlight>

== 颜色通道详解 ==
RGB颜色由三个分量组成：

<mermaid>
pie
    title RGB颜色组成
    "红色通道" : 255
    "绿色通道" : 120
    "蓝色通道" : 60
</mermaid>

数学表示：
<math>
\text{颜色值} = R \times 2^{16} + G \times 2^8 + B \quad \text{其中} \quad R,G,B \in [0,255]
</math>

== 实际应用示例 ==

=== 示例1：创建渐变背景 ===
<syntaxhighlight lang="css">
.gradient-box {
    background: linear-gradient(
        to right,
        rgb(255, 0, 0),
        rgb(0, 255, 0)
    );
    width: 200px;
    height: 100px;
}
</syntaxhighlight>

'''效果'''：从左到右的红到绿渐变

=== 示例2：动态颜色计算 ===
<syntaxhighlight lang="css">
:root {
    --base-color: 100;
}

.dynamic-text {
    color: rgb(
        calc(var(--base-color) + 50),
        var(--base-color),
        0
    );
}
</syntaxhighlight>

'''说明'''：使用CSS变量和calc()函数动态计算红色通道值

== 颜色空间比较 ==

{| class="wikitable"
|+ RGB与其他颜色模型对比
! 模型 !! 表示方式 !! 特点
|-
| RGB | rgb(255,0,0) | 屏幕显示最佳
|-
| HSL | hsl(0,100%,50%) | 更符合人类直觉
|-
| HEX | #ff0000 | 简洁但不易读
|}

== 高级技巧 ==

=== 颜色混合 ===
使用CSS的<code>mix-blend-mode</code>实现RGB混合：
<syntaxhighlight lang="css">
.blend-example {
    background-color: rgb(255, 0, 0);
    mix-blend-mode: multiply;
}
</syntaxhighlight>

=== 性能优化 ===
* 十六进制格式文件体积更小
* 现代浏览器对rgb()和rgba()的解析性能相同
* 预处理器可将rgb()编译为十六进制

== 常见问题 ==

'''Q: RGB和HEX哪种更好？'''
A: 取决于场景：
* 需要透明度时使用rgba()
* 需要可读性时使用rgb()
* 需要精简代码时使用HEX

'''Q: 为什么我的rgb(256,0,0)无效？'''
A: 每个通道值必须在0-255范围内，超出值会被裁剪到最近的有效值。

== 浏览器支持 ==
所有现代浏览器完全支持RGB颜色表示法，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 3.5+

== 延伸阅读 ==
* CSS Color Module Level 4规范
* sRGB色彩空间标准
* 显示器色域与RGB关系

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]