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>
除了用颜色名的方式,还可以使用RGB、HEX、HSL、RGBA与HSLA的方式来定义颜色。
以颜色名为“Tomato”的色彩为例,rgb(255, 99, 71)
、 #ff6347
、 hsl(9, 100%, 64%)
与使用色彩名的方式等价。
如下所示,同样是“Tomato”颜色,不一样的是下面的色彩还有50%的透明度。
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即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的方式是利用色调(hue)、饱和度(saturation)、明度(lightness)这三个指数进行对颜色的定义。
hsl(hue, saturation, lightness)
<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类似于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类似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>