欢迎光临
桂林SEO博客

在HTML中,有哪些不同类型的颜色代码?

颜色代码是以某种格式表示颜色的方法,可以很容易地被计算机解释。有各种方法来表示这些颜色。在为页面上的任何元素添加颜色时,我们会使用这些颜色代码。

在HTML中用于颜色代码的格式有:

  • 十六进制颜色代码
  • 颜色名称
  • RGB值
  • HSL值

十六进制颜色代码

十六进制颜色代码是为HTML元素添加任何颜色的最流行方式。它由三个字节的十六进制数字组成,每个字节有一对字符。十六进制颜色代码的前缀是”#”,后面是6个字符。这6个字符必须是一个十六进制数字。也就是说,每个字符可以是[0-9]中的一个数字或[A-F]中的一个字母。

每一对十六进制代码都有特殊含义:

  • 十六进制代码的前两个变量代表红色的强度。对于较低的强度使用00,对于最高的强度使用FF。
  • 十六进制代码的中间两个变量代表绿色的强度。
  • 而十六进制代码的最后两个变量代表蓝色的强度。

例如,#FFFFFF代表最高强度的白色,#000000代表最低强度的黑色。

这里是一个使用十六进制代码添加颜色的小程序。我们使用了内联CSS来添加颜色。

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>HTML </title>

</head>
<body>
<h2 style=”color: #FFA012″> Hex color codes </h2>
<p style=”color: #FF0000″>Hex code #FF0000- Only Red color with no green and no blue </p>
<p style=”color: #0000FF”>Hex code #0000FF- Only blue color with no green and no red </p>
<p style=”color: #00FF00″>Hex code #00FF00- Only green color with no blue and no red </p>
<p style=”color: #FFFF00″>Hex code #FFFF00- some mixture of red and blue color </p>
<p style=”color: #AAAAAA”>Hex code #AAAAAA- represent grey shade </p>
<p style=”color: #F25CBB”>Hex code #F25CBB- represent pink shade </p>
</body>
</html>

显示结果

以下是上述程序的输出。

颜色名称

记住不同颜色的十六进制代码对学习者来说可能很困难。因此,你可以简单地添加颜色名称来为元素添加颜色。HTML支持140个颜色名称。一些颜色名称的例子是番茄、橙色、绿色、蓝色等。

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>HTML </title>
</head>
<body>
<h2 style=”background-color: red”> color names </h2>
<p style=”background-color: aqua”>Aqua </p>
<p style=”background-color: crimson”>Crimson </p>
<p style=”background-color: darkorchid”>darkorchid </p>
<p style=”background-color: plum”>plum </p>
<p style=”background-color: lemonchiffon”>lemonchiffon </p>
<p style=”background-color: teal”>teal</p>
</body>
</html>

显示结果

我们已经用颜色名称为元素添加了背景色。

 

RGB颜色值

还有另一种方法可以向HTML元素添加颜色。那就是使用RGB(红、绿、蓝)值。

每个参数都有一个[0-255]的值。这个值定义了每种颜色的强度。例如,rgb(255,0,0)显示红色,因为它的强度最高。

下面是一个使用RGB值添加颜色的例子。

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>HTML </title>
</head>
<body>
<h2 style=”background-color: rgb(255,0,0)”> RGB color </h2>
<p style=”background-color: rgb(0,255,0)”>rgb(0,255,0) </p>
<p style=”background-color: rgb(0,0,255)”>rgb(0,0,255) </p>
<p style=”background-color: rgb(0,0,0)”>rgb(0,0,0) </p>
<p style=”background-color: rgb(255,255,255)”>rgb(255,255,255) </p>
<p style=”background-color: rgba(100,150,175)”> rgba(100,150,175)</p>
</body>
</html>

显示结果

HSL颜色值

HSL值可以用来给HTML元素添加颜色。HSL代表(色调、饱和度、明度)。

色相是色轮的程度,它的数值可以是(0-360)。饱和度和明度使用百分比值。饱和度为0%意味着灰色阴影,而100%的饱和度则定义为全色。在明度方面,0%意味着黑色,而100%意味着白色。

显示

下面是使用HSL颜色值的程序输出。

总结

在HTML中,有数百种可用的颜色色调。你可以使用颜色名称来添加颜色,这是最简单的方法,或者使用十六进制代码、RGB值或HSL值。

选择任何颜色代码,用HTML颜色使你的网站变得丰富多彩。

赞(0)
未经允许不得转载:桂林SEO网站 » 在HTML中,有哪些不同类型的颜色代码?
分享到: 更多 (0)