Chrome DevTools RGBA格式变为新RGB语法问题求助

Hey there! I’ve dealt with this exact frustration before—one day DevTools just swapped the color format I was used to, and it threw me off too. Let me break down what’s happening and how to fix it:

What’s Going On? #

Chrome DevTools recently updated its default color display to use the CSS Color Module Level 4 syntax—that’s the rgb(255 255 255 / 10%) format you’re seeing. It’s a modern, standardized way to write RGB with transparency, replacing the older rgba(255,255,255,0.1) syntax. While it’s supported in all modern browsers, I get wanting to stick with what you’re familiar with.

How to Switch Back to RGBA (or Your Preferred Format) #

Follow these quick steps:

1. Open Chrome DevTools (press F12 or Ctrl+Shift+I on Windows/Linux, Cmd+Opt+I on Mac)
2. Click the gear icon ⚙️ in the top-right corner to open Settings
3. Go to the Preferences tab
4. Scroll down to the Appearance section
5. Find the Color format dropdown menu
6. Select RGBA from the options (you can also choose Hex with alpha if you prefer transparency in hex format like #FFFFFF1A)

Once you select your preferred format, DevTools will immediately start displaying and converting colors to that style again.

Bonus Note #

If you ever want to test the new syntax, you can always toggle back to the Modern RGB option in the same dropdown. Both formats work perfectly in browsers, so it’s just a matter of personal preference!

内容的提问来源于stack exchange，提问作者Meg Ann