Вибір кольору надає піксельно-точну піпетку для вибору кольорів з будь-якого елемента.
Extracting exact color values from a webpage is a common task — matching a brand color, referencing a design, or checking a shade used on a competitor's site. Browser DevTools show colors in the Styles panel, but only for elements with explicit CSS color properties — not for images, gradients, or inherited colors. The Color Picker eyedropper works at the pixel level — it reads the actual rendered color of whatever pixel is under your cursor, regardless of how that color got there. Click on a blue sky in a hero image, a gradient midpoint, or a semi-transparent overlay, and get the exact composite color value. The magnified preview circle shows a zoomed-in view of surrounding pixels so you can target the exact pixel you want. All three format outputs (HEX, RGB, HSL) are shown simultaneously — click any format to copy. Your last several picks are saved in a color history strip at the bottom, so you can easily return to a previously picked color.
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.
Встановіть DevSuite Pro безкоштовно та отримайте понад 39 інструментів розробника для вашого браузера.
