How to Use
- Click "Choose Image", drop an image, or paste a screenshot with Ctrl+V / Cmd+V.
- Move your pointer or finger over the image to preview live HEX, RGB, HSL values, and the magnifier.
- Click a point you want to keep; the color is saved to history.
- Click "Extract Palette" to generate a design-friendly palette, then copy the color values you need.
Example: paste a product screenshot, pick the main button color, and copy the HEX value into CSS or a design file.
Core Features
- Local Image Color Picking: Images are rendered and sampled with browser Canvas, never uploaded to a server.
- Pixel-Level HEX/RGB/HSL: Move your pointer or finger across the image to read live HEX, RGB, and HSL values.
- Magnifier Crosshair: A zoomed preview helps you target icon edges, UI screenshot details, and small color blocks.
- Palette Generator: Browser-side pixel sampling extracts up to 5 dominant colors for quick design reference.
- Save and Copy Fast: Click the image to save colors to history, then click any swatch to copy its color code.
Related Tools
The 2026 FIRE Calculator (Inflation Adjusted). Simulate real purchasing power, analyze retirement savings gaps, and generate a visual wealth roadmap. One-click CSV export for your Excel or Notion finance dashboard. 100% Private, client-side calculation.
Calculate trade position size from account balance, risk %, entry, and stop loss. Runs locally in your browser with no uploads, so you can compare risk scenarios before you trade.
Calculate compound interest from principal, recurring contributions, APY, and time. Visualize principal, interest, and final balance with a local interactive chart.
Use this Loan Calculator / Mortgage Calculator to estimate monthly payment, total interest, and an amortization schedule locally. Enter amount, rate, and term to calculate now with instant charts.
Use this Investment Calculator / ROI Calculator to estimate starting capital, monthly contributions, annual return, and inflation-adjusted results locally. Calculate projected returns with an instant compound interest chart, ROI, and yearly schedule.
Use this APR to APY Calculator to convert between APR and APY locally. Enter a rate, choose compounding frequency, and see the effective interest rate, spread, and frequency comparison instantly.
Use this Profit Margin Calculator to calculate gross profit, Markup, Margin, and selling price locally. Enter cost and price, or cost and target margin, then calculate your margins instantly.
Use this CPM Calculator and CPC Calculator to estimate ad spend, impressions, clicks, CPM, CPC, and CTR locally. Enter budget and target costs to plan campaign scenarios instantly.
Calculation Logic
This tool decodes the image locally with HTML5 Canvas and reads the RGBA pixel at the current picker coordinate through getImageData. HEX, RGB, and HSL values are formatted from that pixel.
Palette generation samples Canvas pixels, groups nearby colors into simple buckets, and ranks them by frequency to return up to 5 dominant colors. This is useful for quick web and design palettes, but it does not promise professional ICC / P3 absolute color management.
FAQ
Are my images uploaded?
No. Image loading, color picking, magnifier preview, and palette generation all run locally in your browser.
How do I get a HEX color from an image?
Choose or paste an image, then move your pointer or finger to the target pixel. The live color appears instantly. Click the image to save it to history, then click a swatch to copy the HEX value.
Which color formats are supported?
The tool displays and copies HEX, RGB, and HSL, the formats most common in web design and frontend development.
Why might the color differ slightly from Photoshop?
Canvas reads the pixel as rendered by your browser. Browser behavior, display gamut, and embedded image color profiles can create small differences.
Can I pick colors on mobile?
Yes. On touch devices, drag your finger across the image to move the crosshair, then tap or release to lock a color.