十六进制颜色如何工作？

Posted 2023-02-23

【中文标题】十六进制颜色如何工作？

【英文标题】：How does hexadecimal color work?

【发布时间】：2014-04-09 23:50:03

【问题描述】：

代表 CSS 颜色的十六进制是什么意思？在不记住确切代码的情况下如何分辨它是什么颜色？它与 RGB（和 CMYK）系统有什么关系吗？ 我想了一会儿FF 表示 RGB 中的255，但后来我意识到 15^2 不是 255，而是 225。

【问题讨论】：

此页面可能有用：w3schools.com/cs-s-ref/css_colors.asp

FF 确实 表示 255。F = 15, 10 (hex) = 16, 16 * 16 = 256。但是你需要一个零空间。

+1 @helderdarocha。此外，要在不记忆的情况下分辨颜色，您可以使用 ColorZilla（chrome.google.com/webstore/detail/colorzilla/… 或 addons.mozilla.org/en-US/firefox/addon/colorzilla）等浏览器插件或 Adob​​e Photoshop 等任何图形编辑程序来选择颜色并获取十六进制值，或输入十六进制值看看颜色。

【参考方案1】：

十六进制使用十六个不同的符号，在 css color 的情况下，符号0–9 表示值 0 到 9（很明显），A, B, C, D, E, F 表示值 10 到 15。因此，使用一个十六进制字符可以表示 16 值。使用两个十六进制，您可以表示 256 (16*16) 值。

在RGB 中，您有由 Red Green Blue 表示的颜色（R=0-255，G=0- 255, B=0-255)，所以我们使用 3 对十六进制符号！所以当你看到一个 RGB 颜色时，你可以进行下面的计算。

例子：

十六进制：#4C8ED5 是 RGB：76, 142, 213。

因为4C = 76(Red)、8E = 142(Green)、D5 = 213(Blue)！

希望对你的理解有所帮助！

更多阅读：Hexadecimal on Wikipedia 和一个不错的 RGB 到十六进制 Converter

【讨论】：

顺便说一句，您可以使用更具可读性的rgb(254, 250, 253) 语法在CSS 中定义颜色。它与rgba(254, 250, 253, A) 密切相关，A 在0..1 范围内获得半透明效果。

值得解释一下转换背后的数学我认为：如果你把HEX代码作为3对符号，总是将每对中的第一个符号乘以16，第二个符号乘以 1，您将获得 RGB 值。本例中：(4*16 + 12*1), (8*16 + 14*1), (13*16 + 5*1) = 76, 142, 213 RGB值

【参考方案2】：

基本上，如果您有 FF，那就是 RED，因为有两个十六进制数字（0-9，A-F），我们会这样做： F = 15

15 * (16 ^ 0) = 15
15 * (16 ^ 1) = 240

240 + 15 = 255
RED = 255

(16 ^ 0) 和 (16 ^ 1) 位表示我们正在以 16 为基数工作。 如果您在做 KPE 的 8040FF 示例，我们会这样做：

F = 15

15 * (16 ^ 0) = 15
15 * (16 ^ 1) = 240

240 + 15 = 255
BLUE = 255

然后

8 * (16 ^ 0) = 8
(BECAUSE WE HAVE 0 WE IGNORE IT)
(16 ^ 1) = 16
(BECAUSE WE IGNORED THE ZERO WE * INSTEAD OF +)
8 * 16 = 128
RED = 128

4 * (16 ^ 0) = 4
(BECAUSE WE HAVE 0 WE IGNORE IT)
(16 ^ 1) = 16
(BECAUSE WE IGNORED THE ZERO WE * INSTEAD OF +)
4 * 16 = 64

GREEN = 64

R = 128
G = 64
B = 255

而如果您有单个十六进制数字，例如。 F，等于 15，所以 RED = 15

【讨论】：

这样公布你的名字有什么必要？

【参考方案3】：

我发现其他一些答案中的数学部分相当混乱。

其实超级简单。我找到了一个很好的解释here.

计算机中的颜色是通过不同比例的红、绿、蓝组合而成的。每种颜色的值，范围从 0 到 255。在 RGB 表示法中，我们通过编写 (255,0,0) 来表示纯红色，其中绿色和蓝色的值为 0。如果我们混合相同数量的每种颜色，我们会得到不同的灰色阴影. (123,123,123) 是某种灰色阴影，(0,0,0) 代表黑色，(255,255,255) 是白色。

十六进制采用完全相同的原理和取值范围，并试图以更短的方式表达。

在我们常用的十进制系统中，一位数从 0 到 9，然后我们需要使用两位数（即 10）。

