Skip to main content
WebColorTools

Color Picker

Pick any color and instantly get HEX, RGB, HSL codes. Free online color picker with eyedropper — 100% in your browser.

Instant 100% Private Free Forever
HEX RGB HSL HSV CMYK OKLCH Eyedropper

Want to pick a color from an image or photo?

Image Color Picker →
Open the Color Converter →

Tints, shades & tones

See full → Tints, Shades & Tones

Color harmonies

Harmony swatches keep the same saturation and lightness as the base color.

Explore on the Color Wheel →

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Square

Contrast preview

Full WCAG AA/AAA check → Contrast Checker

On white

Sample

3.98:1

On black

Sample

5.27:1

Color blindness preview

See on an image → Color Blindness Simulator

How to use the Color Picker

Four steps from visual pick to copy-ready color codes.

  1. 1

    Drag the color panel

    Move across the saturation/brightness square and adjust the hue slider until the preview swatch looks right.

  2. 2

    Edit or copy formats

    Type into HEX, RGB, HSL, HSV, OKLCH, or CMYK — every field and the picker stay in sync. Copy any value with one click.

  3. 3

    Sample from screen or image

    Use Pick from screen (Chrome/Edge) or open the Image Color Picker to sample a pixel from a photo.

  4. 4

    Glance at previews

    Check shade/tint strips, harmony swatches, and contrast ratios — then open the full tools if you need more.

What is an online color picker?

An online color picker (also called an HTML color picker or hex color picker) lets you choose a color visually and read its web-ready codes immediately. Drag across a saturation/brightness field, set hue on a slider, and copy HEX, RGB, HSL, HSV, OKLCH, or CMYK — or type into any field and watch the picker update.

Compact preview strips show nearby shades, tints, tones, and harmony partners without turning this page into a full palette builder. Glance at contrast ratios on white and black, then open the dedicated Contrast Checker for WCAG AA/AAA grading. Need a pixel from a photo? Use the linked Image Color Picker.

This page is built for pick → copy workflows. For all ten color formats — LAB, HWB, LCH, OKLAB, and more — use our Color Converter. Shareable links (#color=FF5733) bookmark your exact swatch.

Frequently asked questions

What is a color picker?
A color picker is a visual tool that lets you choose a color — usually with a saturation/brightness panel and a hue slider — and see its digital codes instantly. Designers use pickers to grab brand colors, match UI elements, and copy HEX or RGB values into CSS, Figma, or code editors without guessing.
How do I pick a hex color?
Drag the large color square to set saturation and brightness, move the hue slider for the base hue, then read or edit the HEX field below. You can type into any of the six format fields — HEX, RGB, HSL, HSV, OKLCH, or CMYK — and the picker stays in sync.
Is this an HTML color picker I can use online?
Yes. This is a free HTML color picker online — no download, no account. It runs entirely in your browser and outputs standard web color codes you can paste into HTML, CSS, Tailwind, or any design tool.
How do I get a color's hex code?
Pick any color with the panel or eyedropper. The HEX field updates live — click Copy to put the code on your clipboard. Share the page URL with #color=FF5733 in the address bar to link directly to that color.
How is this different from the Color Converter?
This page is picker-first: choose a color visually and copy the codes you need, with compact previews for tints, harmonies, and contrast. Our Color Converter is converter-first — paste any format and translate between all ten formats including LAB, HWB, and OKLAB in one place.

Related tools

More free tools — all run in your browser.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.

Image Color Picker

Pick the exact color of any pixel in an image. Upload, drag, or paste — get HEX, RGB, and HSL instantly. Free, 100% private.

Color Wheel

Explore color harmonies on an interactive wheel. Complementary, triadic, analogous, and more — export to CSS.

Tints & Shades

Generate tints, shades, and tones from one base color. Adjustable steps — copy or export labeled CSS. Free, in your browser.

Contrast Checker

Check WCAG AA and AAA color contrast ratios.

Color Blindness

See how your colors and images look to people with color vision deficiencies. Free, private, in your browser.