十六进制颜色、RGB和RGBA的区别，以及它们应该在什么情况下使用？

Question

在查看各种教程时，我经常看到 HTML/CSS 中使用 RGB 和 RGBA 代替十六进制代码来表示颜色。

有人能给我解释一下RGB、RGBA、十六进制代码之间的区别，以及何时应该使用它们或使用其中哪个的好处吗？

- nobetterdan

---

不要忘记使用hsl()和'hsla()' :) - Gabriele Petrioli

Answer 1

RGB颜色与十六进制颜色之间没有区别。

十六进制转十进制：

FF = 255

=> #FFFFFF = rgb(255,255,255)

当你分解十六进制颜色时：

#FF  FF    FF
red green blue

使用rgba（alpha）可以添加一个alpha变量，从而为您的颜色添加透明度。

您可以使用RGB和HEX，这取决于您的喜好。

示例：

div {
 width:100px;
 height:100px;
 border:solid 1px black;
 display:inline-block;
}

.rgb{
  background-color:rgb(124,220,50); /* to hexa = 7C, DC, 32 */
}

.hexa{
  background-color:#7CDC32;
}

.rgba{
  background-color:rgba(124,220,50,0.2); /* opacity = 20% */
}

<div class="rgb">rgb</div>
<div class="hexa">hexa</div>
<div class="rgba">rgba</div>

- Alexis

---

出于好奇，使用RGBA相比使用类似（opacity:0.5;）设置不透明度本身的好处是什么？是RGBA只用于设置颜色的不透明度并保持其余部分正常吗？ - nobetterdan

适用于叠加或在添加透明块时使用。如果更改元素的不透明度属性，所有内容都将变为透明。使用rgba只能在背景上添加一些透明度。 - Alexis

RGB相对于HEX的优点在于它更容易操作数值，例如在Javascript中，你只需要设置一个数字而不是两个数字/文字的乘积。 - Marvin

Answer 2

RGB和RGBA之间的区别很简单，就是“没有区别”，除了“A”——> Alpha。RGB代表红绿蓝三种颜色，而RGBA则加上了Alpha通道。当你想让颜色透明时，使用Alpha参数（取值范围为0.0-1.0）。RGB / RGBA与HEX之间的主要区别在于，HEX使用6个字符和数字的混合方式（十六进制），而RGB使用3组3个数字，其范围为0-255。除此之外，它们没有更多差异，具体使用哪种方法取决于你自己。

- Markus G.

Answer 3

RGB（红色，绿色，蓝色）值在不同行业中广泛使用，包括印刷和出版。过去它在网站上的使用比今天更为普遍。

RGBA（红色，绿色，蓝色，Alpha通道）用于制作颜色透明。A（Alpha通道）的值从0表示完全透明到1表示完全不透明。

十六进制代码是一种更为新的快速、易用的数值，仅用于网站和应用程序。

- mariuspearson

Answer 4

修改mariuspearson的回复，CMYK是印刷和出版的传统颜色格式。虽然一些RGB颜色可以打印出与计算机显示器上看到的原始颜色接近的效果，但如果在电视/网络上使用CMYK图形或者打印更亮丽的RGB图形（墨水无法复制其鲜艳度），会出现一些意外和不希望的颜色变化（尤其是蓝色和红色）。我不建议任何人在任何印刷或出版项目中使用RGB。

- Lucie

---

这并没有回答问题。一旦你拥有足够的声望，你就可以评论任何帖子；相反，提供不需要提问者澄清的答案。- 来自审查 - Harrison