What Is a Color Picker?
A color picker is a tool that lets you choose a color visually (from a gradient, palette, or screenshot) and read it back in every notation it might be needed in: hexadecimal (#0ea5e9), RGB integer or percentage (rgb(14, 165, 233)), HSL (hsl(199 89% 48%)), and sometimes HSB/HSV or OKLCH for modern CSS. It exists because designers, developers, and content creators constantly hop between tools that speak different color formats: Figma exports HEX, the CSS spec increasingly recommends HSL or OKLCH, brand guides quote HEX or Pantone, and screen sampling gives RGB.
The people who use one daily span web developers building themes, UI designers matching brand palettes, marketers translating between print and web colors, content creators recoloring graphics, accessibility engineers checking contrast ratios, and game developers picking palettes for sprites and shaders. The Tooldit color picker runs entirely in your browser, so when you sample an image for a color, that image never travels to a server.
A color picker and converter that speaks every format
This free color picker lets you grab a color, fine-tune it, and read it back in HEX, RGB, HSL, and RGB percentage all at once. Whether you copied a hex code from a brand guide, spotted a shade in a screenshot, or need to translate a CSS value a teammate sent you, the tool keeps every notation in sync so you never have to guess what rgb(0, 188, 242) looks like or recompute an HSL value by hand. It runs entirely in your browser, so picking and converting is instant and your images stay private.
How it works and what you can control
Start from any of the input fields, or sample a color from the world around you. Each method updates the live preview swatch and fills in all four output formats:
- Type or paste a value — enter a hex code in the main box, or edit the HEX, RGB, HSL, or RGB % fields directly. The parser accepts full and 3-digit hex,
rgb()with numbers or percentages, andhsl(). - Eyedropper — on Chromium browsers, click the pipette to sample a single pixel from anywhere on screen, including other apps. The button only appears when your browser supports the native EyeDropper API.
- Screen capture — share a tab or window and the tool freezes a frame on a canvas; hover to preview each pixel, then click to lock the color in.
- Image sampling — upload a file, drag and drop it, or paste a screenshot with Ctrl+V, then click any pixel to capture its exact color.
- One-click copy — every format row has a Copy button so you can drop the value straight into your CSS, design file, or chat.
Why designers and developers use it
- Everything stays on your device — images, screenshots, and screen frames are read on a local canvas and never uploaded anywhere.
- Completely free — pick, convert, and copy as many colors as you want with no limits or paywalls.
- No sign-up — open the page and start sampling; there is no account, email, or login wall.
- No clutter — clean output with no watermarks, no ads stitched into your colors, and no leftover files.
- Built for real workflows — four synced formats mean you copy the exact notation your tool expects on the first try.
Ways people use it
- Matching a brand color — a marketer pastes the hex from a style guide and copies the matching
rgb()string for a slide deck that only accepts RGB. - Rebuilding a design from a mockup — a front-end developer pastes a screenshot, clicks each button and background, and pulls clean hex codes straight into a stylesheet.
- Tuning a theme — a product designer nudges the HSL lightness to create a lighter hover state, then copies the HEX for the component library.
- Grabbing a color from another app — a writer uses the eyedropper to capture the exact accent color from a chart in a spreadsheet without leaving the browser.
Working on something visual? Generate a branded image with the QR code generator or polish your stylesheet output with the code minifier.
Color Picker vs Other Tools
Versus Figma's built-in picker — Figma's eyedropper is great inside a design file but doesn't help when the source is an external webpage, PDF, or a colleague's screenshot. Tooldit works on any image you can paste or upload, and gives every format at once instead of needing the format dropdown.
Versus browser DevTools color editor — DevTools shows colors on a single CSS property at a time. Tooldit is faster when you're iterating on a palette, comparing shades side-by-side, or grabbing colors from a non-web source like a photograph.
Versus desktop apps (ColorSync, Sip, Just Color Picker) — desktop pickers can sample any pixel on screen, but they're platform-specific and need to be installed. The browser tool is one tab away on any OS, with no install, and the image stays on your device.
Versus Adobe Color — Adobe Color is excellent for palette generation and accessibility, but signup-gated and overkill for "what hex is this". Tooldit is for fast one-color lookups.
Troubleshooting & Common Issues
- Eyedropper picks a slightly different color than expected — the pixel under your cursor is sampled exactly. Anti-aliased edges blend two colors, so sampling a one-pixel offset can look very different. Zoom in to land squarely on a solid pixel.
- Hex value doesn't match the original on print — screen colors are RGB; print uses CMYK and depends on paper and ink. Matching across the two requires a color profile and proofing. The picker only reports screen values.
- HSL value looks different in two browsers — HSL has multiple correct rounding strategies (integer vs decimal lightness). The picker rounds to one decimal; some tools round to integers, which can shift the last component by 1.
- Pasted screenshot looks color-shifted — screenshots saved with embedded color profiles (P3, Rec2020) may render differently when stripped to sRGB. The picker treats input as sRGB; sample a known neutral (white, black) first to gauge the shift.
- RGB values exceed 255 — if you typed values manually, anything above 255 gets clamped to 255 (white). For HDR or wide-gamut work, use a dedicated color tool that supports rec2100/P3.
- Copy button doesn't paste correctly — some text editors strip non-ASCII or auto-format pasted content. Paste into a plain-text editor first to verify the string is intact, then move it to its final destination.
Frequently Asked Questions
+What color formats can I convert between?
Every color you pick is shown at once in four formats: HEX, RGB, HSL, and RGB percentage. Edit any of those fields directly and the rest update to match, so you can paste a value in one notation and instantly read it in another. The parser also accepts shorthand 3-digit hex and percentage-based rgb() values.
+How does the eyedropper pick a color from anywhere on screen?
On supported Chromium browsers the pipette button uses the native EyeDropper API, which lets you sample a single pixel from anywhere on your screen, including other windows. If your browser does not expose that API, the pipette button is hidden and you can use the screen-capture or image options instead.
+Can I grab a color from an image or screenshot?
Yes. Upload an image, drag and drop it onto the page, or paste a screenshot with Ctrl+V. The image is drawn to a canvas and you can hover to preview the pixel color in a live badge, then click to lock it in. The screen-capture button does the same with a frame grabbed from a window or tab you share.
+Is my image uploaded to a server when I sample colors?
No. Images and screen frames are processed entirely in your browser using a local canvas. Nothing is sent to Tooldit or any third party, so even a private mockup or an internal dashboard screenshot stays on your device.
+Why does HSL sometimes change my color slightly?
HSL is rounded to whole numbers for hue, saturation, and lightness so the value stays readable. Converting back from a rounded HSL string can land one or two RGB units away from the original. For pixel-exact work, copy the HEX or RGB value, which preserve the full 8-bit channels.
+How do I check color contrast for accessibility?
WCAG 2.1 requires at least 4.5:1 contrast for normal text and 3:1 for large text. After picking your foreground and background colors, run them through a dedicated contrast checker (WebAIM's is the standard). The Tooldit picker gives you the exact HEX so the contrast tool can read them without rounding loss.
+Can I sample a color from a website?
Take a screenshot of the site (Cmd+Shift+4 on macOS, Win+Shift+S on Windows), paste it into the picker, and click the pixel you want. For samplng directly from a live page, use your browser's built-in DevTools eyedropper inside the Styles panel.
+Does the picker work with transparency?
Yes — alpha is shown as the fourth channel in rgba() and hsla(), ranging from 0 (transparent) to 1 (opaque). HEX with alpha uses an 8-digit form (e.g. #0ea5e9CC where CC is 80% opacity). Slide the alpha control to adjust.