Online Color Picker and Color Code Converter

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.

1. Open the browser color input and choose a color from the system picker.
2. Or click the eyedropper button and sample a color from the screen when your browser allows it.
3. You can also paste a color code or color name into the manual input field and let the page parse it.
4. 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.

• 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.

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