CSS 颜色 - 菜鸟教程

CSS颜色

使用预定义的颜色名称或RGB，HEX，HSL，RGBA，HSLA值指定HTML颜色。

颜色名称

在HTML中，可以使用预定义颜色名称指定颜色：

颜色名称	效果
Tomato	番茄红
Orange	橙
DodgerBlue	宝石蓝
MediumSeaGreen	深海绿
Gray	灰
SlateBlue	青蓝
Violet	紫
LightGray	浅灰

<table>
 <colgroup>
    <col width="50%">
    <col width="50%">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>颜色名称</th>
      <th>效果</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tomato</td>
      <td style="background-color: Tomato;"></td>
    </tr>
    <tr>
      <td>Orange</td>
      <td style="background-color: Orange;"></td>
    </tr>
    <tr>
      <td>DodgerBlue</td>
      <td style="background-color: DodgerBlue;"></td>
    </tr>
    <tr>
      <td>MediumSeaGreen</td>
      <td style="background-color: MediumSeaGreen;"></td>
    </tr>
    <tr>
      <td>Gray</td>
      <td style="background-color: Gray;"></td>
    </tr>
    <tr>
      <td>SlateBlue</td>
      <td style="background-color: SlateBlue;"></td>
    </tr>
    <tr>
      <td>Violet</td>
      <td style="background-color: Violet;"></td>
    </tr>
    <tr>
      <td>LightGray</td>
      <td style="background-color: LightGray;"></td>
    </tr>
  </tbody>
</table>

尝试一下

背景颜色

您可以设置HTML元素的背景颜色：

欢迎来到菜鸟教程

蝴蝶效应（The Butterfly Effect）是指在一个动力系统中，初始条件下微小的变化能带动整个系统的长期的巨大的连锁反应。这是一种混沌现象。任何事物发展均存在定数与变数，事物在发展过程中其发展轨迹有规律可循，同时也存在不可测的“变数”，往往还会适得其反，一个微小的变化能影响事物的发展，说明事物的发展具有复杂性。

<h1 style="background-color:DodgerBlue;">欢迎来到菜鸟教程</h1>
<p style="background-color:Tomato;">蝴蝶效应（The Butterfly Effect）是指在一个动力系统中，初始条件下微小的变化能带动整个系统的长期的巨大的连锁反应。这是一种混沌现象。任何事物发展均存在定数与变数，事物在发展过程中其发展轨迹有规律可循，同时也存在不可测的“变数”，往往还会适得其反，一个微小的变化能影响事物的发展，说明事物的发展具有复杂性。</p>

尝试一下

文本颜色

您可以设置文本的颜色:

欢迎来到菜鸟教程

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程

<h1 style="color:Tomato;">欢迎来到菜鸟教程</h1>
<p style="color:DodgerBlue;">超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p>
<p style="color:MediumSeaGreen;">Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p>

尝试一下

边框颜色

您可以设置边框的颜色：

欢迎来到菜鸟教程

<h3 style="border:2px solid Tomato;">欢迎来到菜鸟教程</h3>
<h3 style="border:2px solid DodgerBlue;">欢迎来到菜鸟教程</h3>
<h3 style="border:2px solid Violet;">欢迎来到菜鸟教程</h3>

尝试一下

颜色值

在HTML中，还可以使用RGB值，HEX值，HSL值，RGBA值和HSLA值指定颜色：与颜色名称“Tomato”相同：

rgb(255,99,71)

#ff6347

hsl(9,100%,64%)

<h3 style="background-color: rgb(60,179,113);">rgb(60,179,113)</h3>
<h3 style="background-color: #ff6347;">#ff6347</h3>
<h3 style="background-color: hsl(9,100%,64%);">hsl(9,100%,64%)</h3>

尝试一下

与颜色名称“Tomato”相同，但50％透明：

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

<h3 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h3>
<h3 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h3>

尝试一下

RGB值

在HTML中，可以使用以下公式将颜色指定为RGB值： rgb（红色，绿色，蓝色）每个参数（红色，绿色和蓝色）定义0到255之间的颜色强度。例如，rgb（255,0,0）显示为红色，因为红色设置为其最高值（255），其他值设置为0。要显示黑色，所有颜色参数必须设置为0，如下所示：rgb（0,0,0）。要显示白色，所有颜色参数必须设置为255，如下所示：rgb（255,255,255）。通过混合以下RGB值进行实验：

R

G

B

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

<h3 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h3>
<h3 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h3>
<h3 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h3>
<h3 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h3>
<h3 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h3>
<h3 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h3>

尝试一下

对于所有3个颜色光源，通常使用相等的值来定义灰度阴影：

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

<h3 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h3>
<h3 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h3>
<h3 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h3>
<h3 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h3>
<h3 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h3>
<h3 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h3>

尝试一下

十六进制值

在HTML中，可以使用以下形式的十六进制值指定颜色：＃RRGGBB 其中rr（红色），gg（绿色）和bb（蓝色）是00和ff之间的十六进制值（与十进制0-255相同）。例如，＃ff0000显示为红色，因为红色设置为其最高值（ff），其他值设置为最低值（00）。

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>

尝试一下

对于所有3个颜色光源，通常使用相等的值来定义灰度阴影：

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

<h3 style="background-color:#000000;">#000000</h3>
<h3 style="background-color:#3c3c3c;">#3c3c3c</h3>
<h3 style="background-color:#787878;">#787878</h3>
<h3 style="background-color:#b4b4b4;">#b4b4b4</h3>
<h3 style="background-color:#f0f0f0;">#f0f0f0</h3>
<h3 style="background-color:#ffffff;">#ffffff</h3>

尝试一下

HSL值

在HTML中，可以使用以下形式的色调，饱和度和亮度（HSL）指定颜色： hsl（色调，饱和度，亮度）色调是色轮上的度数，从0到360. 0是红色，120是绿色，240是蓝色。饱和度是百分比值，0％表示灰色阴影，100％表示全彩色。明度也是一个百分比，0％是黑色的，50％既不是亮或暗，100％是白色。

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

<h3 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h3>
<h3 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h3>
<h3 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h3>
<h3 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h3>
<h3 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h3>
<h3 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h3>

尝试一下

饱和度

饱和度可以描述为颜色的强度。 100％是纯色，没有灰色阴影。 50％是50％灰色，但你仍然可以看到颜色。 0％是完全灰色的，你再也看不到颜色了。

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

<h3 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h3>
<h3 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h3>
<h3 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h3>
<h3 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h3>
<h3 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h3>
<h3 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h3>

尝试一下

亮度

颜色的明度，可谓你要多少光给颜色，其中0％表示没有光（黑色），50％意味着50％的光（既不深也不浅）100％表示全亮度（白色）。

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

<h3 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h3>
<h3 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h3>
<h3 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h3>
<h3 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h3>
<h3 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h3>
<h3 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h3>

尝试一下

灰色色调常常通过设置色调和饱和度为0所定义，并且调整从0％的亮度为100％，以得到更暗/亮的阴影：

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

<h3 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h3>
<h3 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h3>
<h3 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h3>
<h3 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h3>
<h3 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h3>
<h3 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h3>

尝试一下

RGBA值

RGBA颜色值是RGB颜色值的扩展用alpha通道 - 它指定一个颜色的不透明度。 RGBA颜色值指定为： rgba（红色，绿色，蓝色，alpha） alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字：

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

<h3 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h3>
<h3 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h3>
<h3 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h3>
<h3 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h3>
<h3 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h3>
<h3 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h3>

尝试一下

HSLA值

HSLA颜色值是HSL颜色值的扩展，带有alpha通道 - 指定颜色的不透明度。 HSLA颜色值指定为： hsla（色调，饱和度，亮度，alpha） alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字：

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

<h3 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h3>
<h3 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h3>
<h3 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h3>
<h3 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h3>
<h3 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h3>
<h3 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h3>

尝试一下