Cách Dùng Công cụ Chọn Màu để Tìm Màu từ Bất kỳ Pixel nào
Quick Answer
Để chọn màu: mở Color Picker, tải lên hình ảnh (hoặc dùng screen eyedropper), nhấp vào pixel muốn màu và giá trị HEX, RGB và HSL xuất hiện. Tất cả xử lý xảy ra cục bộ.
Introduction
Color picker (còn gọi eyedropper) cho phép tìm màu chính xác của pixel. Điều này thiết yếu để match màu thương hiệu, sample màu từ hình ảnh hoặc xây palette từ photo. Color picker trên trình duyệt có thể đọc màu từ hình tải lên qua Canvas API, và EyeDropper API có thể chọn màu từ bất kỳ đâu trên màn hình.
Step by Step
-
Open the Color Picker tool
Go to the Color Picker tool page. The tool supports picking colors from uploaded images and, in supported browsers, from anywhere on screen via the EyeDropper API.
-
Choose your source
To pick from an image: upload or drag-and-drop an image. To pick from the screen (Chrome/Edge only): click the 'Pick from screen' button, then click anywhere on your screen.
-
Click the pixel to sample
For image picking, move your cursor over the image and click the pixel whose color you want. The tool reads the pixel color from the canvas using getImageData(). A magnifier may help you select the exact pixel.
-
Read the color values
The tool displays the picked color in HEX, RGB, and HSL formats, along with a swatch. The values update instantly as you move the cursor.
-
Copy the color
Click Copy next to any format to copy the color value to your clipboard. Use it in your CSS, design tool, or application.
Examples
Pick a brand color from a logo
Input: logo.png, click on the brand color pixel
Output: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Sample a color from a photo
Input: photo.jpg, click on a sky pixel
Output: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Pick from screen (Chrome/Edge)
Input: Click 'Pick from screen', then click any pixel on your display
Output: HEX value of that pixel, e.g., #ff5733
Common Problems
- Anti-aliasing blends colors at edges —pixels on the edge between two colors are a blend. Sample from the center of a solid color area for accuracy.
- EyeDropper API not supported —the screen picker requires Chrome 95+ or Edge 95+. Firefox and Safari do not support it; use the image upload method instead.
- JPEG compression alters colors —JPEG lossy compression changes pixel colors slightly. For exact brand colors, use a PNG or the original vector source.
- Color profile differences —images with embedded color profiles (ICC) may display differently than their raw pixel values suggest.
Tips
- Use the magnifier to select the exact pixel —at high zoom, you can pick a single precise pixel rather than a blended edge.
- Sample multiple pixels from a solid area and average them if compression has introduced noise —this gives a more representative color.
- Use the EyeDropper API (Chrome/Edge) to pick colors from any application, not just images in the browser.
- Use our Color Picker for instant, private color sampling —your images never leave your browser.