在css3樣式中何者不是色彩表示方式

语法

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

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

颜色关键字

颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，例如 red、blue、brown或者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。

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 级标准的浏览器中，它们接受相同的参数，作用效果也相同。

R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。比如，#ff0000等价于#ff0000ff。

R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。比如，#f09和#ff0099表示同一颜色。类似地，四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。比如，#0f38和#00ff3388表示相同颜色。

R（红）、G（绿）、B （蓝）可以是<number>（数字），或者<percentage>（百分比），255 相当于 100%。A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

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.

备注： 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.

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

CSS Colors Level 4 adds support for space-separated values in the functional notation.

系统颜色

In forced colors mode (detectable with the forced-colors (en-US) 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.

Text of active links

Background of push buttons

Text of push buttons

Background of application content or documents

Text in application content or documents

Background of input fields

Text in input fields

Text that is disabled

Background of items that are selected in a control

Text of items that are selected in a control

Text of non-active, non-visited links

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.

Active window border.

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

Background color of multiple document interface.

Desktop background.

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

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.

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

Inactive window border.

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

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

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

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

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

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

Background color of scroll bars.

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.

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.

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.

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.

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 background. Should be used with the WindowText foreground color.

Window frame.

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.

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.

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.

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

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

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.

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.

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

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

TBD

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.

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.

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.

TBD

TBD

TBD

TBD

TBD

TBD

TBD

TBD

TBD

TBD

TBD

TBD

TBD

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

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

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

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

Default platform hyperlink color.

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.

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

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

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

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.

User's preference for the document background color.

User's preference for the text color.

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

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

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 不同的透明度

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

参见

• 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