Color Picker — Pick Colors From Image or Spectrum

Pick colors from any image or a visual spectrum. Get HEX, RGB, HSL, OKLCH, and more — with instant copy, accessibility contrast checks, and palette saving. 100% in your browser.

100% in-browser — nothing uploaded

Drop an image here

or click to browse, paste from clipboard, or enter a URL below

BrowsePasteDragURL
Try picking the sky
#2563EB
closest: royalblue
Output Formats
HEX#2563EB
HEX3N/A
HEX8#2563EBFF
RGBrgb(37, 99, 235)
RGBArgb(37 99 235 / 1)
HSLhsl(221, 83%, 53%)
HSLAhsl(221 83% 53% / 1)
HSVhsv(221, 84%, 92%)
CMYK≈cmyk(84%, 58%, 0%, 8%)
OKLCHoklch(0.55 0.22 263)
CSS≈ royalblue
Recent
Saved Palette0 / 50
WCAG Contrast
vs Black4.1:1
AA ✗AA-Lg ✓AAA ✗
vs White5.2:1
AA ✓AA-Lg ✓AAA ✗
vs Custom5.2:1
AA ✓AA-Lg ✓AAA ✗

How to Pick a Color From an Image

  1. Click the upload area or drag-and-drop an image from your desktop. You can also paste a screenshot from your clipboard (Ctrl+V / Cmd+V) or enter an image URL.
  2. Hover (or touch-and-hold on mobile) over the image. A magnifier loupe appears showing a zoomed view of the area under your pointer.
  3. Adjust the sample size (1×1, 3×3, or 5×5 px) to average nearby pixels — useful for noisy JPEG photos.
  4. Click or lift your finger to pick the color. It appears in the output panel with all supported formats.
  5. Click the copy button next to any format to copy the value to your clipboard.
  6. Optionally, click "+ Palette" to save the color or check its WCAG contrast ratio below.

How to Pick a Color From the Spectrum

  1. Switch to "Pick from Spectrum" mode using the toggle at the top.
  2. Click or drag within the saturation/value square to choose your shade. Move the hue slider to change the base hue (0°–360°).
  3. Use the alpha slider to adjust transparency — the checkerboard shows how transparency renders.
  4. Type exact values into the HEX, RGBA, or HSLA fields for precise color entry.
  5. Use arrow keys on the saturation/value field for fine adjustments (Shift+Arrow for larger steps).
  6. Copy any output format and save to your palette as with image mode.

Try These Sample Colors

Click any swatch to load it as the current color and see all output formats.

Worked Example

#1E88E5 · RGB(30, 136, 229) HSL(207°, 90%, 51%) · OKLCH(0.62, 0.16, 248°) Contrast vs white: 4.6 : 1 AA ✓

How Your Image Is Processed

Your image never leaves your device. When you load an image, it is decoded and rendered directly in your browser using the HTML5 Canvas API. All color sampling, format conversion, and palette operations happen 100% client-side in JavaScript.

No image data is uploaded to any server. No pixels, filenames, or color values are sent anywhere. You can verify this by checking your browser's network tab — you will see zero requests containing image data.

Palettes and preferences are stored in your browser's localStorage — only on your device. There is no account, no signup, and no server-side storage.

Read the ToolMatic privacy policy

Frequently Asked Questions

How does this color picker work?

The tool runs entirely in your browser. In Image mode, it uses the HTML5 Canvas API to read pixel data from your uploaded image. In Spectrum mode, it renders an interactive HSV gradient picker. Both modes convert the selected color into every supported format (HEX, RGB, HSL, HSV, CMYK, OKLCH, CSS name) in real time.

Is my image uploaded to a server?

No. Your image is processed entirely on your device. No image data, filenames, or color values are ever sent to a server. Open your browser's Network tab to confirm — you will see zero requests carrying image data.

Can I pick a color from anywhere on my screen?

Screen-wide picking via the EyeDropper API is planned for a future release. Today you can pick from any uploaded image or from the visual spectrum. As a workaround, take a screenshot and paste it directly into the tool.

What is the difference between HEX, RGB, HSL, and OKLCH?

HEX (#RRGGBB) is the most common web color format. RGB defines color by red, green, and blue channels (0-255). HSL uses hue, saturation, and lightness — more intuitive for designers. OKLCH is a modern perceptually uniform color space; colors with the same lightness value look equally bright to the human eye, making it ideal for balanced palettes and design systems.

How do I copy the color code on mobile?

Each color format row has a dedicated copy button at least 44×44 px in size. Tap it and the value goes to your clipboard with a "Copied" confirmation announced for screen readers.

Why does the color look slightly different from the original image?

Browser canvas sampling assumes the sRGB color space, so colors from images with other color profiles may shift slightly. JPEG compression also introduces noise — try switching to a 3×3 or 5×5 pixel sample to average a small neighborhood instead of a single pixel.

How do I check if a color has enough contrast for accessibility?

The Contrast panel shows WCAG 2.x contrast ratios of the picked color against black, white, and a custom background. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1. Pass/fail badges show the result at a glance.

Can I save my palette without signing up?

Yes. Saved palettes live in your browser's localStorage — no account needed. Export the palette as CSS custom properties, JSON, or a PNG swatch sheet to take it into your project.

How to Use This Tool

  • Use the demo image to feel out the magnifier before uploading your own photo.
  • Switch to a 3×3 or 5×5 sample on noisy JPEG photos to average a small neighborhood.
  • Use arrow keys on the saturation/value field for keyboard-only spectrum tweaks.
  • Pin frequently used colors to your palette and export as CSS variables for your project.
  • Open the Contrast panel to confirm picked colors meet WCAG AA before shipping them.