HTML颜色

HTML颜色 HTML colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
详细的颜色设置和数值,参见https://www.w3schools.com/colors/default.asp

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

Color names

HTML supports 140 standard color names.
Background color

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text color

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border color

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

RGB

rgb(red红, green绿, blue蓝)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

HEX

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

HSL

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue色度, saturation饱和度, lightness亮度)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray. 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades.

RGBA

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

HSLA

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

HTML颜色页面参见:
https://www.w3schools.com/html/html_colors.asp

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,449评论 0 10
  • 最近这段时间在搞openGL ES处理视频和图像,要进行纹理混合,重新温习了一下大学时候的课本,找了一些资料,把一...
    北冥有猫其名为喵阅读 33,945评论 5 19
  • 很多有故事的长辈都会语重心长地说道:当下你正在经历的事情或者经历过的事情都是你唯一要经历的。 最近有人说...
    Summer_86b0阅读 387评论 1 1
  • iOS中的多线程解决方案: Pthreads NSThread GCD NSOperation & NSOpera...
    火焰与柠檬阅读 239评论 0 0
  • 承担起生活的重担,不叫勇气,敢于去过自己想过的生活,才叫勇气。 我们现在有多少人过的是自己想要的生活?大家都是在忙...
    随风远阅读 368评论 0 1