<color>

翻译不完整。 请帮助我们翻译这篇文章!

CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。一个颜色可以包括一个alpha通道透明度值,来表明颜色如何与它的背景色混合(composite)

一个<color>可以以如下方式定义:

注意:本文章详细描述了<color>数据类型。如要了解更多关于在HTML中使用颜色的信息,请参阅使用CSS为HTML元素应用颜色

语法

<color>可以以以下方式指定。

注意:尽管 CSS 颜色值被精确定义,但在不同的输出设备上仍然有可能显示不一。它们大多数是不可被校准的,而且有些浏览器不支持输出设备的色彩配置(color profile)

颜色关键字

颜色关键字(color keywords)是不区分大小写的标识符,它表示一个具体的颜色,例如 redbluebrown或者lightseagreen 。尽管名称或多或少描述了分别的颜色,但必定是人工的,其后没有严格的标准。

在使用关键字时有几个需要留意的注意事项:

  • 除了通常的 16 个 HTML 基本颜色,其它的不能被用于 HTML 。HTML 将通过一个特定的计算程序转换这些未知的值,这将导致成为完全不同的颜色。这些关键字应只被用于 SVG 和 CSS 。
  • 未知的关键字会让 CSS 属性无效。无效的属性将被忽略,该颜色将没有作用。这是一个和 HTML 相比不同的行为。
  • 未使用关键字定义的颜色在 CSS 中有任意的透明度,它们是单实色。
  • 一些关键字表示同样的颜色:
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey
  • 虽然关键字的名称取自常见的 X11 颜色名,然而由于生产商为具体的硬件所做的定制,颜色可能与 X11 系统上相应的颜色有所偏差。

注意:可接受的关键字列表在CSS的演变过程中发生了改变:

  • CSS 标准 1 只接受 16 个基本颜色,称为VGA颜色,因为它们来源于 VGA 显卡所显示的颜色集合而被称为 VGA colors (视频图形阵列色彩)。
  • CSS 标准 2 增加了 orange 关键字。
  • 从一开始,浏览器接受其它的颜色,由于一些早期浏览器是 X11 应用程序,这些颜色大多数是 X11 命名的颜色列表,虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准;CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作扩张的颜色关键字X11 颜色SVG 颜色
  • CSS颜色标准 4 添加可rebeccapurple关键字来纪念web先锋Eric Meyer
