You're designing a webpage, editing a photo, or just trying to match a color from an image. You see the perfect shade of blue in a logo, or a nice background color on a website. "I want that exact color," you think. But how do you get it? Taking a screenshot and guessing in Photoshop is way too much work.
That's what a color picker is for. And this HTML Color Picker is a simple, browser-based tool that lets you do just that. It's more than just a palette—it's an eyedropper. You can use it to sample any color visible on your screen, get its code, and use it instantly. It's one of those tools that feels like a superpower once you start using it.
I built it because I got tired of switching between my code editor and a separate desktop app just to grab a color. Now it's always a browser tab away.
What is an HTML color picker, really?
At its core, it's a tool that does two things:
- Lets You Choose a Color Visually: You see a color wheel, sliders, or a palette, and you click or drag to select a color you like.
- Gives You the Color's Code: It outputs that color in a format you can use, like HEX (#FF5733), RGB (rgb(255, 87, 51)), or HSL (hsl(11, 100%, 60%)).
So it's both a creative tool (for picking new colors) and a detective tool (for copying existing ones). It's an essential web design utility.
Why not just use the developer tools in my browser?
You can! Browser Dev Tools have great color pickers for elements on the webpage you're inspecting. But they can't pick colors from outside the browser—from your desktop wallpaper, a PDF reader, or an image on your desktop. This tool can, because it uses a special browser API to access your screen.
How to use the color picker and eyedropper
The interface is built to be intuitive. Here’s the workflow:
- Open the Picker: When you load the tool, you'll see a default color displayed in a large box.
- Choose a Color Manually (Option A):
- Use the Hue Slider (a vertical bar with a rainbow) to choose the base color family (red, blue, green, etc.).
- Use the Square Palette to adjust the saturation (vividness) and lightness (how bright/dark) of that hue. Click or drag inside the square.
- Alternatively, use the RGB/HSL Sliders to input precise numbers.
- Use the Eyedropper (Option B - The Cool Part):
- Click the button labeled "Pick Color from Screen" or an eyedropper icon.
- Your mouse cursor will change to a large circular magnifier, showing a pixel grid and the exact color you're hovering over.
- Move this cursor anywhere—over this text, another tab, your taskbar, an open image file on your desktop.
- Click to capture that exact color. The tool will immediately update with your stolen color and its codes.
- Get Your Codes & Use Them:
The color's values update in real-time in several formats:
HEX: #FF5733
RGB: rgb(255, 87, 51)
HSL: hsl(11, 100%, 60%)
There's a big "Copy" button, usually next to the HEX code (the most common one). Click it, and the code is on your clipboard, ready to paste into your CSS, graphic editor, or design tool. - Fine-Tune: After using the eyedropper, you can use the manual sliders to tweak the color slightly if needed.
It’s a seamless process from spotting a color in the wild to having its code in your project.
A note on permissions
The first time you click the eyedropper, your browser will ask for permission to "See and use your screen content." This is normal and required for the tool to read colors from other windows. You must grant this permission for the eyedropper to work. The tool only accesses this data temporarily to get the color; it doesn't record or transmit your screen.
Real-world uses (beyond just web design)
Web & UI Design: The obvious one. Matching a client's brand color from their logo (in a PDF) for their website. Grabbing a gradient stop color from a design mockup in Figma.
Digital Art & Photo Editing: Sampling a skin tone from a reference photo to use in a digital painting. Matching the sky color from one photo to use when editing another.
Home & DIY: See a paint color you love on a website? Use the eyedropper to grab it, then take the HEX code to a paint store website that can find a similar real-world paint match.
Theming & Customization: Getting the exact accent color from your favorite movie poster to use as your phone's wallpaper tint or a coding theme.
It turns your whole digital environment into a source of inspiration. Any color you can see, you can capture. It's a universal digital color sampler.
Understanding the color formats
The tool shows multiple codes because different programs use different formats.
- HEX (#RRGGBB): The standard for web design (HTML, CSS). Short and easy to share.
- RGB (Red, Green, Blue): Used in many design applications and for creating colors with code. Each value is 0-255.
- HSL (Hue, Saturation, Lightness): The most intuitive for humans. Hue is the color (0-360 degrees on a wheel). Saturation is the intensity (0% gray, 100% full color). Lightness is the brightness (0% black, 100% white, 50% pure color). This is often the best format for manually adjusting a color.
Having all three gives you flexibility. The tool acts as a quick color code converter as well.
Technical magic: How the eyedropper works
This is the cool part. The tool uses the modern EyeDropper API, which is now built into browsers like Chrome, Edge, and Opera. When you click the button:
- The API asks the operating system for temporary, one-time access to the screen's pixel data.
- It captures the (x, y) coordinate of your mouse click.
- It reads the color value of that single pixel from the screen's framebuffer.
- It returns that color data (as RGB) to the web tool, which then converts it to HEX and HSL.
It's a direct, pixel-perfect measurement. No averaging, no guessing. That's why it's so accurate. This is a native browser feature, so it's fast and secure.
Limitations and browser support
The Eyedropper API is not supported in all browsers yet. As of now, it works in Chrome, Edge, Opera, and other Chromium-based browsers. It does not work in Safari or Firefox. If you're using an unsupported browser, the "Pick from Screen" button will be disabled or hidden, and you'll only have the manual color picker.
The manual picker itself is supported everywhere. So you can still choose colors visually; you just can't sample from your screen in unsupported browsers.
Also, for privacy and security reasons, the eyedropper will not work on certain protected content, like DRM-protected video players.
From inspiration to implementation in seconds
Before tools like this, matching a color was a multi-step process involving screenshots, zooming in, and using advanced software. Now, it's a single click. It collapses the distance between seeing something you like and using it in your own work.
It empowers you to be inspired by the visual world around you, digitally. Keep this tab open. You'll find yourself using it more than you expect.
Frequently Asked Questions
Why isn't the "Pick from Screen" button working?
Two main reasons:
- Browser Support: You might be using Firefox or Safari, which do not yet support the EyeDropper API. Try Chrome, Edge, or Opera.
- Permission Denied: When prompted, you must allow the browser to "see your screen" for the eyedropper to activate. If you accidentally blocked it, you'll need to go into your browser's site settings for this page and reset the permission.
Is the eyedropper 100% accurate?
Yes, for the pixel it samples. It picks the exact color of the single screen pixel under the center of the cursor. However, remember that the color you see on your screen may not be the "true" color due to your monitor's calibration, brightness, and color profile. The tool captures what is being displayed on *your* screen.
Can I pick colors from a video?
Yes, you can! You can pause a video in YouTube, Netflix, etc., and use the eyedropper to pick a color from the paused frame. However, it will not work on some DRM-protected streaming videos where the browser blocks screen capture.
What's the difference between this and a Photoshop eyedropper?
Functionally, they are identical. The main advantage of this tool is that it's free, runs in your browser, and doesn't require you to have an image already open in an editor. You can sample directly from your live desktop or any application.
Can I save colors I've picked?
The basic tool doesn't have a save/history feature. Your workflow is: pick a color, copy the HEX code, and paste it into your project or a document. For saving palettes, you'd want a more advanced color management tool.
Does it work on mobile phones?
The manual color picker (sliders, wheel) will work on mobile. The eyedropper feature, however, does not work on mobile browsers (iOS Safari, Android Chrome). Mobile operating systems restrict access to the screen for security reasons, so you cannot sample colors from other apps.