Chrome Devtools Converts All Hex Colors to Rgb

Chrome DevTools converts all HEX Colors to RGB

Step 1, click the gear icon

Step 2, change Color format

Original answer

Open Chrome DevTools panel:

Click 3 dots icon at the far right corner, select Settings, and in the Preferences panel find Elements > Color format, select the option you wish to have, As authored is the default option.

Chrome DevTools converts All HEX Colors to RGB on Computed tab: how to stop?

On the current version of Chrome that isn't possible, there is no setting for that.

The Computed tab is intended to only display the values that come from the browser (you can get the same values using Window.getComputedStyle()), but having it render the colors in the format of you choice is not unreasonable. Please file a feature request at http://crbug.com/new.

Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?

As per the spec:

If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one.

Meaning that no matter what is your input, the computed value always results in either rgb or rgba.

So, answering your question: yes, it is standard behaviour and no, you can't use hex or hsl as it will be computed back to rgba.

What do the different shades of colors mean on an asset in the Chrome Devtools Timeline?

Figured this out.

Those shades correspond to whether the time is caused by the files "self" or the files "children":

I may be butchering this explanation, but "Self” refers to the length of time it takes for that specific file to load/execute, “children” references any additional files that get initiated by the parent, and the time they spend loading.

So it makes sense, in my original screenshot from the tweet, the “project-project” file is the file in our codebase that async loads other JS modules, so it makes sense that it would have a huge dark yellow section, since it is the one that initiates the requests for all those files.

Convert negative color numbers to HEX or RGB

Your colours are indeed RGB values stored in a slightly twisted way.
All you have to do is, take the decimal number away from 16777216 and convert to HEX.

16777216-1 = 16777215 (FFFFFFh = White)

16777216-12582784 = 4194432 (400080h = Purple)

16777216-65408 = 16711808 (FF0080h = Pink)

16777216-16777216 = 0 (000000h = Black)

16777216-256 = 16776960 (FFFF00h = Yellow)

I hope this helps.
Apologies for not writing a code, but I am afraid I am not quite there yet in my studies. I promise I will work on it when I get there. :)

---

Related Topics