HTML 颜色

电视机和电脑屏幕显示的颜色都是通过红色,绿色和蓝色三原色组合而成的.

HTML的颜色可以用预定义好的颜色名,或者RGB,HEX,HSL,RGBA,HSLA值.

颜色名字

在HTML里,可以通过颜色名来设置颜色.

例子

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

HTML支持140个标准的颜色名.

RGB(Red,Green,Blue)

在HTML里,RGB颜色值可以用这个公式组合颜色:rgb(Red,Green,Blue)

每个参数(red,green和blue)定义颜色的强度从0到255.

例如,rgb(255,0,0)显示为一块纯红色,因为红色值设置为最大值(255),其它色值设置为0.通过混合下面的颜色值来进行试验:

Red

255

Green

255

Blue

255

rgb(255,255,255)

例子

<!DOCTYPE html>
<html>
  <body>
    <h1 style="background-color:rgb(255,0,0);">rgb(255,0,0)
    </h1>
    <h1 style="background-color:rgb(255,255,0);">rgb(255,255,0)
    </h1>
    <h1 style="background-color:rgb(0,255,0);">rgb(0,255,0)
    </h1>
    <h1 style="background-color:rgb(0,255,255);">rgb(0,255,255)
    </h1>
    <h1 style="background-color:rgb(0,0,255);">rgb(0,0,255)
    </h1>
  </body>
</html>

灰色的色度通常是相等的三个色值来表示:

例子

<!DOCTYPE html>
<html>
  <body>
    <h1 style="background-color:rgb(0,0,0);">rgb(0,0,0)
    </h1>
    <h1 style="background-color:rgb(128,128,128);">rgb(128,128,128)
    </h1>
    <h1 style="background-color:rgb(255,255,255);">rgb(255,255,255)
    </h1>
  </body>
</html>

十六进制的颜色

在HTML里,RGB值也可以用十六进制形式来表示,例如:#RRGGBB,依次为RR(red),GG(green)和BB(blue),十六进制的值在00到FF之间(和十进制的0到255是一样的意思).

例如,#FF0000显示为一块纯红色,因为red设置为最大值(FF),而其它色值都设置为最小值(00).

例子

<!DOCTYPE html>
<html>
  <body>
    <h1 style="background-color:#FF0000;">#FF0000
    </h1>
    <h1 style="background-color:#FFFF00;">#FFFF00
    </h1>
    <h1 style="background-color:#00FF00;">#00FF00
    </h1>
    <h1 style="background-color:#00FFFF;">#00FFFF
    </h1>
    <h1 style="background-color:#0000FF;">#0000FF
    </h1>
  </body>
</html>

灰色的色度通常是相等的三个色值来表示:

例子

<!DOCTYPE html>
<html>
  <body>
    <h1 style="background-color:#000000;">#000000
    </h1>
    <h1 style="background-color:#808080;">#808080
    </h1>
    <h1 style="background-color:#ffffff;">#ffffff
    </h1>
  </body>
</html>

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索