Color Picker: Pick Any Color On-Screen

What Is Color Picker?

Color Picker is a free browser-based tool that lets you grab any color from your screen using the EyeDropper API, or manually enter color values in HEX, RGB, or HSL format and instantly see conversions across all major color models. Designers reach for it when they need to match a color from a screenshot, a website, or a design mockup without opening heavy desktop software. Unlike native OS color pickers, this tool converts immediately between HEX, RGB, HSL, HSB, and CMYK in a single interface, and it requires no login, no install, and no data leaves your browser.

Key Features

• Pick colors from anywhere on your screen — The EyeDropper API activates a system-level color sampler in Chrome, Edge, and other modern Chromium browsers. Click any pixel and the color loads instantly into the tool.
• EyeDropper API support in modern browsers — The tool detects API availability at runtime. On unsupported browsers, a clear message appears rather than a broken button.
• Convert between HEX, RGB, HSL, HSB, CMYK — The "All Formats" panel shows every representation simultaneously. Changing any one input updates all others in real time.
• Copy color values to clipboard — Each format has a dedicated copy button. A checkmark replaces the copy icon for two seconds to confirm the copy succeeded.
• Color history tracking (supporter feature) — Up to 50 recently used colors are stored in IndexedDB and displayed as clickable swatches. History persists across page reloads. Requires a Ko-fi supporter subscription.
• Works offline after loading — All conversion logic runs in JavaScript. Once the page has loaded, you can disconnect from the internet and the tool continues to function.

How to Use Color Picker

Step 1: Open the tool and choose an input method

Navigate to Color Picker. The tool opens with a default color of #3B82F6 (a medium blue). You have three ways to set a color:

• Click the Pick From Screen button (Pipette icon) to use the EyeDropper API
• Click the small color swatch input in the top-right of the picker panel to open your browser's native color wheel
• Type directly into the HEX, R/G/B, or H/S/L input fields

Step 2: Sample a color from your screen (EyeDropper method)

Click Pick From Screen. The button label changes to "Picking..." while the EyeDropper is active. Your cursor becomes a crosshair magnifier. Click any pixel on your screen — including pixels outside the browser window on most systems. The tool captures the hex value, updates all format fields, and shows a success toast notification. The sampled color is automatically added to the history panel.

Step 3: Enter or adjust a color value manually

If you already know the color value, type it into any input field. The HEX field accepts values with or without the # prefix. RGB inputs accept integers from 0 to 255. HSL accepts H (0–360), S (0–100), and L (0–100). Any field change recalculates and updates the other two formats simultaneously.

Step 4: View all color format conversions

Scroll to the All Formats card below the main picker. This panel shows the full set of conversions: HEX, RGB, HSL, HSB, and CMYK. Each row has its own copy button. Click the Copy icon next to any format to write that value to the clipboard.

Step 5: Reuse colors from history

Previously selected colors appear as colored swatches in the Recent Colors panel. Click any swatch to reload that color into the picker and format fields. Use the Clear button (Trash icon) to wipe the history if needed.

Practical Examples

Matching a brand color from a website

You're building a landing page and need to match the exact purple used in a client's logo displayed in a browser tab. Click Pick From Screen, hover over the logo, and click. The tool captures the hex value — say #6B21A8 — and immediately shows rgb(107, 33, 168) and hsl(276, 61%, 40%). Copy whichever format your CSS file uses.

Converting a Figma color to CSS

Your Figma design spec lists a color as rgb(234, 179, 8). Type 234 in the R field, 179 in G, and 8 in B. The HEX field updates to #EAB308 and HSL shows hsl(45, 93%, 47%). Copy the HEX value for use in a Tailwind class like bg-[#EAB308] or the HSL for a CSS custom property.

Checking what color a hex code actually looks like

A code review shows background: #1E3A5F and you want to visualize it. Paste the value into the HEX field. The large color preview swatch fills with the color (a dark navy blue) and the label text color adjusts automatically between black and white for readability. You can compare it against other colors using the history swatches.

Tips and Best Practices

Use the history panel as a temporary palette (supporter feature). The tool stores up to 50 colors in IndexedDB for premium supporters. Build a small palette by sampling or entering colors one at a time — each becomes a clickable swatch you can revisit without noting values down.

The EyeDropper works on any pixel, including video frames. Pause a video at the frame with your target color, then use Pick From Screen. The API samples the rendered pixel, not the compressed source.

Type HSL values for precise control. If you want a specific hue at lower saturation, type directly into the H and S fields. HSL is more intuitive for adjustments like "same color, 20% lighter" (increase L by 20).

Shareable URLs encode the current color. The tool uses a shareable state hook — your current HEX value is encoded in the page URL. Copy the browser URL to send a specific color to a colleague.