规范 颜色 关键字 RGB 十六进制数 实样
CSS Level 1 black(黑) #000000
silver(银) #c0c0c0
gray(灰) #808080
white(白) #ffffff
maroon(褐) #800000
red(红) #ff0000
purple(紫) #800080
fuchsia(紫红) #ff00ff
green(绿) #008000
lime(绿黄) #00ff00
olive(橄榄绿) #808000
yellow(黄) #ffff00
navy(藏青) #000080
blue(蓝) #0000ff
teal(青) #008080
aqua(水绿) #00ffff
CSS Level 2 (Revision 1) orange(橙) #ffa500
CSS Color Module Level 3 aliceblue(浅灰蓝) #f0f8ff
antiquewhite(古董白) #faebd7
aquamarine(海蓝) #7fffd4
azure(蔚蓝) #f0ffff
beige(浅褐) #f5f5dc
bisque(橘黄) #ffe4c4
blanchedalmond(杏仁白) #ffebcd
blueviolet(蓝紫) #8a2be2
brown(褐) #a52a2a
burlywood(原木色) #deb887
cadetblue(灰蓝) #5f9ea0
chartreuse(黄绿) #7fff00
chocolate(巧克力色) #d2691e
coral(珊瑚红) #ff7f50
cornflowerblue(矢车菊蓝) #6495ed
cornsilk(玉米穗黄) #fff8dc
crimson(深红) #dc143c
darkblue(深蓝) #00008b
darkcyan(深青) #008b8b
darkgoldenrod(暗金) #b8860b
darkgray[*](深灰) #a9a9a9
darkgreen(深绿) #006400
darkgrey[*](深灰) #a9a9a9
darkkhaki(暗黄褐) #bdb76b
darkmagenta(深紫) #8b008b
darkolivegreen(深橄榄绿) #556b2f
darkorange(深橙) #ff8c00
darkorchid(深兰花紫) #9932cc
darkred(深红) #8b0000
darksalmon(深橙红) #e9967a
darkseagreen(深海绿) #8fbc8f
darkslateblue(暗灰蓝) #483d8b
darkslategray[*](墨绿) #2f4f4f
darkslategrey[*](墨绿) #2f4f4f
darkturquoise(暗宝石绿) #00ced1
darkviolet(深紫罗兰) #9400d3
deeppink(深粉红) #ff1493
deepskyblue(深天蓝) #00bfff
dimgray[*](暗灰) #696969
dimgrey[*](暗灰) #696969
dodgerblue(遮板蓝) #1e90ff
firebrick(砖红) #b22222
floralwhite(花白) #fffaf0
forestgreen(丛林绿) #228b22
gainsboro(浅灰) #dcdcdc
ghostwhite(幽灵白) #f8f8ff
gold(金) #ffd700
goldenrod(橘黄) #daa520
greenyellow(黄绿) #adff2f
grey(灰) #808080
honeydew(蜜瓜色) #f0fff0
hotpink(亮粉) #ff69b4
indianred(印第安红) #cd5c5c
indigo(靛蓝) #4b0082
ivory(象牙白) #fffff0
khaki(卡其色) #f0e68c
lavender(淡紫) #e6e6fa
lavenderblush(淡紫红) #fff0f5
lawngreen(草绿) #7cfc00
lemonchiffon(粉黄) #fffacd
lightblue(淡蓝) #add8e6
lightcoral(浅珊瑚色) #f08080
lightcyan(淡青) #e0ffff
lightgoldenrodyellow(浅金黄) #fafad2
lightgray[*](浅灰) #d3d3d3
lightgreen(浅绿) #90ee90
lightgrey[*](浅灰) #d3d3d3
lightpink(淡粉) #ffb6c1
lightsalmon(浅肉色) #ffa07a
lightseagreen(浅海绿) #20b2aa
lightskyblue(浅天蓝) #87cefa
lightslategray[*](浅青灰) #778899
lightslategrey[*](浅青灰) #778899
lightsteelblue(浅钢蓝) #b0c4de
lightyellow(浅黄) #ffffe0
limegreen(酸橙绿) #32cd32
linen(亚麻色) #faf0e6
mediumaquamarine(中绿) #66cdaa
mediumblue(中蓝) #0000cd
mediumorchid(间兰花紫) #ba55d3
mediumpurple(中紫) #9370db
mediumseagreen(间海绿) #3cb371
mediumslateblue(中暗蓝) #7b68ee
mediumspringgreen(中春绿) #00fa9a
mediumturquoise(中海湖蓝) #48d1cc
mediumvioletred(中紫罗兰) #c71585
midnightblue(午夜蓝) #191970
mintcream(薄荷乳白) #f5fffa
mistyrose(粉玫瑰红) #ffe4e1
moccasin(鹿皮色) #ffe4b5
navajowhite(纳瓦白) #ffdead
oldlace(浅米色) #fdf5e6
olivedrab(橄榄褐) #6b8e23
orangered(橙红) #ff4500
orchid(兰花紫) #da70d6
palegoldenrod(灰菊黄) #eee8aa
palegreen(苍绿) #98fb98
paleturquoise(苍宝石绿) #afeeee
palevioletred(苍紫罗兰) #db7093
papayawhip(木瓜色) #ffefd5
peachpuff(桃色) #ffdab9
peru(秘鲁色) #cd853f
pink(粉) #ffc0cb
plum(李子色) #dda0dd
powderblue(粉蓝) #b0e0e6
rosybrown(玫瑰粽) #bc8f8f
royalblue(宝蓝) #4169e1
saddlebrown(马鞍棕) #8b4513
salmon(鲑肉色) #fa8072
sandybrown(沙褐色) #f4a460
seagreen(海绿) #2e8b57
seashell(贝壳白) #fff5ee
sienna(赭) #a0522d
skyblue(天蓝) #87ceeb
slateblue(青蓝) #6a5acd
slategray[*](青灰) #708090
slategrey[*](青灰) #708090
snow(雪白) #fffafa
springgreen(春绿) #00ff7f
steelblue(铁青) #4682b4
tan(棕褐) #d2b48c
thistle(苍紫) #d8bfd8
tomato(番茄红) #ff6347
turquoise(蓝绿) #40e0d0
violet(紫罗兰色) #ee82ee
wheat(麦色) #f5deb3
whitesmoke(烟白) #f5f5f5
yellowgreen(黄绿) #9acd32
CSS Color Module Level 4 rebeccapurple(利百加紫) #663399

