 and CSS2, but also defines new properties and values.
2. Foreground Color: the color property
This property describes the foreground fill color of an element’s text content. In addition, it provides the value that currentcolor resolves to. If the currentcolor keyword is set on the color property itself, it is treated as color: inherit.
The initial value of this property is black.
There are several different ways to syntactically specify a given color.For example, to specify lime green:
em { color: lime; } /* color keyword */ em { color: rgb(0,255,0); } /* RGB range 0-255 */ em { color: rgb(0.0,100.0,0.0); } /* RGB range 0%-100% */
- <color>
- The <color> type is defined in a later section.
3. Representing sRGB Colors: the <color> type
CSS colors in the sRGB color space are represented by a triplet of values—
While all colors share an underlying storage format, CSS contains several syntaxes for specifying <color> values. Some directly specify the sRGB color, such as the rgb() and rgba() functions and the hex notation. Others are more human-friendly to write and understand, and are converted to an sRGB color by CSS, such as the hsl() and hsla() functions, or the long list of named colors defined by CSS.
In total, the definition of <color> is:
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <gray()> | <device-cmyk()> | <color-mod()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
Some operations work differently on achromatic colors. An achromatic color is a shade of gray: in the RGB colorspace, a color is achromatic if the red, green, and blue channels are all the same value; in the HSL colorspace, a color is achromatic if the saturation is 0%; in the HWB colorspace, a color is achromatic if the sum of the whiteness and blackness is at least 100%.
3.1. Notes On Using Colors
Although colors can add significant amounts of information to documents and make them more readable, color by itself should not be the sole means to convey important information. Please consider the W3C Web Content Accessibility Guidelines [WCAG20] when including color in your documents.
- 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element?
4. RGB Colors
There are several methods of directly specifying a color in terms of its RGBA channels.
4.1. The RGB functions: rgb() and rgba()
The rgb() function defines an RGB color by specifying the red, green, and blue channels directly. Its syntax is:
rgb() = rgb( <rgb-component>#{3} ) rgba() = rgba( <rgb-component>#{3} , <alpha-value> ) <rgb-component> = <number> | <percentage> <alpha-value> = <number> | <percentage>
The three <rgb-component>s. However, the CSS syntax allows full <number>s, not just <integer>s, for authoring convenience.
Some devices can output colors technically outside of the sRGB gamut, represented by channels with values less than 0% or greater than 100%. For this reason, values outside of the 0%-100% range are allowed, but are clamped to the device’s gamut.)
The transfer function is undefined outside the range 0% to 100%.. Values outside these ranges are not invalid, but are clamped to the ranges defined here at computed-value time. If omitted, it defaults to 100%.
4.2. The RGB hexadecimal notations: #RRGGBB
The CSS hex color notation allows a.
5. Named Colors
In addition to the various numeric syntaxes for <color>s, CSS defines a large set of named colors that can be used instead, so that common colors can be written and read more easily. A <named-color> is written as an <ident>, accepted anywhere a <color> is. As usual for CSS-defined <ident>s, all of these keywords are case-insensitive.
16 of CSS’s named colors come from HTML originally: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Most of the rest come from one version of the X11 color system, used in Unix-derived systems to specify colors for the console. (Two special color values, transparent and currentcolor, are specially defined in their own sections.)
Note: The history of the X11 color system is interesting, and was excellently summarized by Alex Sexton in his talk “Peachpuffs and Lemonchiffons”..
5.1. The transparent keyword
The keyword transparent specifies a transparent black color; that is, a color with its red, green, and blue channels all set to the minimum value and its alpha channel set to full transparency, equivalent to rgba(0, 0, 0, 0). It is a type of <named-color>.
5.2. The currentcolor keyword
The keyword currentcolor takes its value from the value of the color property on the same element. This happens at used-value time, which means that if the value is inherited, it’s inherited as currentcolor, not as the value of the color property, so descendants will use their own color property to resolve it.
If currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property.
.foo { color: red; background-color: currentcolor; }
This is equivalent to writing:
.foo { color: red; background-color: red; }
<p><em>Some <strong>really</strong> emphasized text.</em> <style> p { color: black; } em { text-emphasis: dot; } strong { color: red; } </style>
In the above example, the emphasis marks would be black over the text "Some" and "emphasized text", but red over the text "really".
Note: Multi-word keywords in CSS usually separate their component words with hyphens. currentcolor doesn’t, because it was originally introduced in SVG as a special attribute value spelled "currentColor", rather than a CSS value. Only later did CSS pick it up, at which point the capitalization stopped mattering, as CSS keywords are case-insensitive.> ) hsla() = hsla( <hue>, <percentage>, <percentage>, <alpha-value> ) <hue> = <number> | <angle>
The first argument specifies the hue. Hue is represented as an angle of the color circle (the rainbow, twisted around into a circle). The angle 0deg represents red (as does 360deg, 720deg, etc.), and the rest of the hues are spread around the circle, so 120deg represents green, 240deg represents blue, etc. Because this value is so often given in degrees, the argument can also be given as a number, which is interpreted as a number of degrees. is less than 0% or the lightness is greater than 100%, they are clipped to those values before being converted to an RGB color. Some output devices may support saturations greater than 100%, just as they support RGB values greater than 100%. If the saturation exceeds the output device’s gamut, it must be clipped to that device’s gamut before being converted to an RGB color. This clipping should preserve the hue of the color (that is, it’s shouldn’t be the same thing as clipping an RGB component to the device’s gamut), but this specification does not define how to do so.
The final argument specifies the alpha channel of the color. It’s interpreted identically to the fourth argument of the rgba() function. If omitted, it defaults to 100%.
The advantage of HSL over RGB is that it is far more intuitive: one can guess at the colors they want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the saturation and lightness).
hsl(120, 100%, 50%) lime green hsl(120, 100%, 25%) dark green hsl(120, 100%, 75%) light green hsl(120, 75%, 85%) pastel green
6.1. Converting HSL colors to RGB colors
Converting an HSL color to RGB hslToRgb(hue, sat, light) { if( light <= .5 ) { var t2 = light * (sat + 1); } else { var t2 = light + sat - (light * sat); } var t1 = light * 2 - t2; var r = hueToRgb(t1, t2, hue + 2); var g = hueToRgb(t1, t2, hue); var b = hueToRgb(t1, t2, hue - 2); return [r,g,b]; } function hueToRgb(t1, t2, hue) { if(hue < 0) hue += 6; if(hue >= 6) hue -= 6; if(hue < 1) return (t2 - t1) * hue + t1; else if(hue < 3) return t2; else if(hue < 4) return (t2 - t1) * (4 - hue) + t1; else return t1; }.
7..
<input type="color">. The outer wheel is used to select the hue, then the relative amounts of white and black are selected by clicking on the inner triangle. make the function invalid. If the sum of these two arguments is greater than 100%, then at computed-value time they are normalized to add up to 100%, with the same relative ratio.
The fourth argument specifies the alpha channel of the color. It’s interpreted identically to the fourth argument of the rgba(), or some shade of gray, without any hint of the chosen hue.
7.1. Converting HWB colors to RGB colors
Converting an HWB color to RGB is straightforward, and related to how one converts HSL to RGB. The following Javascript implementation of the algorithm assumes that the white and black components have already been normalized, so their sum is no larger than 100%, and have been converted into numbers in the range [0,1].
function hwbToRgb(hue, white, black) { var rgb = hslToRgb(hue, 1, .5); for(var i = 0; i < 3; i++) { rgb[i] *= (1 - white - black); rgb[i] += white; } return rgb; }
7.2. Examples of HWB Colors
8.  desination.. Device-dependent CMYK Colors: the device-cmyk() function
While screens typically display colors directly with RGB pixels, printers often represent colors in different ways. In particular, one of the most common print-based ways of representing colors is with CMYK: a combination of cyan, magenta, yellow, and black which yields a particular color on that device.%.
The fifth argument specifies the alpha channel of the color. It’s interpreted identically to the fourth argument of the rgba().
RESOLVED: If you accurately describe the output device’s color profile in an @color-profile rule then a sane implementation will not alter your colors so this is sufficient as a replacement for device-cmyk in general and provides a good RGB fallback automatically.
Typically, print-based applications will actually store the used colors as CMYK, and send them to the printer in that form. Unfortunately, CSS cannot do that; various CSS features require an RGB color, so that compositing/blending/etc. can be done. As such, CMYK colors must be converted to an equivalent RGB color. This is not trivial, like the conversion from HSL or HWB to RGB; the precise conversion depends on the precise characteristics of the output device.
If the user agent has information about the output device such that it believes it can accurately convert the CMYK color to a correct RGB color, the computed value of the device-cmyk() function must be that RGBA color. Otherwise, the computed value must be the fallback color.
color: device-cmyk(0, 81%, 81%, 30%); color: rgb(178, 34, 34); color: firebrick;
Note: these colors might not match precisely if the browser knows a more precise conversion between CMYK and RGB colors. It’s recommended that if authors use any CMYK colors in their document, that they use only CMYK colors in their document to avoid any color-matching difficulties. map to various RGBA colors depending on the physical characteristics of the output device.
Ideally, the user agent will be aware of the output device’s color profiles for RGBA and CMYK. If this is true, then the user agent must convert between CMYK and RGBA colors (and vice versa) by first converting the color into an appropriate device-independent color space, such as CIELab, and then converting into the output color space, using the appropriate color profiles for each operation.
This is not always possible, however. In that case, the user agent must use the following naive conversion algorithms.
To naively convert from CMYK to RGBA:
If a fallback color was specified, return that color (converting it to RGB as well, if necessary). Otherwise: black is 1
magenta = (1 - green - black) / (1 - black), or 0 if black is 1
yellow = (1 - blue - black) / (1 - black), or 0 if black is 1
- alpha is the same as the input color
- fallback color must be set to the input color
13. Modifying Colors: the color-mod() function
When specifying a color scheme for a site, one often wants a color that is close to another color, but slightly different. This becomes more important when CSS Variables are used, where an author may wish to define a "base" color, and then produce an array of slightly modified colors to use elsewhere.
The color-mod() function takes an existing color, and applies zero or more "color adjusters" to it, which specify how to manipulate the color in some way.
Several of the color adjusters straightforwardly manipulate the color as an RGB, HSL, or HWB color, as if you’d specified a color in the appropriate syntax with one argument slightly modified. Others perform more complex manipulations of the color, such as blending it or finding contrasting colors.
Additionally, the color-mod() function defines a new, more intuitive syntax for specifying named colors, based on CNS.
Actually add the CNS thing.
color-mod() = color( [ <color> | <hue> ] <color-adjuster>* ) <color-adjuster> = [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) | [red( | green( | blue( | alpha( | a(] '*' <percentage> ) | rgb( ['+' | '-'] [<number> | <percentage>]{3} ) | rgb( ['+' | '-'] <hash-token> ) | rgb( '*' <percentage> ) | [hue( | h(] ['+' | '-' | '*']? <angle> ) | [saturation( | s(] ['+' | '-' | '*']? <percentage> ) | [lightness( | l(] ['+' | '-' | '*']? <percentage> ) | [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) | [blackness( | b(] ['+' | '-' | '*']? <percentage> ) | tint( <percentage> ) | shade( <percentage> ) | blend( <color> <percentage> [rgb | hsl | hwb]? ) | blenda( <color> <percentage> [rgb | hsl | hwb]? ) | contrast( <percentage>? )
The first argument specifies the base color. If a <hue> is given, the base color is the HSL color with the given <hue>, 100% saturation, and 50% lightness (in other words, the fully-saturated color with the given hue).
After the base color, zero or more <color-adjuster>s can be specified. Each <color-adjuster> modifies the color in some way, passing a new base color to the next <color-adjuster> in the list. The same <color-adjuster> can be specified more than once in the list, such as color(red s(- 10%) s(- 10%)); each instance just modifies the color appropriately (in this case, producing hsl(0deg, 80%, 50%)).
There are several classes of <color-adjuster>s with various effects, defined in the following sections.
The computed value of a color-mod() function is the color produced by applying all the <color-adjuster>s to the base color.
Note: While scaling can be specified without any spaces, like lightness(*150%), adding/subtracting must be done with spaces after the +/-, or else the +/- will be interpreted as part of the number by the CSS parser.
An achromatic color doesn’t have a unique hue, so some <color-adjuster>s that would make the color no longer achromatic (such as s(50%)) have special behavior for achromatic colors, as described in each adjuster’s description. However, it is possible for, within the space of a single color-mod() function, for the base color to be chromatic, an adjuster to make it achromatic, and a following adjuster to make it chromatic again, with an author having the reasonable expectation that the hue is maintained.
To allow this, during the evaluation of a color-mod() function’s <color-adjuster>s, rather than storing intermediate colors as a 4-tuple of red, green, blue, and alpha, as usual for CSS colors, intermediate colors must be stored as a 5-tuple of red, green, blue, alpha, and hue angle, where the hue angle may be null for some colors and after some operations.
Whenever an operation interprets an achromatic color in HSL or HWB space, if the color has a non-null hue angle, that hue must be used for the color’s HSL/HWB interpretation. (Individual operations define how to handle null hue angles.)
If the base color is achromatic, the hue angle is initially null.
color(X w(+ 20%) s(+ 20%))
If X is a color like blue, this works in the expected way - after each operation, the color is still chromatic (and the return value is #33f).
On the other hand, if X is a greenish gray like #787, which is represented in HWB as hwb(120deg, 44%, 50%), the first operation will boost the sum of white and black to greater than 100%, making it an achromatic gray (#8f8f8f, to be specific).
However, the color-mod() function remembers that the hue of the color was originally 120deg, so when the second operation saturates the color, it will result in a greenish-gray again (hsl(120deg, 20%, 56%), slightly lighter and brighter than the original color, which is what was intended).
- Muted colors. Closure CSS Compiler computes a muted color from a FG and BG color: take the FG’s hue, drop the FG saturation some amount, average FG and BG lightness. I want more use-cases and visual examples of this being used.
- Inverting a color. Use-cases? Is this just done by inverting the r/g/b channels? Is the contrast() adjuster what people really mean when they ask for invert?
- Warmer/cooler. How to define? What’s warmer, red or yellow? What’s cooler, blue or green?
13.1. RGBA Adjustment
The most basic set of <color-adjuster>s modify the color’s channels directly, altering the amount of red, green, blue, or alpha in the color.
- [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
- [red( | green( | blue( | alpha( | a(] * <percentage> )
- Sets or adjust the red, blue, green, or alpha channels of the base color.
If there is no operator, the given channel is set to the given value.
If the operator is + or -, the given channel is interpreted as the matching type (<number> or <percentage>) and then incremented or decremented by the given value.
If the operator is *, the given channel is multipled by the given value.
- rgb( ['+' | '-']? [<number> | <percentage>]{3} )
- Adjusts the base color in the red, green, and blue channels simultaneously. All three channels are interpreted as the matching type (<number> or <percentage>) and then incremented or decremented by the given values, with the first value adjusting the red channel, the second value adjusting the green channel, and the third value adjusting the blue channel.
- rgb( ['+' | '-'] <hash-token> )
- Identical to the previous clause, except that the adjustments to the three channels are specified in hexadecimal format; the <hash-token> is interpreted as a hex color, then the red, green, and blue channels of the color are applied as adjustments to the base color.
- rgb( * <percentage> )
- The red, green, and blue channels of the base color are multiplied by the given value.
All <color-adjuster>s in this section, except for alpha() and a(), set the hue angle to null if the resulting color is achromatic.
13.2. HSL/HWB Adjustment
The hsl() and hwb() functions provide alternative ways to specify colors numerically, intended to be easier and more intuitive for humans. Similarly, the color-mod() function allows a color to be adjusted in these "virtual channels".
- [hue( | h(] ['+' | '-' | *]? <angle> )
- Sets or adjusts the hue of the base color, when base color is interpreted as an HSL color.
If there is no operator, the hue is set to the given value, regardless of what the hue angle was previously.
Otherwise, the hue is incremented or decremented, as appropriate, by the given value. If the hue angle is null, the adjuster instead does nothing.
- [saturation( | s(] ['+' | '-' | *]? <percentage> )
- [lightness( | l(] ['+' | '-' | *]? <percentage> )
- [whiteness( | w(] ['+' | '-' | *]? <percentage> )
- [blackness( | b(] ['+' | '-' | *]? <percentage> )
- Sets or adjusts the saturation, lightness, whiteness, or blackness of the base color, when base color is interpreted as an HSL or HWB color, as appropriate.
If there is no operator, the given channel is set to the given value.
If the operator is + or -, the given channel is incremented or decremented by the given value.
If the operator is *, the given channel is multiplied by the given value.
If the hue angle is null, the operation is s() or saturation(), and the adjuster would make the saturation greater than 0%, it instead does nothing.
If the hue angle is null, the operation is w(), white(), b(), or black(), and the adjuster would make the sum of whiteness and blackness less than 100%, it additionally adjusts the opposite HWB channel to make the sum equal to 100%. (That is, color(white w(- 20%)) would represent the same color as hwb(0, 80%, 20%).)
13.3. Tints and Shades: the tint and shade adjusters
While the color-mod() function does allow HWB adjustment of colors, the peculiarities of how HWB is defined make it more difficult than it should be to just define a lighter or darker version of a color. The tint and shade adjusters fix this, by simply mixing the base color with white or black.
- ''tint( <percentage> )''
- Mixes the base color with pure white to produce a lighter version of the base color.
Specifying a <percentage> less than 0% or greater than 100% is a syntax error, and makes the function invalid.
Linearly interpolate the red, green, and blue channels of the base color with the red, green, and blue channels of pure white (rgb(255,255,255)), where 0% returns the base color and 100% returns pure white.
Note: tint(X%) is identical to blend(white X% rgb).
- ''shade( <percentage> )''
- Mixes the base color with pure black to produce a darker version of the base color.
Identical to the previous clause, except the base color is mixed with pure black (rgb(0,0,0)) rather than pure white.
13.4. Color Blending: the blend and blenda adjusters
The tint() and shade() adjusters are common cases of the more general blend() adjuster, which mixes the base color with an arbitrary color.
- ''blend( <color> <percentage> [rgb | hsl | hwb]? )''
- Mixes the base color with the given color to produce an intermediate color.
Specifying a <percentage> less than 0% or greater than 100% is a syntax error, and makes the function invalid.
The final argument specifies which color space to blend the colors in, defaulting to rgb if not specified. Both the base color and the given color are interpreted as colors in the given color space, then the components are blended.For example, color(yellow blend(blue 50%)) blends yellow (#ffff00) with blue (#0000ff) equally, resulting in #808080, a medium gray.
On the other hand, color(yellow blend(blue 50% hsl)) blends the same colors in HSL space, where yellow is hsl(60, 100%, 50%) and blue is hsl(240, 100%, 50%), which results in hsl(150, 100%, 50%), a fully-saturated shade of green.
To determine the resulting color, interpret the base color and the given color in the appropriate color space (RGB, HSL, or HWB). Linearly interpolate each of the channels of the colors according to the given <percentage>, where 0% produces the specified <color> and 100% produces the base color.
If the color space is hsl or hwb, interpolate the hue channel either clockwise or counterclockwise, whichever results in a shorter "path" between the two hue angles. If the two hue angles are on opposite sides of the hue circle (separated by 180 degrees), take the clockwise path.
If the hue angle is null for one of the colors but not the other, treat the null hue angle as being equal to the non-null hue angle for the purpose of this adjuster. If both hue angles are null, the resulting color’s hue angle is null as well.
Note: The choice of how to transition when the difference is 180deg is arbitrary, and was chosen merely to provide an unambiguous answer. To achieve counter-clockwise behavior, adjust either color’s hue angle by a small amount toward the desired direction.For example, blending yellow (hue angle 60deg) with 50% purple (hue angle 300deg) results in red (hue angle 0deg), not cyan (hue angle 180deg), even though
60*50% + 300*50% == 180, because the distance between the two colors when moving counter-clockwise is only 120 degrees, as opposed to 240 degrees when going clockwise.
- ''blenda( <color> <percentage> [rgb | hsl | hwb]? )''
- Identical to the previous clause, except it pays attention to the alpha channel of the two colors (blend() just preserves the alpha channel of the base color).
Let w be the specified <percentage>, rescaled to the range [-1,1], where 0% maps to -1 and 100% maps to 1. Let a be the difference of the alpha channels of the base color and the specified <color>, also rescaled to the range [-1,1], where -100% (0% base color alpha and 100% specified color alpha) maps to -1 and 100% maps to 1.
If
w * a == -1, let new weight equal w. Otherwise, let new weight equal
(w + a) / (1 + w*a).
Reinterpret new weight as a percentage in the range [0%, 100%], where -1 maps to 0% and 1 maps to 100%. Calculate the result color as if blend() had been specified, using the new weight percentage instead of the specified <percentage>, and set the alpha channel of the result color to the average of the alpha channels of the base color and the specified <color>.
This blends the two colors in a way that pays attention to alpha, similar to how compositing does. Is there a better formula? The current one was determined empirically to give good results, but isn’t motivated by any theory.
Should we swap the defaults, so blend() does the alpha blending, and another name (or maybe another parameter) ignores alpha like blend() currently does? Check with definitions in CSS compositing and blending module.
13.5. Guaranteeing Adequate Contrast: the contrast adjuster
Guaranteeing that foreground and background colors contrast sufficiently is important, but even if one knows the mathematical definition of "appropriate contrast", it’s not trivial to calculate and figure out whether two arbitrary colors are good enough. The contrast() adjuster makes this easy, automatically computing a color that is sufficiently contrasting with the base color to satisfy accessibility guidelines.
- ''contrast( <percentage>? )''
- Finds a color that contrasts with the base color suffficiently to satisfy accessibility guidelines, using the definition of "contrast" given by WCAG 2.0 Guideline 1.4.3.
The <percentage> specifies the desired similarity between the base color and the returned color. 0% will return the minimum-contrast color (the closest color to the base color that still contrasts sufficiently), while 100% will return the maximum-contrast color (white or black, whichever contrasts the base color more) Specifying a value less than 0% or greater than 100% is invalid and a syntax error. If omitted, the <percentage> defaults to 100%.
- Compute the luminance of the base color. If it’s less than .5, the maximum-contrast color is hwb(X, 100%, 0%), where X is the hue angle of the base color. Otherwise, the maximum-contrast color is hwb(X, 0%, 100%), where X is the hue angle of the base color.
Note: In other words, the maximum-contrast color is either white or black, but with the hue set up correctly for the next step’s linear interpolation.
- Looking only at colors that are linear interpolations in HWB space (a la the blend() adjuster) between the base color and the maximum-contrast color, find the color with the smallest contrast ratio with the base color that is greater than 4.5. This is the minimum-contrast color. If there is no color with contrast ratio greather than 4.5, return the maximum-contrast color immediately.
Note: 4.5 is the contrast ratio required by WCAG for Level AA contrast.
Note: Using this method, the contrast ratio will be monotonically non-increasing as you go from the maximum-contrast color to the base color, so a simple binary search will identify the minimum-contrast color in a small number of iterations.
- Blend the minimum-contrast color and maximum-contrast color according to the specified <percentage>, as if ''color(maximum-contrast color blend(minimum-contrast color <percentage> hwb))'' were specified. Return the blended color.
To compute the luminance of a color:
The code below is only for sRGB, and duplicates the more general code in the conversions appendix.
- Scale the red, green, and blue channels of the color to the range [0,1].
- For each channel, if the channel’s value is less than or equal to 0.03928, set the channel’s value to
channel / 12.92. Otherwise, set the channel’s value to
((channel + 0.055) / 1.055) ^ 2.4.
Note: This reverses the logarithmic power scaling of the sRGB gamut, so the value of the channel is linear with respect to the amount of light produced.
- The luminance is:
0.2126*R + 0.7152*G + 0.0722*B
where R, G, and B are the adjusted red, green, and blue channels from the previous step.
Note: The luminance of a color within the sRGB gamut is contained within the range [0,1], where black is 0 and white is 1.
To compute the contrast ratio of two colors:
- Compute the luminance of both colors.
- The contrast ratio is:
(L1 + 0.05) / (L2 + 0.05)
where L1 is the larger of the two luminances, and L2 is the smaller.
Note: The contrast ratio of two colors is contained within the range [1,21], where two identical colors are 1 and the ratio of white and black is 21.
14. rgba(),.
If opacity has a value less than 1, the element forms a stacking context for its children. This means that any content outside of it cannot be layered in z-order between pieces of content inside of it, and vice versa. If the element is in a context where the z-index property applies, the auto value is treated as 0 for the element. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).
14.1. Simple alpha compositing
When drawing, implementations must handle alpha according to the rules in Section 14.2 Simple alpha compositing of [SVG11]. (If the color-interpolation or color-rendering properties mentioned in that section are not implemented or do not apply, implementations must act as though they have their initial values.)
15. Preserving Colors in Different-Capability Devices: the color-adjust property. The color-adjust property controls this.
The color-adjust property provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a given device, such as using light text on a dark background in a printed document. If user agents allow users to control this aspect of the document’s display, the user preference must be respected more strongly than the hint provided by.
16. Default Style Rules
The following stylesheet is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.
html { color: black; } /* traditional desktop user agent colors for hyperlinks */ :link { color: blue; } :visited { color: purple; }
The default background of the root element must be transparent. The default color of the canvas (the surface on which the document is painted) is UA-dependent, but is recommended to be white, especially if the above color rules are used.([  math.multiply(M, rgb).valueOf(); } function XYZ_to_lin_P3(XYZ) { // convert XYZ to linear-light P3 var M = math.matrix([ [([  math.multiply(M, rgb).valueOf(); } function XYZ_to_lin_2020(XYZ) { // convert XYZ to linear-light rec.2020 var M = math.matrix([  math.multiply(M, XYZ).valueOf(); } // Chromatic adaptation function D ]; }
Appendix A: Deprecated CSS System Colors
Earlier versions of CSS defined several additional named color keywords, the <deprecated-system-color>s, which were meant to take their value from operating system themes. These color names have been deprecated, however, as they are insufficient for their original purpose (making website elements look like their native OS counterparts), and represent a security risk, as it makes it easier for a webpage to "spoof" a native OS dialog.
User agents must support these keywords, but should map them to "default" values, not based on the user’s OS settings (for example, mapping all the "background" colors to white and "foreground" colors to black). Authors must not use these keywords.
- ActiveBorder
- Active window border.
- ActiveCaption
- Active window caption.
- AppWorkspace
- Background color of multiple document interface.
- Background
- Desktop background.
- ButtonFace
- The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.
- background.
- MenuText
- Text in menus.
-.
- WindowFrame
- Window frame.
- WindowText
- Text in windows.
Acknowledgments.
Changes
Changes from Colors..