html 改变字体颜色

🌙

手机阅读

本文目录结构

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

文字颜色使用 Hex 颜色代码

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

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

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

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

<body>
  <p style="color:red;">Red paragraph text</p>
</body>

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

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

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

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

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

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

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

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