Color Picker

Pick a color manually or sample an uploaded image, then copy precise HEX, RGB, HSL, RGBA, HSLA, or CMYK values.

Sample an image pixel or type a HEX value for direct inspection.

Review multiple formats and harmony suggestions before using a color in CSS, design tools, brand assets, or documentation.

  • Copy HEX, RGB, RGBA, HSL, HSLA, and CMYK values.
  • Extract dominant colors from an uploaded image.
  • Export color harmonies as JSON or CSS variables.

How to use Color Picker

Use Color Picker to choose a manual color, sample an image, copy the right code format, and save a small color scheme when needed.

  1. 1

    Choose a color source

    Drag on the color picker, type a HEX value, generate a random color, or upload an image when you need to pick a color from a real design or photo.

  2. 2

    Sample and compare values

    Click an uploaded image to sample a pixel, select a dominant color, or use the color history to compare recent picks without starting over.

  3. 3

    Copy or export

    Copy the format your destination needs, such as HEX for CSS, RGB for quick documentation, HSL for design adjustments, or export the harmony set as CSS or JSON.

Manual color picker

Use the interactive picker or a typed HEX value to find a precise color without uploading an image.

Image color sampling

Upload an image, click any visible pixel, and capture the matching color code from the resized preview canvas.

Color format conversion

Convert the selected color into HEX, RGB, RGBA, HSL, HSLA, and CMYK so the value fits web, design, and print-adjacent workflows.

Dominant image colors

After an image loads, the tool surfaces dominant colors so you can build a palette without manually hunting every shade.

History and local state

Recent colors are stored locally in the browser, making it easier to revisit colors during the same project.

CSS and JSON export

Export harmony sets as CSS variables or JSON when you want reusable color data outside the picker for projects.

Color Picker privacy and processing

Color Picker works in the browser, stores recent colors locally when available, and lets you clear the working history from the page.

Processing Browser

Color Picker samples image pixels and converts selected colors in the browser, then shows HEX, RGB, RGBA, HSL, HSLA, and CMYK values.

Storage Local

The selected color and recent color history can be saved in local browser storage so they are available when you return on the same device.

Color Picker account access

Color Picker supports guest use for color picking, image sampling, copying values, and exporting CSS or JSON color schemes.

Before You Use Color Picker

Review source quality, display differences, and color-format needs before using selected color codes in production assets.

Privacy

Use only images and color references you are allowed to inspect, especially when screenshots include client dashboards, unreleased products, or private documents.

The tool stores recent colors locally on your device, so clear history when shared computers or sensitive brand work are involved.

Accuracy

Screen brightness, browser color handling, compression, and the image source can make a sampled color look different in another app or device.

For brand-critical work, compare the copied value with the official brand guide or source design file before publishing.

Compatibility

HEX, RGB, and HSL are common in web work, while CMYK values here are a conversion reference and should not replace print proofing.

If a pasted HEX value does not update correctly, check that it uses six hexadecimal characters and starts with a hash sign.

Output

Paste copied values into the real destination, such as CSS, a design token file, or a graphics editor, and confirm the result visually.

When exporting CSS or JSON, review the generated harmony set so unused colors do not get added to a project by mistake.

Limits

Color Picker accepts browser-readable images for sampling and resizes large uploads for the on-page canvas. Very large images can take longer to process.

Questions about Color Picker

What can I do with Color Picker?

You can choose a manual color, sample a pixel from an uploaded image, copy HEX, RGB, RGBA, HSL, HSLA, and CMYK values, review dominant colors, and export harmony sets.

Can Color Picker pick a color from an image?

Yes. Upload an image, click the area you want to sample, and the selected color updates with copy-ready color formats.

Does Color Picker require an account?

No. You can pick, copy, and export colors as a guest. Recent colors may be stored locally in your browser for convenience.

Which color code should I copy?

Use HEX for most CSS and design handoff, RGB or RGBA when opacity or documentation calls for it, HSL or HSLA for easier hue and lightness adjustments, and CMYK only as a reference conversion.

4.2 (510 ratings)