在你的网站上添加颜色可以唤起情感,设置氛围,并使你的整体设计更有凝聚力。

在这篇文章中,我们将讨论关于设计原则你需要知道的一切相关的HTML颜色代码,以便您可以更新和添加到您的网站上的颜色。无论你是重新设计你的网站或者第一次选择一个调色板,学习这个基本技能可以帮助你创建一个反映你的品牌外观和感觉一致的网站。

现在下载:免费HTML和CSS入门指南

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

HTML颜色代码

我们每天都看到颜色,并给它们起名字,比如红色和黄色。在这些颜色中有数百种不同的深浅,我们也为它们命名。比如,不只是粉色,还有霓虹粉、泡泡糖粉、玫瑰红、紫红色、品红,还有无数其他的粉色。

问题是,即使我们试图得到更具体的,这些颜色名称可能会被不同的人理解。一个人的霓虹粉色可能是另一个人的紫红色,而另一个人的紫红色。

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

HTML十六进制颜色代码

十六进制颜色代码是最流行的HTML格式,用于网站和其他软件应用程序。bob电竞官方下载每个十六进制代码由三个字节的十六进制数前面加一个标签组成。

字节是十六进制代码中的一对字符,它们表示颜色中的三原色(红、绿和蓝)的强度。值范围从00(原色的最低强度)到FF(原色的最高强度)

这意味着每个十六进制代码由三对或总共六个字符组成。这六个字符可以是十个数字(0-9)和六个字母(a-f)的任意组合。这个16个符号的数字系统被称为十六进制代码。总共有16,777,216种可能的组合。让我们试着找出其中几个。

要计算出白色的十六进制颜色代码,需要考虑将三种原色全部混合在一起。这意味着白色的十六进制颜色代码是#FFFFFF。因为黑色缺少原色,所以它的十六进制颜色代码是#000000。如果你想要红色,那么你需要红色的最高强度和其他两种原色的最低强度。因此,红色的十六进制代码将是#FF0000。看看下面的图表,看看其他几个组合。

并排比较的HTML十六进制代码的主要,次要的,和第三色

请看下面的截图以获得更多的例子。

一个常见颜色的列表和它们的HTML十六进制颜色代码

为了更熟悉十六进制代码,您可以使用在线工具,如颜色选择器和轮子。

使用下面所示的颜色选择器,您可以计算出不同颜色的十六进制代码,从黑色和白色到最深的绿色和最亮的蓝色。

显示亮蓝色的HTML十六进制颜色代码的颜色选择器

一旦你找到你喜欢的颜色,记下它的十六进制代码。这样,您就可以在多个设计和多个渠道中重用相同的颜色,这对于保持品牌一致性至关重要。

现在,您已经了解了HTML颜色代码是什么,特别是十六进制代码,让我们看看如何使用HTML颜色代码。

如何使用HTML颜色代码

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

例如,您想要将段落的颜色更改为红色。您只需向想要着色的段落元素添加一个style属性,并使用正确的Hex代码使用color属性。代码看起来像这样:

使用这段代码,我可以转换这篇博文的介绍,把第一段变成红色。它的前端看起来是这样的:

前端示例使用HTML十六进制代码将段落更改为红色

您还可以分离HTML和CSS,并获得相同的结果。

以下是你可以放在文档标题部分的CSS:

身体{

颜色:# FF0000;

这是你应该放在文档主体部分的HTML:

< / p > < p >红段落文本

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

建立一个彩色网站

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

现在你有了HTML颜色代码,了解其他HTML代码这对你有帮助正确渲染你的网站上的信息,并作出必要的更新。

新的文字-动作

css的介绍

最初发布于2020年3月1日上午8:00:00,更新于2020年7月27日