Ubuntu系统下如何查看网页中十六进制字符串对应的颜色？

Hey there, I’ve dealt with the exact same frustration on Ubuntu—Chrome’s "Show color" right-click option can be hit-or-miss here, and ColorZilla doesn’t always play nice with just selecting text strings. Here are three solid workarounds that I’ve been using:

• Use Chrome DevTools for quick previews
  Select the hex string (like #FF5733), right-click and choose "Inspect" to open DevTools. Then head to the Console tab and paste this snippet (I keep it saved in a text file for quick access):

  const selectedColor = document.getSelection().toString().trim();
  // Validate it's a valid hex color
  if (/^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(selectedColor)) {
    // Create a temporary color preview box
    const previewBox = document.createElement('div');
    previewBox.style.cssText = `
      position: fixed;
      top: 30px;
      right: 30px;
      width: 120px;
      height: 120px;
      background-color: ${selectedColor};
      border: 3px solid #222;
      border-radius: 8px;
      z-index: 99999;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    `;
    document.body.appendChild(previewBox);
    // Remove the box after 6 seconds
    setTimeout(() => document.body.removeChild(previewBox), 6000);
  }
  

  Hit Enter, and a big color box will pop up in the corner—perfect for checking the exact shade.

• Install a lightweight Chrome extension
  Skip ColorZilla and grab an extension designed specifically for previewing selected hex strings. Look for something like Color Preview (search the Chrome Web Store for it). Once installed, just highlight any valid hex color text, and a tiny inline color swatch will appear next to your selection instantly. No extra clicks needed.

• Use Ubuntu’s built-in color tool
  Ubuntu comes with Gcolor3 (you can search for it in the app launcher or install it via sudo apt install gcolor3 if it’s missing). Select the hex string, copy it with Ctrl+C, open Gcolor3, paste the code into the hex input field at the top, and you’ll see a full-size color preview. Bonus: it lets you pick complementary colors or save the shade to your clipboard too.

Hope one of these works for you—they’ve saved me tons of time when digging through color documentation!

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