What this tool is good for
This online color picker lets you sample a color and inspect its values in formats such as hex, rgb, hsl, hwb, lch, device-cmyk, and standard CSS named colors. You can also type a supported color value manually and let the page convert it automatically.
It is useful for frontend development, UI design, screenshot sampling, brand color checks, and preparing CSS color values. When you see a color but do not know its code, or need to convert an existing value into another CSS notation, this page keeps the workflow in one place.
Common use cases
- Sample a pixel color from a webpage, screenshot, design mockup, desktop app, or system UI.
- Convert a color into frontend-friendly formats such as hex, rgb, hsl, hwb, lch, or cmyk.
- Look up standard CSS named colors when documentation, design notes, or code comments need a readable name.
- Check whether an existing color value can be parsed by the browser and copy the output format you need.
Ways to pick a color
There are two ways to pick a color: use the built-in color input, or click the eyedropper button when the browser supports the EyeDropper API. The eyedropper can sample pixels outside this page as well, which makes it useful when you need to grab a color from another tab, a desktop app, or a design mockup.
- Open the browser color input and choose a color from the system picker.
- Or click the eyedropper button and sample a color from the screen when your browser allows it.
- You can also paste a color code or color name into the manual input field and let the page parse it.
- Copy the result format you need for CSS, design notes, or configuration files.
Supported conversions
The converter supports hex, rgb, hsl, hwb, lch, and device-cmyk CSS color formats, and it also accepts standard English named colors as input.
| Format | Example | Best use |
|---|---|---|
| HEX | #00bfff | Compact CSS values, design tokens, and quick copy/paste. |
| RGB | rgb(0, 191, 255) | Numeric channel inspection and compatibility with older CSS workflows. |
| HSL | hsl(195, 100%, 50%) | Adjusting hue, saturation, and lightness in design systems. |
| HWB | hwb(195 0% 0%) | CSS color adjustments based on hue, whiteness, and blackness. |
| LCH | lch(74.9 82.3 231.3) | Perceptual color work where supported by the target environment. |
| Named color | deepskyblue | Readable documentation and quick CSS examples. |
- Common inputs include #00bfff, rgb(0, 191, 255), hsl(195, 100%, 50%), hwb(195 0% 0%), lch(...), and CSS color names.
- The output list shows several formats at once, so you can move between codebases, design tools, and documentation requirements more easily.
- Named color output is the closest standard CSS named color where available; it should be treated as a convenience label, not always an exact design token.
Browser EyeDropper support
| Input method | Requirement | Fallback |
|---|---|---|
| EyeDropper button | A browser that exposes the EyeDropper API and allows screen sampling. | Use the color input or paste a color value manually. |
| Color input | Standard browser color input support. | Paste HEX, RGB, HSL, HWB, LCH, or a named color into the manual field. |
| Manual color value | A parseable CSS color value. | Try HEX first if the target system has limited CSS color support. |
For production CSS, confirm that your target browsers support the output format you copy. HEX, RGB, and HSL are broadly supported; newer color spaces may need compatibility checks.
Things to keep in mind
- The eyedropper depends on browser support for the EyeDropper API. If it is unavailable, the color input and manual input still work.
- Screen sampling usually returns an sRGB hex value. Display profiles, scaling, browser rendering, compression, transparency, and antialiasing can all create small differences from a design file.
- Browser-native color pickers look different across operating systems and browsers, but the converted values on the page use the same parsing flow.
- If your input includes alpha transparency, confirm the output format before using it in a target system that needs to preserve alpha.
FAQ
Why is the eyedropper button unavailable?
The eyedropper relies on the browser's EyeDropper API. Some browsers, private modes, or older versions do not support it, so you may need to use the built-in color input or manual color entry instead.
Why does the sampled color differ from my design tool?
Common causes include display color profiles, system scaling, browser rendering, image compression, transparency layers, and antialiasing. Screen sampling is good for checking visible pixels, but it is not always identical to the original managed design value.
Can I type CSS named colors directly?
Yes. Standard CSS color names such as deepskyblue or rebeccapurple can be parsed, and the page will convert them into the supported output formats.
Which CSS color format should I copy?
Use HEX for compact tokens, RGB when you need explicit channel values, HSL when you plan to adjust hue or lightness, and newer formats only after confirming browser support for your target users.
Does this page upload my screen or color data?
No. Color selection, parsing, and conversion run in your browser. The EyeDropper API returns the selected color value and does not upload a screenshot to the server.