image-pixel-viewer-yashu

Render images in a browser to extract pixel coordinates and RGB/HEX values.

9|3|Updated Feb 15, 2026
One-click install
npx skills add https://github.com/steelan9199/wechat-publisher --skill image-pixel-viewer-yashu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: image-pixel-viewer-yashu
Source: https://github.com/steelan9199/wechat-publisher/tree/main/skills/image-pixel-viewer-yashu
Command: npx skills add https://github.com/steelan9199/wechat-publisher --skill image-pixel-viewer-yashu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill solves the difficulty of precisely identifying pixel coordinates and color values (RGB/HEX) in images, which is essential for UI design, front-end development, and image analysis.

Core Features & Use Cases

  • Real-time Inspection: Displays exact X, Y coordinates and color data as you move your mouse over an image.
  • One-Click Copy: Instantly copies coordinate and color information to the clipboard for quick documentation.
  • Use Case: A designer needs to match a specific brand color from a screenshot; this tool allows them to hover over the image and copy the exact HEX code immediately.

Quick Start

Use the image pixel viewer to open the image located at D:\assets\design-mockup.png and start inspecting its colors.

Frequently Asked Questions about image-pixel-viewer-yashu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract RGB and HEX color values from an image pixel in my browser?

To extract RGB and HEX color values from an image pixel, you can use a local HTTP server to render the image in a browser and track real-time mouse-over coordinates. Moving your cursor over the image instantly displays the color data for that specific pixel.

What's the best way to find exact X and Y pixel coordinates in a design mockup?

Finding exact X and Y pixel coordinates in a design mockup is done by rendering the image through a local server and hovering your mouse. The browser displays real-time coordinate tracking, allowing precise pixel identification for UI design workflows.

Do I need Node.js to host a local server for image pixel inspection?

Yes, you need Node.js to host the local HTTP server required for image pixel inspection. The server handles image file access via absolute paths and renders the visual interface in your browser for real-time color and coordinate extraction.

Can I copy extracted color HEX codes immediately during image analysis?

Yes, you can copy extracted color HEX codes immediately during image analysis. The browser-based inspector features one-click copy functionality, instantly sending coordinate and RGB/HEX color information to your clipboard for quick documentation.

How do I open a local image file using an absolute path for color inspection?

To open a local image file for color inspection, provide its absolute path to the local server. The server renders the image in your browser, enabling precise mouse-over tracking of coordinate and color data for analysis workflows.