A Beginner's Guide to HTML Color Codes

在您的网站上添加颜色可以引起情感，设定氛围，并使您的整体设计更具凝聚力。

In this post, we’ll cover您需要了解的有关设计原则的一切related to HTML color codes so you can update and add to the colors on your site. Whether you’re重新设计您的网站或第一次选择调色板，学习这种基本技能可以帮助您创建一个始终如一地反映品牌外观和感觉的网站。

让我们从定义什么HTML颜色代码开始。

HTML颜色代码

We see colors everyday and have names for them, like red and yellow. Within these colors are hundreds of different shades that we also have names for. There’s not just pink, for example, but neon pink, bubblegum pink, rose, fuchsia, magenta, and countless others.

问题是，即使我们试图更具体，这些颜色名称也可以由不同的人来解释。一个人的霓虹灯粉红色可能是另一个人的紫红色，这可能是别人的洋洋。

为了避免在线这种不精确，我们使用HTML颜色代码。计算机可以解释HTML颜色代码以显示适当的颜色。这些代码可以采用多种格式，包括六角颜色代码。让我们仔细看看下面的这种格式。

HTML Hex Color Codes

Hex color codes is the most popular HTML format used in websites and other software applications. Every hex code is made up of three byte hexadecimal numbers preceded by a hashtag.

A byte is a pair of characters in the Hex code that represent the intensity of the three primary colors (red, green, and blue) in the color. Values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color).

That means every hex code consists of three pairs, or six characters in total. These six characters can be any combination of ten numerals (0-9) and six letters (a-f). This 16-symbol numeral system is known as hexadecimal code. In total, there are 16,777,216 possible combinations. Let’s try to figure out a few of them.

要找出白色的十六进制颜色代码，请考虑您必须以其全强度混合三种原色中的每一个。这意味着白色的十六进制颜色代码是#ffffff。由于黑色缺乏原色，因此其十六进制颜色代码为＃000000。如果您想要红色，那么您需要最高的红色强度和其他两种主要颜色的最低强度。因此，红色的十六进制代码为＃ff0000。查看以下图以获取其他一些组合。

来源

Take a look at the screenshot below for more examples.

来源

To get more familiar with hex codes, you can play around with online tools like color pickers and wheels.

使用下面显示的颜色选择器，您可以找出不同颜色的十六进制代码，从黑白到最深的蔬菜和最亮的蓝色。

来源

Once you find a color you like, make note of its hex code. That way, you can reuse the same colors in multiple designs and across channels, which is essential for consistent branding.

Now that you understand what HTML color codes are and hex codes in particular, let’s look at how you can use HTML color codes.

如何使用HTML颜色代码

您可以在网站的HTML中添加十六进制代码，以编辑单个元素的颜色。

例如，您想将段落的颜色更改为红色。您只需将样式属性添加到您要着色的段落元素中，并使用正确的十六进制代码使用颜色属性。代码看起来像这样：

红色段落文本

Using this code, I could transform the intro of this blog post, making the first paragraph red. It would look something like this on the front end:

来源

You could also separate the HTML and CSS and achieve the same result.

Here’s the CSS you’d put in the head section of your doc:

身体 {
颜色：＃ff0000;
}

Here’s the HTML you’d put in the body section of your doc:

红色段落文本

使用相同的过程，您可以更改网站上背景，文本和其他元素的颜色。

建立彩色站点

颜色可以帮助强调页面上的元素，创建品牌识别，并使您的网站令人难忘。现在，您对HTML颜色代码有了基本的了解，可以在网站上添加或更改颜色以创建凝聚力设计。

现在您已经有了HTML颜色代码，了解其他HTML代码that can help you正确地呈现信息在你的网站上和马ke necessary updates.