CSS颜色要领

在CSS（层叠样式表的简称）中使用颜色其实相当容易。在这一教程中，我们将为您展示在CSS中如何使用所有不同的颜色格式，包括Hex颜色代码、HTML颜色名称以及RGB、RGBA、HSL和HSLA值。如果您是刚开始接触CSS，搜索一下intro to CSS，可以找到大量优秀的教程。

如何在CSS中使用Hex颜色代码

在CSS中，Hex颜色代码是为HTML元素添加颜色的最常用方法。您可以在样式表中使用CSS颜色属性来改变网页文字的默认设置。

CSS
/* In your .css stylesheet */
body { color: #FF0000; }

另一种方法是使用<style>标签将CSS样式包括在您的HTML文件的<head>之内，如下所示。

HTML
<!-- In your HTML document -->
<head>
  <style>
    body { color: #FF0000; }
  </style>
</head>

很简单吧？您可以在任何HTML元素上使用Hex代码的CSS颜色属性，<body>标签只是其中一个例子。去试一下吧！

HTML颜色名称是另一种以CSS设计内容的方式，一般来说更易理解。颜色名称的使用方法与Hex颜色代码相同，在您的样式表中将其设定为CSS颜色属性值。

CSS
/* In your .css stylesheet */
body { color: red; }

目前所有现代浏览器均可支持这140种颜色名称。我们已将其全部整理在一个列表中，方便您快速参考，请看这里。

RGB，代表红色、绿色、蓝色，是许多设计应用程序和技术中常见的一个颜色系统，而且最近已成为网页设计者和程序员的首要之选。在CSS中，使用RGB颜色可以将值用括号括起来，并以小写'rgb'为前缀。

CSS
/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

在CSS中使用RGB的好处之一是除了颜色，还能够控制不透明度。加一个'a'到rgb()前缀中就可以指定第四个值来确定颜色的透明度，范围在0到1之间。在这个例子中，HTML页面文字会以50%不透明度着色，因为0.5是0和1之间的一半。

CSS
/* In your .css stylesheet */
body { color: rgba(255, 0, 0, 0.5); }

如果您想使用RGB但不确定要从哪里开始，请查看我们的color picker快速生成一些颜色代码。

您可能听说过HSL，它代表色相、饱和度和亮度，是许多应用程序使用的另一种颜色系统。色相以0-360度衡量，饱和度和亮度使用0%-100%的范围。在CSS中，HSL使用方式也很简单，使用RGB相似语法，但前缀更换为'hsl'。

CSS
/* In your .css stylesheet */
body { color: hsl(0, 100%, 50%); }

同样，HSL也支持α通道控制颜色透明度。其用法与RGB相同，使用'hsla'前缀时启用介于0和1之间的第四个值。

CSS
/* In your .css stylesheet */
body { color: hsla(0, 100%, 50%, 0.5); }

请注意，rgba()、hsl()和hsla()加入CSS是新的内容，一些比较旧的浏览器并不支持。根据实际情况，您可能希望选择不同的方法来控制色彩的不透明度。