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样式