上一节:
下一节:

  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
    R
    G
    G
    B
    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>
    尝试一下

  • 相关页面

    HTML教程：HTML样式

上一节:
下一节: