HTML 颜色

引言

对于网站设计来说，颜色是至关重要的部分。它可以根据用户的点击、他们如何阅读文本以及浏览网站时的感受进行修改。通过实践颜色并简要了解色彩理论，开发者可以非常容易地为网站添加颜色和背景属性。

开发者可以通过不同的方式定义这些属性。借助十六进制颜色代码、RGB 颜色代码或 HSL 颜色值，我们可以更改文本的颜色和网页的背景。让我们来讨论为网页提供颜色的不同方法。具体如下。

CSS 中的 HTML 颜色

借助 HTML 颜色，我们可以为网页添加颜色。这是因为颜色名称代表了 HTML 颜色。目前，现代浏览器支持 140 种颜色。一些颜色的例子有橙色、金色、青色、栗色、天蓝色等。

让我们举一个例子，在网页中实现颜色属性。

示例 1

输出

注意：按照惯例，建议不要使用 HTML 颜色名称。对于人类来说，要记住所有 140 种颜色名称可能会很困难。

CSS 中的十六进制颜色代码

十六进制代码是井号和三对字符的组合。它代表了三种原色的强度。这三种原色是红色、绿色和蓝色。十六进制颜色的可能值从 00（强度最低）开始，到 FF（在原色中强度最高）结束。

颜色的十六进制代码总共由六个字符组成。这六个字符包括十个数字（0-9）和六个字母（a-f）。因此，十六进制颜色代码总共有 16,777,216 种可能的组合。让我们讨论一些十六进制颜色代码的组合。

要创建白色，我们必须将三种原色以最大强度混合。白色的十六进制颜色代码是 #FFFFFF。同样，对于黑色，十六进制颜色代码是 #000000。类似地，蓝色的十六进制颜色代码是 #FF0000。下表中列出了一些常用颜色的十六进制颜色代码。

示例 2

输出

HTML 中的 RGB 颜色代码

还有另一种方法可以为 HTML 提供颜色。该方法名为 RGB 颜色代码。这里的 RGB 代表红色、绿色和蓝色。我们可以用逗号分隔这些颜色名称。这些颜色的强度范围是 0 到 255 之间的整数。我们可以用括号和小写字母来表示这些数字。

我们可以将黑色表示为 (0, 0, 0)，RGB (255, 0, 0) 是红色，而 RGB (0, 0, 255) 是蓝色。借助 RGB 颜色，我们还可以控制颜色的不透明度。对于颜色的不透明度，我们只需在 RGB() 前缀中添加一个“a”，并在括号内添加第四个值。颜色的不透明度范围是 0 到 1。如果我们将值设为 0，则颜色完全透明，设为 1 则完全不透明。值 0.5 会使颜色以 50% 的不透明度渲染。

示例 3

输出

HTML 中的 HSL 颜色值

如果我们想控制颜色的色相、饱和度、亮度和透明度，那么我们就需要使用 HSL 颜色值的概念。HSL 的格式

HSL 类似于 RGB 颜色代码。HSL 颜色值由三个数字组成，用逗号分隔。这些数字包含在括号中，并以小写字母“hcl”为前缀。我们还可以添加“a”作为第四个值，用于设置透明度。

颜色的不透明度范围是 0 到 1。如果我们将值设为 0，则颜色完全透明，设为 1 则完全不透明。值 0.5 会使颜色以 50% 的不透明度渲染。与 RGB 颜色类似，HSL 颜色代码也不代表原色的强度。在 HCL 中，我们必须将值写成度数，而不是 0 到 360 之间的数字。我们必须将红色的值设置为 0 或 360。同样，对于绿色和蓝色，我们必须分别将值设置为 120 和 240。

对于饱和度和亮度，我们必须将值设置在 0 到 100 之间。如果我们想要灰色阴影，则必须将值设置为 0%，而对于全色，则必须将值设置为 100%。我们必须将黑色和白色的颜色值分别设置为 0% 和 100%。

示例 4

输出

颜色渐变

现在我们将讨论如何使背景色成为纯色。但我们也可以使背景色成为渐变色。这里的渐变色意味着一种颜色在特定方向上逐渐变为另一种颜色，例如从上到下、从左到右或对角线方向。我们可以通过至少两种颜色来创建这种渐变色。我们也可以使用两种以上的颜色来创建渐变色。让我们在下面的例子中创建彩虹渐变色。

示例-5

代码

输出

示例-6

代码

输出