CleanorTools
Color

Color Picker

Details

How to use Color Picker

What the tool does, how to run it, and what to expect from the result.

How to pick a color and copy it as HEX, RGB, or HSL

The picker keeps one color in state and derives every other representation from it. You can set that color three ways: with the native color box, by typing a hex value, or by sampling a pixel from anywhere on your screen if your browser supports the EyeDropper API.

All three outputs update at once, so there is no separate convert step. Each row has its own copy button, and everything is computed in your browser.

  • Click the color box and drag the native picker, or paste a hex value such as #2563EB into the HEX field.
  • If a "Sample from screen" button is shown, click it and click any pixel on your display to load that color.
  • Read the HEX, RGB, and HSL rows in the preview panel, which recompute on every change.
  • Press Copy next to the format you need; the value goes to your clipboard.
  • If the preview shows an error, your hex value is not a valid 3-digit or 6-digit color.
Tips

Getting a better result out of Color Picker

Specific settings and thresholds, not general advice.

  • The "Sample from screen" button only appears if your browser exposes the EyeDropper API. That is Chrome, Edge, and other Chromium browsers; Safari and Firefox do not ship it, so on those browsers you get the color box and the hex field only.
  • The hex field accepts 3-digit shorthand: type #abc and it expands to #AABBCC before the RGB and HSL values are computed. The native color swatch above it only mirrors a full 6-digit value, so it can lag behind while you type.
  • HSL is rounded to whole degrees and whole percent, so converting #2563EB to hsl(221, 83%, 53%) and back does not always land on the same hex. Keep hex as your source of truth and treat HSL as a tuning dial.
  • There is no alpha channel here. If you need rgba() or an 8-digit hex with transparency, append the alpha yourself; the tool works in opaque sRGB only.
  • EyeDropper samples whatever pixel is on screen, which means it picks up the color after your display profile, dark-mode filters, and any image compression. Sampling a brand color from a JPEG screenshot can be off by a few units per channel from the real value.
Limits

What Color Picker does not do

The honest boundary, so you do not lose time finding it yourself.

  • No alpha, opacity, or 8-digit hex support.
  • No color history, saved swatches, or named-color lookup.
  • Screen sampling requires a Chromium browser; there is no fallback.
  • No CMYK, LAB, or OKLCH output, only HEX, RGB, and HSL in sRGB.
At a glance

Who Color Picker is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Designers and developers sampling and converting colors.

Ideal for

Using the color picker without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Why does my hex round-trip to a slightly different value through HSL?

HSL is displayed with integer hue, saturation, and lightness, so the conversion throws away sub-degree and sub-percent precision. Feeding that rounded HSL back into a hex converter can land one or two units off per channel. It is a display rounding, not a bug, and it is why the hex value stays the canonical one in this tool.

Can I sample a color from a video or another application?

Yes, if your browser supports EyeDropper. The API samples any pixel currently composited on your screen, including video frames, PDFs, and other application windows. It cannot sample from a second monitor in every operating system, and it will not work at all in Safari or Firefox.

Is the color I sample exactly the color in the original file?

Not necessarily. What you sample is what the screen shows after color management, display profile, and any browser or OS filter. If you need the exact stored value, read it from the source file or the design tool rather than sampling the rendered pixels.

What does the HSL string look like and can I paste it straight into CSS?

It is formatted as hsl(221, 83%, 53%), the legacy comma-separated CSS syntax, which every browser still accepts. Modern CSS also allows the space-separated form hsl(221 83% 53%), so you may need to reformat if your linter enforces that style.

Does the tool tell me if two colors have enough contrast?

No, that is a separate concern. This picker only converts one color between formats. If you need a WCAG pass or fail against a background, use a contrast checker, since the 4.5:1 threshold for normal text depends on both colors, not one.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

HEX
UtilityColor

Color Format Converter

Convert CSS color formats

Convert one color between HEX, RGB, RGBA, HSL, and HSLA with a live swatch.

CPG
UtilityColor

Color Palette Generator

Color

Generate complementary, analogous, triadic, and monochromatic palettes from one base color. Free, in your browser, nothing is uploaded.

HEX
UtilityHEX

HEX to RGB Converter

Convert HEX to RGB

Convert a HEX color to RGB, RGBA, and HSL values. Free, in your browser, no sign-up.

ACP
UtilityColor

AI Color Palette Generator

Color

Generate cohesive 5-color palettes from a mood or seed color, and lock favorites. Free, in your browser, nothing is uploaded.

IAC
UtilityColor

Image Average Color Finder

Color

Upload an image to read its average color and a dominant-color palette, then copy any hex or RGB value. Free, in your browser, nothing is uploaded.

RGB
UtilityRGB

RGB to HEX Converter

Convert RGB to HEX

Convert RGB values to a HEX color code with a live swatch. Free, in your browser, no sign-up.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing