HTML文字颜色

为HTML文字添加颜色非常容易！在这个简短的教程中，我们将介绍如何使用Hex颜色代码、HTML颜色名称、RGB和HSL值改变HTML文字颜色。

文字颜色使用Hex颜色代码

为HTML文本设置颜色最常见的方式是使用十六进制颜色代码（简称Hex代码）。只需简单地将一个样式属性添加到您希望设置颜色的文本元素中――下面以一个段落为例――使用您的Hex代码作为颜色属性。 

HTML

<body>
  <p style="color:#FF0000";>Red paragraph text</p>
</body>
演示的CodePen

没有Hex代码？不用担心，使用我们的使用我们的颜色选择器浏览数以千万的Hex颜色代码表示的颜色，还有更多。

文字颜色使用HTML颜色名称

另一种为网站文字设置颜色的的方式是使用HTML颜色名称。HTML代码也很相似，只要上一步骤中的Hex代码替换为您希望使用的颜色名称（我们以红色为例）。有140种已命名的颜色可供选择，我们已制成列表，请查看这里。 

HTML

<body>
  <p style="color:red;">Red paragraph text</p>
</body>
演示的CodePen

文字颜色使用RGB颜色值

RGB值的使用现如今十分盛行。它与Hex代码或颜色名称的使用同样简单。根据颜色属性在rgb()参数内插入RGB值。除了Hex代码，您也可使用我们的颜色选择器获取RGB值。 

HTML

<body>
  <p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>
演示的CodePen

使用RGB值用于您的网站时，还可以指定不透明度。使用rgba()而不是rgb()――其中a代表α，控制不透明度的颜色通道 — 在您的三个色彩值之后加入第四个值表示透明度，范围从0-1（0表示完全透明，1表示完全不透明）。 

HTML

<body>
  <p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>
演示的CodePen

文字颜色使用HSL颜色值

添加颜色的第四种方法是使用HSL值。与上面描述的RGB语法类似，HSL使用hsl()前缀，三个值表示色相、饱和度和亮度。色相值范围在0-360，饱和度和亮度均为百分比，从0%到100%。 

HTML

<body>
  <p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>
演示的CodePen

与RGB一样，使用HSL时可以在颜色属性中修改不透明度。使用hsla()前缀，加入第四个值，范围在0和1之间，代表所需的不透明度。 

HTML

<body>
  <p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>
演示的CodePen