为了保持仅用一位数字表示较大的数字，十六进制系统通过为数字 10 到 15 分配字母来为数字 10 到 15 赋予 1 个字符长的表示形式。所以现在：10=A，11=B，12=C，13=D，14=E，15=F。 （字母可以小写）。

让我们看看我们的十进制系统是如何工作的，因为它与十六进制非常相似。在数字 13 中，第一个数字是 1，但代表 10，为了得到 13，我们添加 3，13=10+3。也就是说，我们总是将第二个数字从右到左乘以 10，然后加上下一个数字。 23 中的 2 代表 20。在十六进制中，我们总是将第二个数字从右到左乘以 16。（十六进制表示 16）。

让我们看看数字 4C。这里我们将 4 乘以 16，因为它是从右到左的第二个数字，4*16=64。 C代表12所以现在我们把它加到64。64+12=76，所以最终的答案是4C=76。

为了表示红色、蓝色或绿色值的最大可能数字，我们写 FF，它代表 255。所以#FFFFFF 将等于 (255,255,255)。因此，我们可以只用 6 个字符来表达我们需要的红色、绿色和蓝色的所有数字。

为了进一步缩短它，您可以编写 3 个字符代码，其中每个字符都加倍。例如#000 代表#000000，#ABC 等于#AABBCC

现在，你能猜出 CC9 的数字是多少吗？这个数字不是表达颜色所必需的，但它会证明你对十六进制数字的理解。提示：在十进制中，267 表示 (2100)+(610)+(7) 或 (21010)+(6*10)+(7)。

在下面回答。

(C1616)+(C*16)+(9)=

(121616)+(12*16)+(9)=

3072+192+9=3273

【讨论】：

这个答案给出了对十六进制如何工作的实际理解。谢谢！！

【参考方案4】：

在六位十六进制表示法中，数字成对表示 RGB 系统中的红色、绿色和蓝色分量。例如，#0000FF 红色为 0，绿色为 0，FF（十进制为 15 × 16 + 15 = 255），即蓝色的最大值（在 RGB 中的含义）。

在三位表示法中，每个数字加倍，结果如上解释。例如，#00F 表示 #0000FF。

权威参考：CSS 2.1 中的 4.3.6 Colors（较新的 CSS Values and Units Module Level 3 只是规范地引用 CSS 2.1 来定义此定义；CSS 颜色概念有扩展，但它们不会影响这些问题）。

RGB 和 CMYK 是不同的颜色系统；它们之间没有通用的转换公式。

【参考方案5】：

根据http://quashnick.net/geek_stuff/HEX2DEC.html

十六进制颜色值代表红绿蓝颜色（每个 使用 1 个字节）。 RGB 是十进制值，例如 RGB(255, 255, 255) 但十六进制颜色代码是十六进制格式 #FFFFFF ->(R) FF- (G) FF- (B) FF

HEX 数字由数字 0 到 9 组成，与 DEC 类似，但也添加 AF。所以当用 HEX 计数时：HEX 0 1 2 3 4 5 6 7 8 9 A B C D E F

12 月 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

这是一个十六进制数：1E5DF

要将其转换为 DEC，我们需要为我们的力量定义基础 功能。由于 HEX 基于 16 个不同的数字 [0-9A-F]，因此我们的基础 是 16 岁。

要从 HEX 转换为 DEC，请按以下步骤操作：我们知道 F = 15 in DEC 所以我们使用这个公式 (15*16^0) = 15 我们知道 D = 13 in DEC 所以我们使用这个公式 (13*16^1) = 208 我们知道 5 = 5 in DEC 所以我们使用这个公式 (5*16^2) = 1280 我们知道 E = 14 in DEC 所以我们使用这个公式 (14*16^3) = 57344 我们知道 1 = 1 in DEC 所以我们使用这个公式 (1*16^4) = 65536

现在我们将所有数字相加，得到 HEX 的 DEC 数字 号码 1E5DF： 15 + 208 + 1280 + 57344 + 65536 = 124383

所以我们的答案是 HEX 1E5DF = DEC 124383

阅读更多：http://quashnick.net/geek_stuff/HEX2DEC.html 了解更多关于颜色的信息：http://www.w3schools.com/html/html_colors.asp

【讨论】：

请引用您的来源。有关引用的帮助，请参阅 ***.com/help/referencing。

【参考方案6】：

HEX 代码代表三个字节，按该顺序代表每种 RGB 颜色。

FF0000 是全红强度，00FF00 是全绿强度，0000FF 是全蓝强度

8040FF 对应 128 RED、64 GREEN 和 255 blue

您还可以编写一个简短的形式，其中不指定每个字节的低 4 位，例如 FFF 代表全白，F00 代表全红，00F 代表全蓝