CSS 十六进制颜色如何工作？

How does hexadecimal color work?

提问by jasonszhao

What does the hexadecimal that represents a CSS color mean? How can I tell what color it is without memorizing the exact code? Does it have any relationships with RGB (and CMYK) system?
I thought for a moment that FFmeans 255in RGB, but then I realized that 15^2 isn't 255, but 225.

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

回答by BrainArchitect

Hexadecimal uses sixteen distinct symbols, in the case of css color the symbols 0–9to represent values zero to nine (obviously), and A,?B,?C,?D,?E,?Fto represent values ten to fifteen. So, using one Hexadecimal character you can represent 16values. With two Hexadecimal you can represent 256(16*16) values.

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

In RGByou have colours represented by Red Green Blue (R=0-255, G=0-255, B=0-255), so we use 3 pairs of Hexadecimal symbols! So when you see an RGB color, you can make the calculation below.

在RGB必须由表示的颜色- [R编ģ颖乙略（R = 0-255，G = 0-255，B = 0〜255），所以我们使用3双十六进制符号！所以当你看到一个RGB颜色时，你可以进行下面的计算。

Example:

例子：

Hex: #4C8ED5is RGB: 76, 142, 213.

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

Because 4C = 76(Red), 8E = 142(Green), D5 = 213(Blue)!

因为4C = 76（- [R编辑）， 8E = 142（g ^颖）， D5 = 213（乙略）！

Hope it helps your understanding!

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

More to read: Hexadecimal on Wikipediaand a nice RGB to Hexidecimal Converter

更多阅读：维基百科上的十六进制和一个不错的 RGB 到十六进制转换器

回答by nimrod100

Nimrod100's answer

Nimrod100 的回答

Basically if you had FF and that was the RED, because there are two hexdigits (0-9,A-F) we do: F = 15

基本上，如果你有 FF 并且那是 RED，因为我们有两个十六进制数字（0-9，AF）：F = 15

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

240 + 15 = 255
RED = 255

the (16 ^ 0) and (16 ^ 1) bit means we are working in base 16. if you were doing KPE's example of 8040FF we would do:

(16 ^ 0) 和 (16 ^ 1) 位表示我们正在以 16 为基数工作。如果您正在执行 KPE 的 8040FF 示例，我们将执行以下操作：

F = 15

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

240 + 15 = 255
BLUE = 255

then

然后

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

Whereas if you had single hexdigits, eg. F, that equals 15 so RED = 15

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

回答by Alejandro Camus

I found the math part in some of the other answers rather confusing.

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

It is actually super simple. I found a good explanation here.

其实超级简单。我在这里找到了一个很好的解释。

Colors in computers are expressed by combining red, green and blue in different proportions. Values for each color, range from 0 to 255. In RGB notation we express a pure red by writing (255,0,0) where green and blue have value 0. If we mix the same amount of each we get different shades of grey. (123,123,123) is some shade of grey, (0,0,0) stands for black and (255,255,255) is white.

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

Hexadecimal system takes the exact same principles and value ranges and tries to express them in a shorter way.

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

In our common decimal system one digit numbers go from 0 to 9 and then we need to use two digits, (i.e. 10).

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

To keep expressing larger numbers with only one digit the hexadecimal system gives numbers 10 through 15 a 1 character long representation by assigning them letters. So now: 10=A, 11=B, 12=C, 13=D, 14=E, 15=F. (Letters can be lowercase).

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

Lets look at how our decimal system works since it is very similar to the hexadecimal. In the number 13, the first digit is a one but represents a 10 and to get thirteen we add 3, 13=10+3. That is we multiply the second digit from right to left always by 10 and then add the next number. The 2 in 23 represents a 20. In hexadecimal we multiply the second digit from right to left always by 16. (Hexadecimal means sixteen).

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

Let's look at the number 4C. Here we multiply 4 times 16 since it is the second number from right to left, 4*16=64. C stands for 12 so now we add it to 64. 64+12=76, so the final answer is 4C=76.

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

To express the larger number we need to write we use FF which stands for 255. Hence we can express all the numbers we need for red, green and blue with 6 characters.

为了表达我们需要写的更大的数字，我们使用代表 255 的 FF。因此我们可以用 6 个字符来表达我们需要的所有红色、绿色和蓝色数字。

To shorten this even more, you can write 3 character ones where each character is doubled. For example #000 stands for #000000 or #ABC would be #AABBCC

为了进一步缩短此时间，您可以编写 3 个字符，其中每个字符都加倍。例如#000 代表#000000 或#ABC 将是#AABBCC

Now can you guess what the number CC9 is? This number is not needed to express a color but it will prove your understanding. Hint: In decimal 267 means (2*100)+(6*10)+(7) or (2*10*10)+(6*10)+(7).

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

Answer below.

下面回答。

-

——

-

——

-

——

-

——

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

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

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

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

3072+192+9=3273

3072+192+9=3273

回答by Nemesis

According to http://quashnick.net/geek_stuff/HEX2DEC.html

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

A Hexadecimal color value represents the Red Green Blue color (each uses 1 Byte). RGBis in decimal value for example RGB(255, 255, 255) but the Hex color code is in Hexadecimal format #FFFFFF ->(R) FF- (G) FF- (B) FF

HEX numbers are composed of digits 0 through 9 like DEC but also adds A-F. So when counting in HEX: HEX 0 1 2 3 4 5 6 7 8 9 A B C D E F

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

Here is a HEX number: 1E5DF

To convert this to a DEC, we need to define the base for our power function. Since HEX is based on 16 different digits [0-9A-F], our base is 16.

To convert from HEX to DEC, follow these steps: We know that F = 15 in DEC so we use this formula (15*16^0) = 15
We know that D = 13 in DEC so we use this formula (13*16^1) = 208
We know that 5 = 5 in DEC so we use this formula (5*16^2) = 1280
We know that E = 14 in DEC so we use this formula (14*16^3) = 57344
We know that 1 = 1 in DEC so we use this formula (1*16^4) = 65536

Now we add all of the numbers together to get the DEC number for HEX number 1E5DF:
15 + 208 + 1280 + 57344 + 65536 = 124383

So our answer is HEX 1E5DF = DEC 124383

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

十六进制数字由数字 0 到 9 组成，与 DEC 一样，但还添加了 AF。所以在以十六进制计数时： HEX 0 1 2 3 4 5 6 7 8 9 AB CDEF

十二月 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，请执行以下步骤： 我们知道 DEC 中的 F = 15，因此我们使用此公式 (15*16^0) = 15
我们知道 DEC 中的 D = 13，因此我们使用此公式 (13*16 ^1) = 208
我们知道 DEC 中的 5 = 5 所以我们使用这个公式 (5*16^2) = 1280
我们知道 DEC 中的 E = 14 所以我们使用这个公式 (14*16^3) = 57344
我们知道在 DEC 中 1 = 1 所以我们使用这个公式 (1*16^4) = 65536

现在我们将所有数字相加得到十六进制数 1E5DF 的 DEC 数：
15 + 208 + 1280 + 57344 + 65536 = 124383

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

Read more at: http://quashnick.net/geek_stuff/HEX2DEC.html
Know more about colors at: http://www.w3schools.com/html/html_colors.asp

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

回答by Jukka K. Korpela

In a six-digit hexadecimal notation, the digits pairwise indicate the red, green, and blue component in the RGB system. For example, #0000FFhas 0 for red, 0 for green, and FF(which is 15 × 16 + 15 = 255 in decimal), i.e. the maximum, for blue (in the meaning it has in RGB).

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

In the three-digit notation, each digit is doubled, and the result is interpreted as above. E.g., #00Fmeans #0000FF.

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

Authoritative reference: 4.3.6 Colorsin CSS 2.1 (the newer CSS Values and Units Module Level 3just normatively cites CSS 2.1 for this definition; there are extensions to the CSS color concept, but they do not affect these issues).

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

RGB and CMYK are different color systems; there is no general conversion formula that converts between them.

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

回答by KPE

The HEX code is representing three bytes, one for each of the RGB colors in that order.

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

FF0000 is full RED intensity, 00FF00 is full GREEN intensity, 0000FF is full BLUE intensity

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

8040FF corresponds to 128 RED, 64 GREEN and 255 blue

8040FF 对应 128 RED、64 GREEN 和 255 蓝色

You can also write a short form where you don't specify the low 4 bits of each byte, like FFF for full WHITE, F00 for full RED, 00F for full BLUE

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

回答by Arsen Khachaturyan

Check thiswebsite, there is a really good explanation of how HEXworks.

检查这个网站，有一个很好的解释如何HEX工作。