(译者注:颜色译名仅供参考。)

transparent 关键字

transparent 关键字表示一个完全透明的颜色,即该颜色看上去将是背景色。从技术上说,它是带有阿尔法通道为最小值的黑色,是 rgba(0,0,0,0) 的简写。

注意兼容性:为避免未预料的行为,比如gradient中,the current CSS spec states that transparent should be calculated in the alpha-premultiplied color space. 但是,注意旧的浏览器可能将其作为alpha值为0的黑色。

过去的注释:transparent 关键字在 CSS Level 2 (Revision 1) 中不是一个真实的颜色。它是一个特殊的关键字,可以代替一个普通的 <color> 值用于两个 CSS 属性中: backgroundborder。本质上使用它可以覆盖一个继承的单色。随着经由阿尔法通道(alpha channels)透明度的支持,transparent 在 CSS Colors Level 3 中被重新定义为一个真实的颜色,允许在任何一个需要 <color> 值的地方使用,像 color 属性。

currentColor 关键字

currentColor 关键字代表原始的 color 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。

它也能用于那些继承了元素的 color 属性计算值的属性,相当于在这些元素上使用 inherit 关键字,如果这些元素有该关键字的话。

currentcolor示例

该行的颜色(一个填充颜色的 div)应用它继承自父级的 color 属性。

HTML
<div style="color:blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background:currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>
结果

RGB颜色

颜色可以使用红-绿-蓝(red-green-blue (RGB))模式的两种方式被定义:

语法

RGB颜色可以通过以#为前缀的十六进制字符和函数(rgb()rgba())标记表示。

注意:在CSS 颜色标准 4 中,rgba()是rgb()的别称。在实行第4级标准的浏览器中,它们接受相同的参数,作用效果也相同。

十六进制符号:#RRGGBB[AA]
R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F)。A是可选的。比如,#ff0000等价于#ff0000ff
十六进制符号:#RGB[A]
R(红)、G(绿)、B (蓝)和A (alpha)是十六进制字符(0–9、A–F)。A是可选的。三位数符号(#RGB)是六位数形式(#RRGGBB)的减缩版。比如,#f09#ff0099表示同一颜色。类似地,六位数符号(#RGBA)是八位数形式(#RRGGBBAA)的减缩版。比如,#0f38#00ff3388表示相同颜色。
函数符: rgb[a](R, G, B[, A])
R(红)、G(绿)、B (蓝)可以是<number>(数字),或者<percentage>(百分比),255相当于100%。A(alpha)可以是01之间的数字,或者百分比,数字1相当于100%(完全不透明)。
函数符:rgb[a](R G B[ / A])
CSS 颜色级别 4 支持用空格分开的值。

HSL颜色

颜色也可以使用 hsl() 函数符被定义为色相-饱和度-亮度(Hue-saturation-lightness)模式。HSL 相比 RGB 的优点是更加直观:你可以估算你想要的颜色,然后微调。它也更易于创建相称的颜色集合。(通过保持相同的色相并改变亮度/暗度和饱和度)。

Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue).

语法

HSL colors are expressed through the functional hsl() and hsla() notations.

Note: As of CSS Colors Level 4, hsla() is an alias for hsl(). In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way.

Functional notation: hsl[a](H, S, L[, A])
H (hue) is an <angle> of the color circle given in degs, rads, grads, or turns in CSS Color Module Level 4. When written as a unitless <number>, it is interpreted as degrees, as specified in CSS Color Module Level 3. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is “normal.”
A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
Functional notation: hsl[a](H S L[ / A])
CSS Colors Level 4 adds support for space-separated values in the functional notation.

系统颜色

In forced colors mode (detectable with the forced-colors media query), most colors are restricted into a user- and browser-defined palette. These system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers. 

The keywords in the following list are defined by the CSS Color Module Level 4 specification.

Note that these keywords are case insensitive, but are listed here with mixed case for readability.

ActiveText

Text of active links

ButtonFace

Background of push buttons

ButtonText

Text of push buttons

Canvas

Background of application content or documents

CanvasText

Text in application content or documents

Field

Background of input fields

FieldText

Text in input fields

GrayText

Text that is disabled

Highlight

Background of items that are selected in a control

HighlightText

Text of items that are selected in a control

LinkText

Text of non-active, non-visited links

VisitedText

Text of visited links

Deprecated system color keywords

