HTML颜色

jerkzhang

Apr 16, 2020

关于HTML颜色请查看：

《专否HTML教程 - HTML颜色》
《专否HTML教程 - HTML颜色名》

HTML颜色可以通过颜色名、RGB、HEX、HSL、RGBA、HSLA的方式来设置。

颜色名

在HTML里可以直接通过颜色名来设置。

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

运行一下

背景色

background-color和background特性都可以用来设置背景色。

<h1 style="background-color:Tomato;">Tomato</h1>

运行一下

文本颜色

color特性可以用来设置元内的文本颜色。

<h1 style="color:Tomato;">Tomato</h1>

运行一下

边框颜色

border特性可以用来设元素的边框颜色。

<h1 style="border:1px solid Tomato;">Tomato</h1>

运行一下

HTML 颜色

除了用颜色名的方式，还可以使用RGB、HEX、HSL、RGBA与HSLA的方式来定义颜色。
以颜色名为“Tomato”的色彩为例，rgb(255, 99, 71)、 #ff6347、 hsl(9, 100%, 64%)与使用色彩名的方式等价。

RGB 值

RGB是计算机通过红色、绿色、蓝色的比例来定义颜色的一种方式。红、绿、蓝的取值0-255。

rgb(red, green, blue)

比如要想表示黑色，就是把红色、绿色、蓝色都设置成0，即rgb(0, 0, 0)；
比如想要表示白色，就是把红色、绿色、蓝色都设置成255，即rgb(255, 255, 255）。

<h3 style="background-color:rgb(255, 99, 71);color:rgb(255,255,255);">
rgb(255, 99, 71)
</h3>

<h3 style="background-color:rgb(238, 99, 71);color:rgb(255,255,255);">
rgb(238, 99, 71)
</h3>

运行一下

HEX 值

HEX即16进制色彩的定义方式。

#rrggbb

rr代表红色，取值范围是00到ff，等价于rgb模式下十进制的0-255；gg代表绿色，bb代表蓝色，取值都是00到ff；更多如下例所示。

<h3 style="background-color:#fc644d;color:#ffffff;">
#fc644d
</h3>

<h3 style="background-color:#ec634c;color:#ffffff;">
#ec634c
</h3>

运行一下

HSL 值

HSL的方式是利用色调（hue）、饱和度（saturation）、明度（lightness）这三个指数进行对颜色的定义。

hsl(hue, saturation, lightness)

色调hue的取值范围是0-360，0代表红色，120代表绿色，240代表蓝色。
饱和度saturation取值范围0%-100%，取值越大则饱和度越高，越低则灰度越高。
明度lightness取值范围是0%-100%，0%代表全黑，100%代表全白，50%代表黑白之间。

<h3 style="background-color:hsl(8,97%,65%);color:hsl(0,0%,100%);">
hsl(8, 97%, 65%)
</h3>

<h3 style="background-color:hsl(9,81%,61%);color:hsl(0,0%,100%);">
hsl(9, 81%, 61%)
</h3>

运行一下

RGBA 值

RGBA类似于RGB模式，不同的是多出一个参数alpha。

rgba(red, green, blue, alpha)

alpha代表透明度，取值0-1，越小则透明度越高，0则意味着完全透明，1代表着完全不透明。

<h3 style="background:rgb(255, 99, 71);color:rgb(255,255,255);">
rgb(255, 99, 71)
</h3>

<h3 style="background:rgba(255,99,71,0.5);color:rgb(255,255,255);">
rgba(255, 99, 71, 0.5)
</h3>

运行一下

HSLA 值

HSLA类似HSL格式，不同的也是多出一个参数alpha。

hsl(hue, saturation, lightness, alpha)

alpha代表透明度，取值0-1，越小则透明度越高，0则意味着完全透明，1代表着完全不透明。

<h3 style="background-color:hsl(8,97%,65%);color:hsl(0,0%,100%);">
hsl(8, 97%, 65%)
</h3>

<h3 style="background-color:hsla(8,97%,65%,0.5);color:hsl(0,0%,100%);">
hsla(8, 97%, 65%, 0.5)
</h3>

运行一下