颜色 教程

  • CSS 颜色值

    使用CSS,可以用不同的方式指定颜色:
    颜色
    • 使用颜色名称
    • 使用RGB值
    • 使用十六进值
    • 使用HSL值(CSS3)
    • 使用HWB值(CSS4)
    • 使用currentcolor关键字
  • 颜色名称

    使用CSS,可以使用颜色名称设置颜色:

    示例

    颜色 颜色名称
      Red
      Yellow
      Cyan
      Blue
      Magenta
    尝试一下
    CSS支持148种标准颜色名称,如下:
    颜色名称 Hex 颜色
    AliceBlue #F0F8FF  
    AntiqueWhite #FAEBD7  
    Aqua #00FFFF  
    Aquamarine #7FFFD4  
    Azure #F0FFFF  
    Beige #F5F5DC  
    Bisque #FFE4C4  
    在下一章中,您将找到带有十六进制值的颜色名称的完整字母列表。
  • RGB 颜色

    所有浏览器均支持 RGB 颜色值。
    RGB 颜色值指定为:rgb(REDGREENBLUE)。
    每个参数将颜色的强度定义为0到255之间的整数。
    例如,rgb(0,0,255) 呈现为蓝色,因为 blue 参数设置为其最高值(255),其他参数设置为0。

    示例

    颜色 RGB 颜色名称
      rgb(255,0,0) Red
      rgb(0,255,0) Green
      rgb(0,0,255) Blue
    尝试一下
    通常为所有3个光源使用相等的值来定义灰色阴影:

    示例

    颜色 RGB 颜色名称
      rgb(0,0,0) Black
      rgb(128,128,128) Gray
      rgb(255,255,255) White
    尝试一下
  • 十六进制颜色

    所有浏览器也支持十六进制颜色值。
    这是一个十六进制颜色:#RRGGBB
    RR(红色),GG(绿色)和 BB(蓝色)是介于00和FF之间的十六进制整数,用于指定颜色的强度。
    例如,#0000FF 显示为蓝色,因为蓝色分量设置为最高值(FF),其他分量设置为00。

    示例

    颜色 HEX RGB 颜色名称
      #FF0000 rgb(255,0,0) Red
      #00FF00 rgb(0,255,0) Green
      #0000FF rgb(0,0,255) Blue
    尝试一下
    通常为所有3个光源使用相等的值来定义灰色阴影:

    示例

    颜色 HEX RGB 颜色名称
      #000000 rgb(0,0,0) Black
      #808080 rgb(128,128,128) Gray
      #FFFFFF rgb(255,255,255) White
    尝试一下
    您可以使用大写或小写字母来指定十六进制值。
    小写更容易写。 大写字母更易于阅读。
  • currentcolor 关键字

    currentcolor关键字是指元素的color属性的值。
    以下<div>元素的边框颜色将为蓝色,因为<div>元素的文本颜色为蓝色:
    #myDIV {
      color: blue; /* Blue text color */
      border: 10px solid currentcolor; /* Blue border color */
    }
    
    
    尝试一下