Bộ chọn màu cung cấp công cụ nhỏ giọt chính xác pixel để chọn màu từ bất kỳ phần tử nào.
Trích xuất giá trị màu chính xác từ một trang web là một tác vụ phổ biến — khớp màu thương hiệu, tham chiếu một thiết kế, hoặc kiểm tra một sắc độ được dùng trên trang của đối thủ. DevTools của trình duyệt hiển thị màu sắc trong panel Styles, nhưng chỉ với các phần tử có thuộc tính màu CSS được khai báo rõ ràng — không áp dụng cho hình ảnh, gradient, hay màu được kế thừa.
Công cụ hút màu (eyedropper) của Color Picker hoạt động ở cấp độ pixel — nó đọc màu thực sự đã render tại bất kỳ pixel nào nằm dưới con trỏ của bạn, bất kể màu đó có được từ đâu. Nhấp vào bầu trời xanh trong một ảnh hero, điểm giữa của một gradient, hay một lớp phủ bán trong suốt, và bạn sẽ nhận được giá trị màu tổng hợp chính xác. Cả ba định dạng đầu ra (HEX, RGB, HSL) đều được hiển thị đồng thời — nhấp vào bất kỳ định dạng nào để sao chép. Một vài lựa chọn màu gần nhất của bạn được lưu trong dải lịch sử màu ở phía dưới.
Độ trong suốt alpha được giữ nguyên trong kết quả đầu ra — hút màu từ một lớp phủ bán trong suốt sẽ cho ra giá trị rgba() hoặc hsla() với đúng kênh alpha, chứ không chỉ là màu RGB đã bị làm phẳng như bạn sẽ nhận được từ một công cụ chụp màn hình. Trên macOS và Windows, công cụ hút màu có thể sử dụng khả năng eyedropper gốc của trình duyệt khi khả dụng, cho phép bạn lấy mẫu màu từ bất kỳ đâu trên màn hình, kể cả bên ngoài cửa sổ trình duyệt — hữu ích khi cần khớp màu từ một file thiết kế đang mở trong một ứng dụng khác.
A magnified circular preview shows zoomed-in pixels around your cursor, with crosshair targeting for exact pixel selection. Pick colors from text, backgrounds, images, gradients, SVGs, or any visible pixel on the page.
Every picked color is shown in all three formats at once: HEX (#7c3aed), RGB (rgb(124, 58, 237)), and HSL (hsl(262, 83%, 58%)). No switching or converting — all formats are immediately available.
Click any format row (HEX, RGB, or HSL) to copy that specific value to your clipboard instantly. A brief "Copied!" animation confirms the action. Paste directly into your CSS, design tool, or color specification.
Your recently picked colors are saved in a visual history strip showing color swatches. Click any swatch to re-select that color and see its values again. The history persists during your session — pick colors from multiple pages.
The picked color is displayed as a large swatch above the format values, making it easy to see and verify the color. The swatch is large enough to show subtle shades that might look identical at smaller sizes.
Picks colors from any visible pixel: CSS colors, CSS gradients, images (PNG, JPG, SVG), canvas elements, video frames, semi-transparent overlays (picking the composite color), and even iframes. If you can see it, you can pick it.
Pick the exact brand color from a company's website to ensure your design or content uses the correct shade. Get the precise HEX value instead of eyeballing it or searching through brand guidelines.
Pick colors directly from hero images, product photos, or illustrations. Extract a dominant color from a photo to use as a complementary background in your design.
The design spec says the button should be #7c3aed. Pick the color from the implemented button to verify it matches. Catches subtle color differences that are invisible to the naked eye.
Browse design inspiration sites and pick colors that catch your eye. The history strip builds up a palette of colors you've picked during the session — use it as a starting point for your own color scheme.
Pick colors at different points along a CSS gradient to see the exact color at each position. Useful for replicating gradients or understanding how gradient stops blend.
Open the DevSuite Pro floating dock and click the Color Picker icon. The cursor changes to an eyedropper with a magnified preview circle.
Move your cursor over the page. The magnified preview shows a zoomed-in view of the pixels around your cursor, with a crosshair indicating the exact target pixel.
Click anywhere on the page to pick the color at that pixel. The color swatch, HEX, RGB, and HSL values all update instantly.
Click the HEX, RGB, or HSL row to copy that value to your clipboard. A "Copied!" confirmation appears briefly.
Continue clicking to pick more colors. Each pick is added to the history strip. Click any history swatch to recall that color.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
