Color Picker & Converter

Color Picker & Converter — Sample Any Color and Convert It Instantly

You know roughly what colour you need — "that dusty blue-green" — but you need the precise value: a hex code for CSS, an RGB triplet for a design tool, or a CMYK breakdown for print. This tool gives you the exact answer two ways: pick a colour with your browser's native colour chooser or type a hex value directly, or use the Eyedropper to sample a colour from anywhere on your screen — a photo open in another tab, an app window, a physical mockup on a second monitor. Either way, every format updates instantly: HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK.

This tool does not accept an image upload — it doesn't have a canvas you click pixels on. It works from the native OS/browser colour picker, manual hex entry, and the EyeDropper API for on-screen sampling. A colour history keeps your last ten picks so you don't lose values as you move between them.

How to Use It

Click the colour swatch to open your browser's native colour chooser, or type a 6-digit hex value directly into the Hex Value field. On Chrome or Edge, click "Eyedropper" to sample a colour from anywhere on your screen — your cursor turns into a magnified picker and clicking captures that exact pixel, wherever it is on your display. Every format below updates the moment you pick a colour, and the colour is added to your history automatically.

The colour history at the bottom shows your last picked colours as swatches. Click any swatch to bring back that colour's values. Use "Export Palette" to save your history as CSS variables, JSON, or SCSS.

Common Use Cases

Matching brand colours in code: Use the Eyedropper to sample a colour from a logo or brand image open elsewhere on your screen, then copy the hex value straight into your CSS, React styles, or design system. Faster than opening Photoshop and using its eyedropper.

Print-ready colour values: Pick or sample a colour and read off the CMYK breakdown directly — no separate conversion step needed when handing values to a print vendor. The CMYK figures use the standard subtractive-colour formula and are a close approximation; for colour-critical print production, confirm against your print vendor's colour profile.

Matching colours across design files: If you received a design mockup as a flat image rather than a source file, open it in your OS image viewer or another browser tab, then use the Eyedropper to sample exact values from it — backgrounds, text, borders, icons — and replicate them in your code or design tool.

Colour correction reference: When colour-grading a photo in Lightroom or Photoshop, sample the on-screen result with the Eyedropper to get measurable hex/RGB reference points rather than working purely by eye.

Web accessibility checks: Sample the foreground and background colour from a screenshot or live page and check the contrast ratio between them using the RGB values. A quick way to spot potential accessibility issues without access to the design source file.

Understanding Colour Formats

The tool shows you the same colour in seven formats: Hex (e.g., #3B82F6) — the most common format in web development and design tools. RGB/RGBA (e.g., 59, 130, 246) — the raw red, green, blue channel values used in CSS and most design applications. HSL/HSLA (e.g., 217°, 91%, 60%) — hue, saturation, lightness, useful for understanding a colour's relationship to other tones. HSV — hue, saturation, value, common in colour-picker UIs. CMYK — cyan, magenta, yellow, key (black), the subtractive model used for print.

All represent the same colour — use whichever format the tool or vendor you're working with requires.

Tips for Accurate Picking

The Eyedropper samples exactly what's rendered on your screen, so JPEG compression artefacts, monitor colour profiles, and display calibration can all shift the value slightly from the "true" source colour. For precise brand colour identification, sample from a PNG or SVG version of the logo if available — they don't carry JPEG compression artefacts.

The Eyedropper API is currently supported in Chromium-based browsers (Chrome, Edge, Opera) but not in Safari or Firefox. If the Eyedropper button isn't visible, your browser doesn't support it — use manual hex entry or the native colour picker instead.

Privacy and Limitations

Everything runs entirely in your browser. Nothing is uploaded, and colour history is kept only in the current page session. The CMYK conversion uses the standard formula and is a reasonable approximation for reference — for colour-critical print production, verify against your print vendor's actual colour profile, since true CMYK conversion is device- and ink-dependent.