The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated. for use on public web pages.

ActiveBorder

Active window border.

ActiveCaption

Active window caption. Should be used with CaptionText as foreground color.

AppWorkspace

Background color of multiple document interface.

Background

Desktop background.

ButtonHighlight

The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

ButtonShadow

The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

CaptionText

Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.

InactiveBorder

Inactive window border.

InactiveCaption

Inactive window caption. Should be used with the InactiveCaptionText foreground color.

InactiveCaptionText

Color of text in an inactive caption. Should be used with the InactiveCaption background color.

InfoBackground

Background color for tooltip controls. Should be used with the InfoText foreground color.

InfoText

Text color for tooltip controls. Should be used with the InfoBackground background color.

Menu

Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.

MenuText

Text in menus. Should be used with the Menu background color.

Scrollbar

Background color of scroll bars.

ThreeDDarkShadow

The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDFace

The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.

ThreeDHighlight

The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDLightShadow

The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

ThreeDShadow

The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

Window

Window background. Should be used with the WindowText foreground color.

WindowFrame

Window frame.

WindowText

Text in windows. Should be used with the Window background color.

Mozilla System Color Extensions

-moz-ButtonDefault

The border color that goes around buttons that represent the default action for a dialog box.

-moz-ButtonHoverFace

The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.

-moz-ButtonHoverText

The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.

-moz-CellHighlight

Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.

-moz-CellHighlightText

Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.

-moz-Combobox

Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.

-moz-ComboboxText

Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.

-moz-Dialog

Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.

-moz-DialogText

Text color for dialog boxes. Should be used with the -moz-Dialog background color.

-moz-dragtargetzone
-moz-EvenTreeRow

Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.

-moz-html-CellHighlight

Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.

-moz-html-CellHighlightText

Text color for highlighted items in HTML <select>s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.

-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
-moz-mac-chrome-inactive
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover

Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.

-moz-MenuHoverText

Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.

-moz-MenuBarText

Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.

-moz-MenuBarHoverText

Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.

-moz-nativehyperlinktext

Default platform hyperlink color.

-moz-OddTreeRow

Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.

-moz-win-communicationstext

Should be used for text in objects with -moz-appearance: -moz-win-communications-toolbox;.

-moz-win-mediatext

Should be used for text in objects with -moz-appearance: -moz-win-media-toolbox.

-moz-win-accentcolor


Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.

-moz-win-accentcolortext


Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

Mozilla Color Preference Extensions

-moz-activehyperlinktext

User's preference for text color of active links. Should be used with the default document background color.

-moz-default-background-color

User's preference for the document background color.

-moz-default-color

User's preference for the text color.

-moz-hyperlinktext

User's preference for the text color of unvisited links. Should be used with the default document background color.

-moz-visitedhyperlinktext

User's preference for the text color of visited links. Should be used with the default document background color.

插值

在动画和渐变中, <color> 值会在每个红绿蓝成分中插值。每一个成分都会插值为浮点实数。注意颜色的插值发生在 alpha-premultiplied sRGBA color space 中,以避免出现未预料的灰色。在动画中,插值速度由时间函数决定。

Accessibility considerations

Some people have difficulty distinguishing colors. The WCAG 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See Color and color contrast for more information.

示例

颜色值检测器

在这个示例中,我们提供一个<div>和文本输入框。输入一个有效的颜色,则<div>会显示这个颜色,可以让你检测颜色值。

HTML

<div></div>
<hr>
<label for="color">Enter a valid color value:</label>
<input type="text" id="color">

CSS

div {
  width: 100%;
  height: 200px;
}

结果

RGB的多种语法

这个例子显示了一个颜色可以以多种RGB颜色语法表示。

/* 这些语法都表示同一个颜色:a fully opaque hot pink */

/* 十六进制语法 */
#f09
#F09
#ff0099
#FF0099

/* 函数语法 */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* 错误:不要混用数字和百分比 */
rgb(255 0 153)

/* 带有alpha值的十六进制语法 */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* 带有alpha值的函数语法 */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* 空格语法 */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* 带有浮点值的函数语法 */
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)

RGB的多种透明度

/* 十六进制语法 */
#3a30                    /*   完全透明的绿色 */ 
#3A3F                    /* 完全不透明的绿色 */ 
#33aa3300                /*   完全透明的绿色 */ 
#33AA3380                /*  50%不透明的绿色 */ 

