HTML 颜色


使用预定义的颜色名称或RGB,HEX,HSL,RGBA,HSLA值指定HTML颜色。


颜色名称

在HTML中,可以使用颜色名称指定颜色:

番茄色(tomato)
橙色(orange)
宝蓝色(dodgerblue)
暗海藻色(mediumseagreen)
灰色(gray)
青蓝色(slateblue)
紫色(violet)
浅灰色(lightgray)

运行 »


背景颜色

您可以设置HTML标签的背景颜色:

Hello World


新手教程(www.uihtml.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程

实例

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">新手教程(www.uihtml.com)...</p>

运行 »

文字颜色

您可以设置文本的颜色:

Hello World

新手教程(www.uihtml.com)提供了编程的基础技术教程

HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识

实例

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">新手教程(www.uihtml.com)提供了编程的基础技术教程</p>
<p style="color:MediumSeaGreen;">HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
运行 »

边框颜色

您可以设置边框的颜色:

Hello World

Hello World

Hello World

实例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
运行 »

颜色值

在HTML中,还可以使用RGB值,HEX值,HSL值,RGBA值和HSLA值指定颜色:

与颜色名称“Tomato”相同:

rgb(255,99,71)
#ff6347
hsl(9,100%,64%)

与颜色名称“Tomato”相同,但设置了50%透明度:

rgba(255,99,71,0.5)
hsla(9,100%,64%,0.5)

实例

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
运行 »


RGB值

在HTML中,可以使用以下公式将颜色指定为RGB值:

rgb( 红色绿色蓝色

每个参数(红色,绿色和蓝色)定义0到255之间的颜色强度。

例如,rgb(255,0,0)显示为红色,因为红色设置为其最高值(255),其他值设置为0。

要显示黑色,所有颜色参数必须设置为0,如下所示:rgb(0,0,0)。

要显示白色,所有颜色参数必须设置为255,如下所示:rgb(255,255,255)。

通过混合以下RGB值进行实验:

红色

255

绿色

0

蓝色

0

实例

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

运行 »

通常使用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)

运行 »

十六进制值

在HTML中,可以使用以下形式的十六进制值指定颜色:

#rrggbb

其中rr(红色),gg(绿色)和bb(蓝色)是00和ff之间的十六进制值(与十进制0-255相同)。

例如,#ff0000显示为红色,因为红色设置为其最高值(ff),其他值设置为最低值(00)。

实例

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

运行 »

通常使用3个相等的值来定义灰度阴影:

实例

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff

运行 »

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%)

运行 »

饱和

饱和度可以描述为颜色的强度。

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%)

运行 »

亮度

颜色的亮度可以描述为您想要给出的颜色多少光,其中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%)

运行 »

通常通过将色调和饱和度设置为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%)

运行 »

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)

运行 »

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)

运行 »