javascript - Is color format specified in the spec for getComputedStyle? - Stack Overflow

admin管理员组

文章数量:1315101

I'm parsing a color string returned by getComputedStyle to get R, G, B, and A values from it.

So far (in Chrome and Firefox), color values always seem to e back in rgb or rgba format which is easy to parse:

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

I cannot, however, find any promise about color format in any of the specs for getComputedStyle listed on its MDN page.

Is there any guarantee of color format from getComputedStyle? Or is it entirely up to browser implementation?

I'd prefer not to have to check for HEX and HSLA values (and really whatever else is possible - I'm not entirely sure).

A quick snippet of code for testing color values in your console:

console.log((str => {
    const div = document.createElement("div");
    div.style.backgroundColor = str;
    document.body.append(div);
    return getComputedStyle(div).backgroundColor;
})("magenta"));

I'm parsing a color string returned by getComputedStyle to get R, G, B, and A values from it.

So far (in Chrome and Firefox), color values always seem to e back in rgb or rgba format which is easy to parse:

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

I cannot, however, find any promise about color format in any of the specs for getComputedStyle listed on its MDN page.

Is there any guarantee of color format from getComputedStyle? Or is it entirely up to browser implementation?

I'd prefer not to have to check for HEX and HSLA values (and really whatever else is possible - I'm not entirely sure).

A quick snippet of code for testing color values in your console:

console.log((str => {
    const div = document.createElement("div");
    div.style.backgroundColor = str;
    document.body.append(div);
    return getComputedStyle(div).backgroundColor;
})("magenta"));

• javascript
• css
• colors
• getputedstyle
• cssom

Share Improve this question Follow edited Jan 9, 2023 at 17:10 TylerH 21.1k7777 gold badges7979 silver badges112112 bronze badges asked Apr 8, 2021 at 13:45 Sandy GiffordSandy Gifford 8,14655 gold badges4343 silver badges7171 bronze badges 6

• I believe since IE6 (hex) everything has exclusively returned RGB/A, but I can't find any official documentation to back that up. – DBS Commented Apr 8, 2021 at 13:50
• @DBS yeah, that's sort of where I am right now. Pretty confident I could get away with it, but in search of that last 10% to help me sleep soundly at night :) – Sandy Gifford Commented Apr 8, 2021 at 13:55
• What happens with transparent? (Which is I suppose, technically, not the same as any rgba bo). – A Haworth Commented Apr 8, 2021 at 13:59
• @AHaworth in FF: rgba(0, 0, 0, 0) – Sandy Gifford Commented Apr 8, 2021 at 14:03
• @AHaworth I've included a code snippet for testing colors – Sandy Gifford Commented Apr 8, 2021 at 14:05

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

CSSOM does not state this directly, but instead references css-color-4:

To serialize a CSS ponent value depends on the ponent, as follows:

<color>
If <color> is a ponent of a resolved value, see CSS Color 4 §4.6 Resolving <color> Values.

If <color> is a ponent of a puted value, see CSS Color 4 §4.7 Serializing <color> Values.

For the purposes of getComputedStyle(), both of the above lines mean the same thing. Specifically, section 4.7.2 covers the majority of monly used formats:

4.7.2. Serializing sRGB values

The serialized form of the following sRGB values:

• hex colors
• rgb() and rgba() values
• hsl() and hsla() values
• hwb() values
• named colors

is derived from the puted value and thus, uses either the rgb() or rgba() form (depending on whether the alpha is exactly 1, or not), with lowercase letters for the function name.

Section 4.7.6 covers system colors (putes to lowercase), transparent (putes to rgba(0, 0, 0, 0)) and currentColor (putes to lowercase currentcolor).

As css-color-4 introduces several new ways to specify colors, other sections exist for other formats such as §4.7.3 for LCH values, §4.7.4 for the color() function, and more.

This means that color values from getComputedStyle() are guaranteed to be in either rgb() or rgba() format, depending on the alpha value, only when the specified values are in any of the formats in §4.7.2. But §4.7.2 and §4.7.6 cover the vast majority of use cases in everyday CSS, so they can still be relied on. Considering the other, exotic formats aren't really supported anywhere yet, it's probably not worth testing for them until they enjoy any sort of mainstream use.

Wanted to follow up with some real world examples of puted colors, too long to fit in a ment:

const colors = [
  "red",
  // other test colors
];
const results = {};
for (const color of colors) {
  document.body.style.color = color;
  results[color] = getComputedStyle(document.body).color;
}
console.table(results);

In Chrome, running this code produces:

Specified	Computed
rebeccapurple	rgb(102, 51, 153)
#f092	rgba(255, 0, 153, 0.133)
#ff0099	rgb(255, 0, 153)
rgb(255 0 153)	rgb(255, 0, 153)
rgb(255, 0, 153)	rgb(255, 0, 153)
rgb(255 0 153 / 80%)	rgba(255, 0, 153, 0.8)
hsl(150 30% 60%)	rgb(122, 184, 153)
color-mix(in srgb, red, #0000ff 50%)	color(srgb 0.5 0 0.5)
color-mix(in hsl, red, #0000ff 50%)	color(srgb 1 0 1)
color-mix(in oklab, red, #0000ff 50%)	oklab(0.539974 0.0962086 -0.0928316)
hsl(from red 240deg s l)	color(srgb 0 0 1)
light-dark(white, black)	rgb(255, 255, 255)

本文标签： javascriptIs color format specified in the spec for getComputedStyleStack Overflow