HTML 颜色

如果不了解有关颜色的所有信息，我们就无法继续使用 HTML。您可以使用超过 1600 万种颜色来使您的网站引人注目。在本文中将说明一些新的 CSS 属性，以及如何为黑白 HTML 页面添加颜色。

文字颜色

该style属性帮助我们装饰 HTML 元素。此属性如何修改文本颜色？为此，我们有一个 CSS color 属性。在示例中，该属性告诉浏览器该元素应该是蓝色的。这里是一个 CSS 属性，而是它的值。 style="color:blue;"colorblue

坚持标准语法以正确显示更改：

• 后面的等号 ( = )style

• 冒号 ( : ) 分隔两部分

• 引号 ( " " ) 将color属性括起来

• CSS 值后的分号 (;)

背景颜色

假设您需要在文本下方放置一些彩色背景。这是另一个 CSS 属性—— background-color. 语法与文本颜色属性的语法相同：style="background-color:powderblue;"。powderblue您可以插入任何颜色名称或其 RGB、HSL、HEX、RGBA 或 HSLA 值，而不是值。

不要忘记满足可访问性要求并保持正常大小的文本及其背景的对比度为 4.5:1，而对于较大的文本（如标题）保持 3:1 的对比度。

边框颜色

与文本颜色和背景颜色的 CSS 属性一样，该border属性也属于style属性的范畴。您可以设置边框样式、宽度和颜色（顺序很重要），这些设置将应用于所有边框边。例如，语法可以写成如下：. style="border:solid 4px blue;"

颜色名称

HTML 支持 140 种标准颜色名称，您可以使用它们来调整代码中元素的颜色。这些颜色是安全的选择，因为所有浏览器都支持并正确显示它们。要进行更舒适的搜索，您可以转到 W3C Schools 开发的 HTML Color Picker。它提供了一个按类别组织的清晰的 HTML 颜色系统，并允许用户通过在选择器区域内单击并拖动光标来搜索颜色。用户还可以通过指定 HEX、RGB 或 HSL 代码来找到正确的颜色。

RGB

就像人一样，颜色也有名字和“身份证号码”。RGB 颜色系统通过混合三种光（红色、绿色和蓝色）色调来构造颜色，并定义它们的数字值。简而言之，每种色调都会调整颜色的强度，其值介于 0 到 255 之间。例如，具有 RGB (255, 0, 0) 的颜色将显示为纯红色，因为我们将红色设置为其最高值 (255)，而将其他两个（绿色和蓝色）设置为 0。例如，要指定背景颜色对于使用 RGB 模型的标题，您应该遵循以下语法：<h1 style="background-color:rgb(32, 178, 170);">...</h1>.

十六进制

HEX 三元组是另一种描述 HTML 颜色的格式。与 RGB 一样，HEX 三元组通过红色、绿色和蓝色的数量来定义颜色。但是，它不是十进制表示法（从 0 到 255），而是使用三字节十六进制数，其中每个字节是 00 到 FF 范围内的值。第一个字节对应红色，第二个字节对应绿色，第三个对应蓝色。

十六进制代码更紧凑，并略微改善了网页的加载时间。此外，与 RGB 相比，它们更易于复制和共享。在代码中，你应该这样写：style="color:#ff6347;".

HSL

HSL 是另一种表示颜色的颜色模型。然而，HSL 可能对人类更友好，因为它使用的参数解释了我们如何实际感知颜色。HSL 分别代表色调、饱和度和亮度。 色调取值从 0 到 360，而其他两个参数从 0% 到 100% 变化。这种颜色模型允许设计师微调颜色，使它们更强烈，增加饱和度，使其更亮或更暗，并调整亮度。

玩转图层的不透明度以增加深度感、修改对比度并创建不同寻常的视觉效果。

RGBA

RGBA 颜色系统是 RGB 的扩展，带有一个额外的参数——一个用于设置颜色不透明度的 alpha 通道。Alpha 可以在 0.0（完全透明）和 1.0（完全不透明）之间变化。因此，如果我们设置最低值，颜色将是完全透明的。如果我们将 Alpha 参数更改为 1，颜色将显示为纯色且完全不透明。RGBA 颜色模型的语法只会略有不同：style="color:rgba(255, 99, 71, 0.5);".

HSLA

HSLA 是修改后的 HSL 版本，带有用于不透明度的 Alpha 参数。它的范围在 0.0（完全透明）和 1.0（根本不透明）之间。在代码中，使用hsla()函数符号来设置值：style="color: hsla(360,80%,50%,0.5);". 快速提醒 - 避免字符之间的任何间距。

RGB范围

在 HTML 中，RGB 颜色模型指定颜色包含多少红色、绿色和蓝色。强度范围从 0 到 255，这意味着有 256 x 256 x 256 = 16777216 种可能的颜色！足以提供视觉美学并将想法传达给您的用户，对吗？

灰色 RGB

HTML/CSS 中有几个灰色名称，所有灰色都拼写为灰色（不是灰色）。HTML 颜色“灰色”在 RGB 代码 128,128,128 下。令人惊讶的是，在 HTML 的 50 种灰色中，灰色实际上比 DarkGrey (169,169,169) 更暗！

颜色红色

在 RGB 缩写中，“R”代表红色。纯红色是保持绿色和蓝色光为零并将 R 参数设置为其最高值 255 的结果。不要过度使用不饱和的不透明颜色，尤其是红色。它们可能会导致严重的眼痛、头痛，甚至引发癫痫发作。

黑色 RGB

要显示黑色，您应该将红色、绿色和蓝色减少到它们的最低值 - RGB (0, 0, 0)。好消息是十六进制代码是零的组合：#000000。

纯黑色是一种强烈的颜色，会压倒页面上的其他颜色。对于白色背景上的文本，我们建议将其替换为深灰色，以减少对视网膜的过度刺激，并让用户能够舒适地阅读更长的时间。

白色 RGB

要显示白色，我们应该将所有参数设置为最高值 255。

在设计中，白色营造出中性的风景，让其他颜色脱颖而出并吸引注意力。此外，用户通常将白色与清洁和简单联系起来，使其成为极简设计的理想选择。

以上内容为转载