/* 函数语法 */
rgba(51, 170, 51, .1)    /*  10%不透明的绿色 */ 
rgba(51, 170, 51, .4)    /*  40%不透明的绿色 */ 
rgba(51, 170, 51, .7)    /*  70%不透明的绿色 */ 
rgba(51, 170, 51,  1)    /* 完全不透明的绿色 */ 

/* 空格语法 */
rgba(51 170 51 / 0.4)    /*  40%不透明的绿色 */ 
rgba(51 170 51 / 40%)    /*  40%不透明的绿色 */ 

/* 带有浮点值的函数语法 */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

HSL的多种语法

/* 以下示例都表示同一颜色:a lavender */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* 以下示例都表示同一颜色:a lavender that is 15% opaque. */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

完全饱和颜色

符号 描述 展示
hsl(0, 100%, 50%) 红色
hsl(30, 100%, 50%) 橙色
hsl(60, 100%, 50%) 黄色
hsl(90, 100%, 50%) 黄绿色
hsl(120, 100%, 50%) 绿色
hsl(150, 100%, 50%) 蓝绿色(青绿色)
hsl(180, 100%, 50%) 青色
hsl(210, 100%, 50%) 天蓝色
hsl(240, 100%, 50%) 蓝色
hsl(270, 100%, 50%) 紫色
hsl(300, 100%, 50%) 品红色(洋红色)
hsl(330, 100%, 50%) 粉红色
hsl(360, 100%, 50%) 红色

不同明暗度的绿色

符号 描述 展示
hsl(120, 100%, 0%) 黑色
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%) 白色

饱和的和不饱和的绿色

符号 描述 展示
hsl(120, 100%, 50%) 绿色
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%) 灰色

HSL不同的透明度

hsla(240, 100%, 50%, .05)     /*   5% opaque blue */ 
hsla(240, 100%, 50%, .4)      /*  40% opaque blue */ 
hsla(240, 100%, 50%, .7)      /*  70% opaque blue */ 
hsla(240, 100%, 50%, 1)       /* full opaque blue */ 

/* Whitespace syntax */
hsla(240 100% 50% / .05)      /*   5% opaque blue */ 

/* Percentage value for alpha */
hsla(240 100% 50% / 5%)       /*   5% opaque blue */ 

Specifications

Specification Status Comment
CSS Color Module Level 4 Working Draft Adds rebeccapurple, four- (#RGBA) and eight-digit (#RRGGBBAA) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in hsl() colors.
CSS Color Module Level 3
<color>
Recommendation Deprecates system colors. Adds SVG colors and rgba(), hsl(), and hsla() functional notations.
CSS Level 2 (Revision 1)
<color>
Recommendation Adds the orange keyword and system colors.
CSS Level 1
<color>
Recommendation Initial definition. Includes 16 basic color keywords.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<color>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Alpha color values (rgba(), hsla())Chrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Full support 62
Full support 62
Full support 52
Disabled
Disabled From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 79Firefox Full support 49IE No support NoOpera Full support 49
Full support 49
Full support 39
Disabled
Disabled From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 9.1WebView Android Full support 62Chrome Android Full support 62
Full support 62
Full support 52
Disabled
Disabled From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 49Opera Android Full support 47
Full support 47
Full support 41
Disabled
Disabled From version 41: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 9.3Samsung Internet Android Full support 8.0
currentcolorChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 9.5Safari Full support 4WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
Allow floats in rgb() and rgba()Chrome Full support 66Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 53Safari Full support 12.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android Full support 9.0
HSL color values (hsl())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0
hsl() can accept alpha valuesChrome Full support 65Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 52Safari Full support 12.1WebView Android Full support 65Chrome Android Full support 65Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android Full support 9.0
Keyword color valuesChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3
Notes
Full support 3
Notes
Notes Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
rebeccapurpleChrome Full support 38Edge Full support 12Firefox Full support 33IE Full support 11Opera Full support 25Safari Full support 9WebView Android Full support 38Chrome Android Full support 38Firefox Android Full support 33Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support 3.0
rgb() can accept alpha valuesChrome Full support 65Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 52Safari Full support 12.1WebView Android Full support 65Chrome Android Full support 65Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android Full support 9.0
RGB functional notation (rgb())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Space-separated functional color notationsChrome Full support 65Edge Full support 79Firefox Full support 52IE No support NoOpera Full support 52Safari Full support 12.1WebView Android Full support 65Chrome Android Full support 65Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android Full support 9.0
transparentChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参见