Free Online Color Picker — HEX, RGB, HSL & CMYK from Images, Screen & Wheel

What Is an Online Color Picker?

An online color picker is a browser-based tool that identifies and captures the exact color value of any pixel — from an uploaded image, directly from your screen, or via a visual interface like a color wheel or RGB sliders. Web designers, UI developers, front-end engineers, brand managers, and photographers use color pickers daily to maintain brand consistency, match colors across tools, and build cohesive color palettes and design systems.

Color Code Formats Explained: HEX, RGB, HSL, HSV & CMYK

HEX color codes are the standard format in HTML and CSS. They encode red, green, and blue channels as two hexadecimal digits each, producing a compact 6-character code like #2563eb. Add two more digits for alpha and you get an 8-digit HEX (RRGGBBAA) code, shown directly in the HEX8 row above — no manual conversion needed. RGB (Red Green Blue) expresses the same three channels as decimal numbers from 0–255 and is used natively in CSS with rgb() and rgba(). HSL (Hue Saturation Lightness) is more intuitive for designers — hue is the color angle on a wheel (0–360°), saturation is color intensity (0–100%), and lightness is how bright or dark the color is. HSV (Hue Saturation Value) — also called HSB (Hue Saturation Brightness), the same model under a different name — is similar to HSL but uses Value/Brightness instead of Lightness, making it closely aligned with how the color wheel above works. CMYK (Cyan Magenta Yellow Key/Black) is the subtractive color model standard for print design; treat the CMYK row as a close approximation, since exact print output also depends on your printer, paper, and ink profile.

HSL vs. HSV/HSB: What's the Difference?

This tool doubles as a dedicated hue, saturation, lightness color picker — switch to the Sliders tab and choose HSL mode to set all three directly, rather than deriving Lightness indirectly from the wheel. Both models use Hue and Saturation the same way, but the third value works differently. HSL's Lightness runs from black, through the pure hue, up to white — 100% lightness is always white, regardless of saturation. HSV/HSB's Value (Brightness) only runs from black up to the pure, fully-saturated hue — to reach white in HSV space, you lower the saturation instead of raising the value. That's why the Color Wheel's Brightness slider (HSV) and the Sliders tab's Lightness slider (HSL) can produce different results at what looks like the same position — they're not measuring the same thing. Use the dedicated HSL sliders when you specifically need to control lightness; use the wheel when you're thinking in terms of a pure hue getting darker or more washed out. For a fuller walkthrough with worked examples, see our HSL vs HSV vs RGB guide.

Color Theory: How Color Harmonies Work

• Complementary — Two colors directly opposite on the color wheel. Creates maximum contrast and visual tension.
• Analogous — Three colors adjacent on the wheel. Creates calm, harmonious palettes common in nature.
• Triadic — Three colors equally spaced 120° apart. Offers vibrant variety while maintaining balance.
• Split-complementary — The base color plus the two colors flanking its complement. Softer than true complementary.
• Tetradic — Four colors forming a rectangle on the wheel. Rich and complex; needs careful balance.

WCAG 2.1 Color Contrast Requirements for Web Accessibility

The Web Content Accessibility Guidelines (WCAG) 2.1 require that text has sufficient contrast against its background so it can be read by people with low vision or color blindness. Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 and 4.5:1 respectively. Always verify your text/background color pairs with the Contrast Checker tab before publishing any web content.

How to Pick a Color from an Image

To pick a color from an image, select the Image tab and upload any PNG, JPG, WEBP, GIF, or SVG file. The tool renders it on an HTML5 Canvas, letting you hover for a real-time magnified zoom lens preview and click any pixel to capture its exact color in all formats simultaneously. You can also extract the full color palette from the image using the Auto-extracted Palette feature, which applies a median-cut color quantization algorithm to identify the most dominant and representative colors.

How to Use the Screen Color Eyedropper

The screen color eyedropper uses the browser’s native EyeDropper API (supported in Chrome 95+ and Edge 95+) to sample any pixel anywhere on your screen — including other applications, desktop wallpapers, and browser content outside the tool. Click any Pick from Screen button and your cursor transforms into an eyedropper; hover over any color and click to capture it instantly as HEX, RGB, HSL, HSV, and CMYK values.

Also Known As: RGB Finder, Color Matcher & Color Detector

Depending on your background, you might search for this tool by a few different names — they all describe the same free utility. Designers often look for a website color picker or web based color picker to pull colors straight from a live page using the screen eyedropper (a browser can't read pixels from a page you only paste a link to — the eyedropper works because it samples your actual screen, live). Developers debugging a stylesheet may search for an RGB finder, RGB checker, or color code finder — the "Enter Any Color" field above accepts a pasted HEX, rgb(), or hsl() string directly, which covers that case without needing the sliders at all. Anyone who already has a color and wants to know its closest named color gets that as a color matcher, shown automatically under the codes list. Print designers typically want a CMYK picker to check ink breakdown, designers thinking in terms of a hue saturation lightness color picker can jump straight to the dedicated HSL sliders in the Sliders tab, and anyone just browsing for inspiration might use the named color chart tab or simply pick colors online. Whichever term you used to get here, the same tool above covers image picking, screen picking, the HSV color wheel, dedicated RGB and HSL sliders, 8-digit HEX/alpha output, and full HEX, RGB, HSL, HSV/HSB, and CMYK values.

Color Picker Glossary

HEX Color Code

A 6-digit hexadecimal string (e.g., #2563eb) representing red, green, and blue channels. The standard format for CSS and HTML colors.

RGB (Red Green Blue)

A color model expressing colors as three integers (0–255) for red, green, and blue. Used natively in CSS with rgb() and rgba() for web colors.

HSL (Hue Saturation Lightness)

A human-friendly color model where hue is a degree (0–360°) on the color wheel, saturation is color intensity (0–100%), and lightness is brightness (0–100%).

CMYK (Cyan Magenta Yellow Key)

The subtractive color model used in print design. Colors are mixed from cyan, magenta, yellow, and black (key) inks.

WCAG Contrast Ratio

A numeric ratio (e.g., 4.5:1) defined by the W3C Web Content Accessibility Guidelines measuring text legibility against its background for users with visual impairments.

Color Palette Extraction

The algorithmic process of sampling image pixels to identify dominant representative colors, typically using median-cut or k-means quantization.

EyeDropper API

A browser Web API (Chrome/Edge 95+) that lets web applications sample the color of any pixel on the user’s screen, including outside the browser window.

Color Harmony

A set of colors that are aesthetically pleasing together based on their positions on the color wheel. Common types include complementary, analogous, triadic, split-complementary, and tetradic harmonies.

HSV / HSB

Hue, Saturation, Value — also called Hue, Saturation, Brightness. Two names for the exact same color model; there is no numerical difference between them.

8-Digit HEX (RRGGBBAA)

A HEX code extended with two extra digits encoding alpha transparency, e.g. #2563ebff for fully opaque. Functionally equivalent to CSS rgba(), just in hex form.

Named Color Matching

Comparing a color's RGB values against the list of standard CSS named colors (like "RoyalBlue" or "Tomato") to find the closest one by numeric distance — an approximation, not an exact match unless the color happens to be identical.