Toolis.dev

Color Picker

Color picker and image color extractor in one. Pick from an uploaded image or from your screen, then convert between HEX, RGB, HSL, and OKLCH with live transparency and WCAG readability checks.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use Color Picker

  1. Adjust by hand: drag the saturation and value panel, the hue slider, and the transparency slider.

  2. Or type a HEX or RGB value into its field and every format syncs.

  3. Pick from screen: click Eyedropper and sample any pixel (Chromium browsers).

  4. Pick from an image: upload one, hover to preview, then click to select.

  5. Or click a swatch in the Top colors palette extracted from the image.

  6. Click any value to copy it, and Save Color to keep it in your swatches.

When to use it

  • Extracting a brand palette from a logo, screenshot, or photo.

  • Picking a color from an image without opening a design app.

  • Converting HEX to RGB or RGB to HEX without leaving the page.

  • Adding transparency to a brand hex in one place.

  • Building a personal palette in saved colors.

  • Checking text contrast against white and black before shipping a theme.

What it fixes

  • Opening Photoshop just to grab one color from an image.

  • Hand formatting rgba() strings and forgetting commas.

  • OS native pickers that do not show 8 digit alpha hex or OKLCH.

  • Losing swatches when you refresh another color tool.

About Color Picker

Color formats are a daily dev paper cut. Designers ship HEX, CSS uses RGB and HSL, modern designs use OKLCH for perceptual uniformity, and accessibility tooling needs all of them.

Upload an image to pull colors straight from it. Hover the image to preview any pixel, click to select, and use the auto generated Top colors palette to grab the dominant shades fast. Prefer manual control? Drag the 2D panel to set saturation and value, the hue strip for the base color, and the transparency strip for opacity. The eyedropper samples any pixel on screen in Chromium browsers.

HEX, RGB, HSL, and OKLCH stay in sync as you type, so paste any format and the rest updates live. Save colors to localStorage for reuse across sessions. The text readability cards check white and black text against your color using WCAG contrast so you can ship accessible themes with confidence.

References: MDN: <color> CSS data type · Bjorn Ottosson: OKLCH · WCAG: Contrast Minimum

Frequently asked

  • How do I pick a color from an image?

    Upload an image and it opens in the picker. Hover to preview any pixel color, then click to select it. The tool also extracts the top colors automatically so you can grab a whole palette in one go.

  • How does the image color extractor work?

    When you load an image, the tool scans its pixels, groups similar shades, and surfaces the most common colors as a Top colors palette of up to eight swatches. Click any swatch to load that color, then copy it in HEX, RGB, HSL, or OKLCH.

  • How does the saturation and value panel work?

    Drag anywhere in the 2D panel: the X axis sets saturation and the Y axis sets value (HSV brightness). The hue slider below picks the base color, and the transparency slider sets opacity. This matches the picker model used by Photoshop, Figma, and most native OS pickers.

  • What is the difference between HSL and OKLCH?

    HSL is convenient but perceptually uneven, so equal hue steps do not look equal. OKLCH is perceptually uniform, which makes generating accessible palettes much easier.

  • Does the eyedropper work?

    If your browser supports the EyeDropper API (Chromium based browsers), yes. Safari and Firefox do not support it yet, so the button hides on those browsers. You can still sample colors by uploading an image.

  • Are saved colors kept across sessions?

    Yes. Saved colors and recent colors live in localStorage on your device. Nothing is sent to a server. Hover a swatch and click the check to apply it or the cross to remove it.

  • What does the text readability section show?

    It previews white text and black text on your current color and rates each with the WCAG contrast ratio. Excellent and Good pass for body text, Large text only passes for headings, and Hard to read fails. Transparency is flattened over white before the ratio is measured.

  • Where is transparency applied?

    Transparency is included in HEX (8 digit), RGB (rgba), HSL (hsla), and OKLCH (with an alpha suffix).

  • Can I convert HEX to RGB or RGB to HEX here?

    Yes. This picker is a live HEX, RGB, HSL, and OKLCH converter. Paste a hex code or rgb() string into the input fields and every other format updates instantly.

Discussion

All tools