Skip to main content
Toolzer — Free Online Tools
All Tools
Design Tools

Color Picker

Pick a color, extract colors from an image, generate palettes, simulate color blindness, and copy HEX/RGB/HSL/HSV/CMYK — all in your browser.

#3B82F6
Alpha 100%

Contrast (WCAG)

On White
3.68:1Fail
On Black
5.71:1AA

Color harmonies

complementary
analogous
triadic
tetradic
split Complement

Shades & Tints

Tints (lighter)
Shades (darker)

Curated palettes

Material
Tailwind
Pastel
Earth
Neon

About this color picker

This free online color picker does far more than convert HEX to RGB. Use the interactive saturation/value pad and hue slider to dial any color, extract dominant colors from an uploaded image with a k-means analysis, generate export-ready palettes in six harmony modes, and preview your palette through eight color-blindness simulations. Everything runs in your browser — no uploads, no accounts.

Copy any color as HEX, HEX+alpha, RGB, RGBA, HSL, HSLA, HSV, or CMYK with one click. Export entire palettes as CSS variables, SCSS lists, Tailwind config snippets, JSON, or a PNG swatch sheet. Save your favorite palettes to local storage so they're waiting the next time you open the tool.

Color formats explained

  • HEX — six hex digits, the CSS default.
  • RGB — red/green/blue 0-255, the native format of displays.
  • HSL — hue/saturation/lightness, best for nudging brightness.
  • HSV / HSB — hue/saturation/value, used in Photoshop and Figma.
  • CMYK — cyan/magenta/yellow/key, the print format.

Extracting colors from an image

Drop a photo, brand logo, screenshot, or design reference into the "From image" tab. The tool downsamples the image, runs a k-means clustering pass on the pixel array, and returns the six most dominant colors ranked by frequency. Click any pixel on the preview canvas to pick that exact color, or click a dominant swatch to apply it. This is the fastest way to reverse-engineer a palette from an inspiration image without opening a design app.

Accessible color choices

The Contrast (WCAG) panel checks readability against white and black. Aim for 4.5:1 for body text and 3:1 for large text; 7:1 hits AAA. The color-blindness tab simulates protanopia, deuteranopia, tritanopia and their milder "anomaly" variants, plus full achromatopsia — the fastest way to catch a palette that collapses to a single hue for a portion of your users.

Frequently asked questions

How accurate is the image extractor?

It uses k-means clustering on a downsampled pixel array, which matches how design tools like Coolors work. Six clusters converge quickly and represent the perceived palette well.

Do you upload my images anywhere?

No. The image is decoded into an in-browser canvas and analyzed locally. It never leaves your device — you can verify this in your browser's network panel.

Which color-blindness simulation is accurate?

We apply the standard Machado/Brettel 3×3 transformation matrices in sRGB space. They give a faithful preview for UI review — good enough to catch red/green collisions and other palette failures.

Can I save my palettes?

Yes. Click "Save palette" in the generator tab — palettes persist in your browser's local storage. You can also export as CSS variables, SCSS, Tailwind config, JSON or a PNG swatch strip.

Does the eyedropper work in every browser?

"Pick from screen" uses the EyeDropper API, available in Chromium browsers (Chrome, Edge, Brave, Opera). Safari and Firefox don't expose it yet.

Why does my HEX look different in print?

Screens use additive RGB; print uses subtractive CMYK. The CMYK conversion here is a starting point — always send a calibrated proof for production runs.

Share this tool

FacebookXWhatsAppTelegramLinkedInRedditPinterestEmail

Was this tool helpful?

93% · 246 people found this tool helpful

About this Color Picker

A complete color workspace in your browser. Pick any color with an interactive saturation/value pad and hue slider, then copy HEX, RGB, HSL, HSV or CMYK with one click. Upload an image to extract its dominant colors via k-means, generate export-ready palettes in six harmony modes (monochromatic, analogous, complementary, triadic, tetradic, random), and preview every color through eight color-blindness simulations. Export palettes as CSS variables, SCSS, Tailwind config, JSON or PNG — everything runs locally, no uploads.

