search

enyancc / vscode-ext-color-highlight

Extension adds colored border around css/web colors in the editor
GNU General Public License v3.0
263 stars 84 forks source link

Wrong color displaying with 0x color #182

Open ylazy opened 1 year ago

ylazy commented 1 year ago

Hi!

Color with 4 letters (for example 0xDEAD) should be displayed like 0x00DEAD. Another example: 0xC0DE = 0x00C0DE. Currently, the extension is displaying wrong colors. Please see the image below. The colors on the right are correct.

image

Thank you for the great extension!

Ascor8522 commented 1 year ago

Color with 4 letters (for example 0xDEAD) should be displayed like 0x00DEAD.

Hex codes with 4 digits are not valid color codes according to the CSS specs. https://www.w3.org/TR/css-color-3/#rgb-color

You could argue the 4th digit stands for the opacity, so the 4 digits would be a shorthand for an RGBA color, which is fair.

However, that behavior should match the one for RGB colors, where the single digit is repeated.

The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display.

If #DEA becomes #DDEEAA, then #DEAD should become #DDEEAADD, and not #00DEAD

ylazy commented 1 year ago

@Ascor8522 I'm talking about a color value that is a Hexadecimal Integer Literal (0xRRGGBB), not String Value ("#RRGGBB"). Try to open the developer tool and enter this in the console:

0xDEAD == 0x00DEAD && 0xDEAD == 0x0000DEAD

Then you will get the result:

image

Ascor8522 commented 1 year ago

Those are just numbers then. They aren't colors.

Maybe the application you were writing was using those numbers as colors, but that's not something standard. It should also depend on the palette used.