16进制的透明颜色css_在CSS中使用十六进制颜色

16进制的透明颜色css

Standard CSS color keywords are limited to 149 named shades; the hexadecimal (or “hex”) color method has access to the full RGB gamut. The key to learning hex is understanding the hexadecimal counting system.

标准CSS颜色关键字仅限于149个命名阴影。 十六进制(或“十六进制”)颜色方法可以访问整个RGB 色域 。 学习十六进制的关键是了解十六进制计数系统。

Unlike our familiar base-10 system, with integers from 0 to 9, the hexadecimal system has 16 digits: 0 to 9, followed by a to f. In the most common variant, hex color components - red, green and blue - are represented by two pairs of digits each.

与我们熟悉的base-10系统不同(整数从0到9)，十六进制系统有16位数字： 0到9 ，后跟a到f 。 在最常见的变体中，十六进制颜色分量(红色，绿色和蓝色)分别由两对数字表示。

Used in pairs this way, the lowest value of a color component would be 00. One step higher would be 01, followed by 02, etc. After 09, the number pair moves to 0a, then 0b, until it gets to 0f. At that point, the first digit rolls over like an odometer, and the last one resets, becoming 10. At that point, the last digit starts ticking upwards again.

以这种方式成对使用，颜色分量的最小值将为00 。 更高的是01 ，然后是02 ， 依此类推 。在09之后，数字对移至0a ，然后移至0b ，直到移至0f 。 此时，第一个数字像里程表一样翻转，最后一个数字重置，变为10 。 此时，最后一位开始再次向上跳动。

The higher the value for a component, the more “strength” or “input” it has in the final color - 00 represents no input of a color component, and ff represents a total commitment of a component. The complete hexadecimal color is preceeded by a # symbol. So #000000 would represent black - no input from red, green or blue - while white would be #ffffff, and #ffff00 yellow.

组件的值越高，它在最终颜色中的“强度”或“输入”就越多-00表示没有颜色组件的输入，而ff表示组件的总投入。 完整的十六进制颜色以＃符号开头。 因此， ＃000000代表黑色-红色，绿色或蓝色均不输入-白色则为#ffffff和＃ffff00黄色。

Note that CSS hexadecimal color is an additive color system where no input means black (i.e. the default color of your screen).

请注意，CSS十六进制颜色是一种附加颜色系统，其中没有输入表示黑色(即屏幕的默认颜色)。

记住他 (Remembering Hexes)

A simple mnemonic to remember base-16 for color is to think of each color component (red, green and blue) as a seperate flashlight with an appropriate filter on it. In hex, 00 means “off”, and ff means “flashlight full on”.

要记住以16为基数的颜色，一个简单的助记符就是将每个颜色成分(红色，绿色和蓝色)看作是一个单独的手电筒，上面带有合适的滤镜。 以十六进制表示， 00表示“关闭”， ff表示“手电筒已满”。

Used in a dark room, turning on only the red flashlight (#ff0000) will make everything appear to be red. Turning on the red and green flashlights and converging their beams (#ffff00) will make the room appear yellow.

在黑暗的房间中使用时， 仅打开红色手电筒( ＃ff0000 )将使所有物体看起来都是红色的。 打开红色和绿色的手电筒并会聚其光束( ＃ffff00 )将使房间显得黄色。

Taken further, you can think of each flashlight with a dimmer switch - from 00 to ff, so #777777 would be a mid-level grey, and #440000 would be a dark red.

更进一步，您可以想到每个带有调光开关的手电筒-从00到ff ，因此＃777777将是中级灰色，而＃440000将是深红色。

捷径 (Shortcuts)

“Web safe” colors are created when the number in each color pair is the same (00, 77, ee, etc). These colors used to be particularly relevant when screen displays had a very limited color range; they’re not common or necessary now.

“网络安全”的颜色时在每个颜色对的数量是相同的(00，77，EE，等)被创建。 当屏幕显示的颜色范围非常有限时，这些颜色曾经特别相关。 它们现在并不常见或没有必要。

If you happen to use a web safe color, it does have one advantage - all web safe colors provide the option to shortcut the hexidecimal code. For example, black becomes #000, pure red #f00, etc. For example:

如果您碰巧使用网络安全色，则它确实具有一个优势-所有网络安全色都提供了快捷方式以十六进制代码的选项。 例如，黑色变为＃000 ，纯红色变为＃f00 ，等等。例如：

p {
    color: #000;
}

Shortcutting hexadecimal values has one potential weak point: accidentally typing in four digits, rather than three, will invoke the alpha component for hex colors in supporting browsers.

Shortcutting十六进制值存在一个潜在的薄弱点：在四位数 ，而不是三个意外打字时，将调用的十六进制颜色的Alpha组件在支持的浏览器。

The hexadecimal values do not have to be the same for each pair: #3fa027 is a perfectly valid hex color, but can’t be shortcut.

每个对的十六进制值不必相同： ＃3fa027是完全有效的十六进制颜色，但不能是快捷方式。

It’s important to understand that hexadecimal allows access to the same gamut as the two other primary CSS color systems (RGB and HSL); the color variety is not greater or less in hex.

重要的是要了解十六进制允许访问与其他两个主要CSS颜色系统(RGB和HSL)相同的色域。 颜色变化的大小不大于或小于十六进制。

十六进制的Alpha (Alpha in Hex)

The latest specification for CSS color allows hexidecimal colors to include an an alpha or opacity component, added as #RRGGBBAA or #RGBA. I discuss this in a separate article.

最新CSS颜色规范允许十六进制颜色包含alpha或不透明成分，并添加为#RRGGBBAA或#RGBA 。 我将在另一篇文章中对此进行讨论。

优点缺点 (Advantages & Disadvantages)

As a color system for web design and development, hexadecimal has both strengths and weaknesses:

作为用于网页设计和开发的颜色系统，十六进制既有优点也有缺点：

优点 (Advantages)

• Simple primaries like red, black and white are very quick to write, especially as shortcuts.
  诸如红色，黑色和白色之类的简单基元非常容易编写，尤其是作为快捷方式。
• Hexadecimal color codes are understood by absolutely every browser.
  几乎所有浏览器都可以理解十六进制颜色代码。

缺点 (Disadvantages)

• With the exception of primaries, hex color codes are difficult to write and adjust accurately, usually requiring use of a third-party application to get right.
  除基色外，十六进制颜色代码难以准确编写和调整，通常需要使用第三方应用程序才能正确设置。
• Hexadecimal color codes are challenging and counter-intuitive for designers.
  十六进制颜色代码对设计人员来说是具有挑战性和违反直觉的。

For further details, see the “Which CSS Color System to use Where” article.

有关更多详细信息，请参见“在哪里使用哪个CSS颜色系统”一文 。

翻译自: https://thenewcode.com/1108/Using-Hexadecimal-Colors-in-CSS

16进制的透明颜色css