How to use Color Picker

  1. 1

    Open the Picker

    Click the canvas or preview to sample a color — you can also upload an image and pick from any pixel.

  2. 2

    Fine-Tune the Value

    Adjust hue, saturation, and lightness with the sliders, or type an exact HEX / RGB value.

  3. 3

    Compare Formats

    See the same color represented as HEX, RGB, HSL, and CSS variables — copy whichever format you need.

  4. 4

    Save to Your Palette

    Add favorites to the on-page palette so you can compare and copy several colors in one session.

Why Use Color Picker

Colors carry a brand, and getting them exactly right matters. Color Picker makes precise color selection painless — sample from an image, fine-tune with sliders, or type a known HEX value and see it in every format you might need. The workflow is designed for designers, developers, and anyone building a design system. Toolzer's design philosophy is simple: privacy-first (no tracking, no accounts), performance-first (the page is interactive in under a second on a 3G connection), and honesty-first (no fake ratings, no dark patterns, no upsells). Color Picker follows the same rules as every other utility on the site. You can bookmark this page, share the URL with a colleague, or pin it to your browser's toolbar — the experience will be identical every visit, and it will keep working even if you're on airplane Wi-Fi. Real people use this tool for real work — freelancers cleaning up client deliverables, sysadmins triaging tickets, students finishing assignments — and it is tuned for those workflows, not for demo videos.

Tips & Best Practices

  • 1Sample from a real screenshot of the destination surface — colors look different on light vs dark backgrounds.
  • 2Save your palette to a note or design file; the on-page palette is per-session and won't survive a refresh.
  • 3Check accessibility contrast (WCAG AA / AAA) before you commit a color to a UI theme.
  • 4Prefer HSL values when tweaking a color by hand — hue and lightness are easier to reason about than raw RGB.
  • 5Use CSS variables in your stylesheet so a single color change propagates everywhere.

Common Use Cases

  • 1Picking, converting, or matching colors while designing a UI, brand kit, or presentation.
  • 2Generating design assets (favicons, palettes, ratios) for a new project or client handoff.
  • 3Checking design specs against real device metrics before shipping a responsive layout.
  • 4Collaborating with developers by sharing precise color codes, sizes, or ratios instead of screenshots.
  • 5Experimenting with variations quickly during early-stage design exploration.

Frequently asked questions

How does the image color extractor work?

It downsamples your image and runs k-means clustering on the pixel array to find the six most dominant colors. The whole process happens in your browser — the image never leaves your device.

Which color-blindness types are simulated?

Protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia and achromatomaly — using the standard Machado/Brettel matrices for faithful UI review.

Can I export a palette to my design tool?

Yes. The generator exports CSS variables, SCSS lists, Tailwind config snippets, JSON, or a PNG swatch strip. Saved palettes also persist in your browser's local storage.

What contrast ratio do I need?

WCAG AA requires 4.5:1 for body text and 3:1 for large text. AAA targets 7:1 and 4.5:1 respectively.

Why does my HEX colour look different in print?

Screens use RGB (additive), print uses CMYK (subtractive). Always proof print colours from a calibrated source — not from a screen-only HEX.

What is the difference between HSL and HSV?

HSL uses lightness (white at the top). HSV uses value (black at the bottom). HSL maps better to perceived brightness in UI work.

Do I need to create an account to use Toolzer?

No. Every utility on Toolzer is free, anonymous, and works in any modern browser without registration.

Is Toolzer safe to use with sensitive inputs?

Yes. Whenever the tool can produce an answer entirely in the browser, the data never leaves your device.

Does Toolzer work on mobile?

Yes. The interface is fully responsive and works on iOS Safari, Android Chrome, and every modern mobile browser.

Can I link to or bookmark a result?

Yes. Every Toolzer page has a clean permanent URL you can bookmark or share.

Related tools & guides

Image Compressor

Large images are the single biggest cause of slow web pages.

Aspect Ratio Calculator

Resizing an image without distorting it means keeping the same width-to-height ratio.

Color Picker

A complete color workspace in your browser.

SVG Optimizer

The SVG Optimizer is a fast, single-purpose tool that focuses on doing one job well.

Color Blender / Mixer

The Color Blender / Mixer is a fast, single-purpose tool that focuses on doing one job well.

CSS Border Radius Generator

The CSS Border Radius Generator produces high-quality output on demand — click generate as many times as yo…