当前位置：文江博客知识库简体中文文档 Web CSS color_value

<color> - CSS（层叠样式表）编辑

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

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

使用一个关键字（比如blue或transparent）
使用RGB立体坐标（RGB cubic-coordinate）系统（以“#”加十六进制或者 rgb() 和 rgba() 函数表达式的形式）
使用HSL圆柱坐标（HSL cylindrical-coordinate）系统（以 hsl() 和 hsla() 函数表达式的形式）

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

语法

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

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

规范	颜色	关键字	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 属性中： background 和 border。本质上使用它可以覆盖一个继承的单色。随着经由阿尔法通道（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）可以是0到1之间的数字，或者百分比，数字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.

HTML

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

CSS

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

JavaScript

const inputElem = document.querySelector('input');
const divElem = document.querySelector('div');

function validTextColor(stringToTest) {
  if (stringToTest === "") { return false; }
  if (stringToTest === "inherit") { return false; }
  if (stringToTest === "transparent") { return false; }

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") { return true; }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener('change', () => {
  if(validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = '';
  } else {
    divElem.style.backgroundColor = 'white';
    divElem.textContent = 'Invalid color value';
  }
});

结果

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.

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

The opacity property, allowing to define the transparency of color at the element level.
The color, background-color, border-color, outline-color, text-shadow, box-shadow properties.
CSS Reference index

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

词条统计

浏览：85 次

字数：73342

最后编辑：7年前

编辑次数：0 次

友情链接

文江博客

<color> - CSS（层叠样式表）编辑

语法

颜色关键字

transparent 关键字

currentColor 关键字

currentcolor示例

HTML

结果

RGB颜色

语法

HSL颜色

语法

系统颜色

Deprecated system color keywords

Mozilla System Color Extensions

Mozilla Color Preference Extensions

插值

Accessibility considerations

示例

颜色值检测器

HTML

CSS

JavaScript

结果

RGB的多种语法

RGB的多种透明度

HSL的多种语法

完全饱和颜色

不同明暗度的绿色

饱和的和不饱和的绿色

HSL不同的透明度

Specifications

浏览器兼容性

参见

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

<color> - CSS（层叠样式表） 编辑

currentcolor示例

HTML

结果

语法

语法

Deprecated system color keywords

HTML

CSS

JavaScript

结果

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

词条统计

友情链接

<color> - CSS（层叠样式表）编辑

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。