Clear history before sharing a device. If you pick colors that include sensitive design assets, use the Clear button in the history panel to remove them from IndexedDB before handing off the device.

Common Issues and Troubleshooting

"EyeDropper not supported" message appears. The EyeDropper API requires a Chromium-based browser (Chrome 95+, Edge 95+). Firefox and Safari do not support it as of early 2026. Use the native color input swatch or type in the value manually on unsupported browsers.

HEX input shows no update after typing. The field requires a valid 3-, 4-, 6-, or 8-character hex code, with or without #. Partial values like #3B are accepted in the input but conversion only fires once a complete valid code is present.

RGB values out of range. Each R, G, B field is clamped to 0–255. Typing a value above 255 is corrected to 255 on blur. The parseInt fallback means non-numeric characters resolve to 0.

Copied format shows wrong value. Each copy button copies its specific format string. Make sure you click the copy icon in the All Formats panel row corresponding to the format you need, not the one in the main HEX input row.

History not persisting after reload. History is a supporter-only feature that uses IndexedDB. If you are not a premium supporter, the history panel will not record entries. If IndexedDB is disabled or unavailable in private/incognito mode, the history panel will appear empty on each visit. The tool handles this silently — history features are simply unavailable in that context.

Privacy and Security

Color Picker processes everything locally in your browser using JavaScript. No color values, no screen content, and no usage data are transmitted to any server. The EyeDropper API captures only the single pixel you click — no screenshot or screen recording occurs. Color history is stored in your browser's IndexedDB, not in any external database. The tool functions fully offline once the page has loaded, and it is safe to use when working with confidential design assets.

Frequently Asked Questions

Is Color Picker free to use?

Yes, Color Picker is completely free with no signup required. The core features — EyeDropper sampling, multi-format conversion, and clipboard copy — are all available without a supporter account. Premium supporter features like color history, presets, and tool notes are available with a Ko-fi supporter subscription.

Does Color Picker work offline?

Yes. Once the page has loaded, Color Picker works without an internet connection. All color conversion logic is implemented in JavaScript running in your browser. The EyeDropper API is also a browser-native feature that does not require network access.

Is my data safe with Color Picker?

Yes. No color data or screen content leaves your browser. The EyeDropper API captures one pixel value at the moment you click — it does not take screenshots or record your screen. Color history is stored only in your browser's IndexedDB. Glyph Widgets has no server-side visibility into what colors you pick.

Which browsers support the EyeDropper button?

The EyeDropper API works in Chrome 95 and later, Edge 95 and later, and other Chromium-based browsers. It is not supported in Firefox or Safari. The tool detects support at runtime and shows a clear message instead of a broken button on unsupported browsers.

What color formats does the tool output?

The tool converts to and displays HEX (e.g., #3B82F6), RGB (e.g., rgb(59, 130, 246)), HSL (e.g., hsl(217, 91%, 60%)), HSB (also called HSV), and CMYK. The All Formats panel shows all five simultaneously and provides individual copy buttons for each.

Can I enter a color value without using the eyedropper?

Yes. You can type directly into the HEX, R/G/B, or H/S/L input fields. You can also click the small native color input (the colored square next to the Pick From Screen button) to open your browser's built-in color wheel. All three input methods update the same internal color state.

How many colors does the history panel store?

The history panel stores up to 50 colors (supporter feature). When the limit is reached, the oldest entry is removed. History is saved to IndexedDB and persists across browser sessions. This feature requires a Ko-fi supporter subscription.

Can I share a specific color with someone?

Yes. The current color is encoded in the page URL as shareable state. Copy the URL from your browser's address bar after picking a color. When your colleague opens the link, the tool loads with that color pre-selected and shows a "Loaded from share" notification. You can also use the Share buttons at the bottom of the page to post directly to Twitter, LinkedIn, or Reddit.

Does the tool work with alpha/transparency values?

The current tool primarily works with fully opaque colors. The HEX input accepts 3-, 4-, 6-, and 8-digit hex codes (4- and 8-digit codes include an alpha channel), but the RGB and HSL inputs do not expose a separate alpha slider. If you need RGBA or HSLA values, the displayed RGB and HSL values can be manually extended with your desired alpha value.

What happens if I type an invalid hex code?

The HEX input field accepts partial or invalid values while you type. The color conversion only updates when a valid hex code is present (3, 4, 6, or 8 characters, with or without #). Partial values do not cause errors — the display simply retains the last valid color.

Related Tools

• Contrast Checker — Test whether your chosen foreground and background colors meet WCAG 2.1 accessibility standards after picking them with Color Picker.
• Color Converter — Convert between additional color formats not shown in the main picker interface.
• Palette Generator — Generate a full color palette starting from the hex value you picked.
• Gradient Generator — Use the colors you sampled to build CSS gradients with a visual editor.

Try Color Picker now: Glyph Widgets Color Picker