🎨 Color Picker / Converter ☆

Overview

Need to find the perfect color for your project? Free Color Picker provides a full professional color picker with no software to install. Explore the entire color spectrum using an intuitive color wheel that lets you visually pinpoint any shade with precision. Web designers converting HEX to RGB for CSS, graphic designers matching brand colors in CMYK for print, and developers fine-tuning HSL values for dynamic theming all get instant conversions. The built-in eyedropper samples any color directly from your screen, so inspiration from images, logos or any visual reference is easy to capture. Forget hunting through color charts or converting between formats by hand. With real-time preview and slider controls for hue, saturation, lightness, and alpha transparency, you can dial in the exact color you need. Copy the resulting HEX, RGB, HSL, or CMYK values with a single click and paste them directly into your design or code. The Free Color Picker supports full alpha channel control for designs requiring transparency, and stores your recently picked colors so you can build a palette as you work. From subtle pastels to vibrant neons, it captures and converts colors in seconds.

How the color picker converts formats

The wheel and sliders edit a single source color, and every other format is derived mathematically from it: HEX and RGB are direct encodings of the same channels, HSL exposes hue, saturation and lightness, and CMYK is approximated for print reference. Alpha is tracked separately and included in the RGBA and 8-digit HEX output. The eyedropper uses the browser EyeDropper API where available, sampling any pixel on screen; elsewhere it reads from images you load. Recent colors are stored in your browser so a palette builds itself as you work.

Formats, limits and parameters

Privacy: sampling happens on your screen

Picking a color from a client logo or an unreleased design should not leak that image anywhere. The eyedropper reads pixels locally, conversions are pure math, and recent colors stay in your own browser storage. Nothing is transmitted and the tool works offline.

Practical color tips

• Use HSL when building themes: shifting lightness keeps hue consistent.
• Treat CMYK values as a reference, real print conversion depends on the press profile.
• Check contrast between text and background before shipping a palette.
• Copy 8-digit HEX when transparency must survive the clipboard.
• Keep a small recent palette instead of dozens of near-identical shades.

Related: browse all image tools for palettes, compression and conversion.

Colour spaces: HEX, RGB, HSL and perception

The same colour has several notations, and knowing which one to use prevents a lot of rework. HEX is shorthand for RGB written in base 16, convenient for CSS and design tools, but it is hard to reason about: #3a7bd5 tells you little about how light or saturated the colour is. RGB describes the amount of red, green and blue light and maps directly to how screens emit colour, which makes it the right format for code that mixes or adjusts channels. HSL describes hue, saturation and lightness, and it is far easier to work with when building a palette: keep hue constant and vary lightness to get a natural scale of the same colour, or reduce saturation to mute it. Alpha adds transparency and is written as an extra pair of digits in HEX or as a fourth value in modern CSS. Perceptual spaces such as LCH and Lab exist because HSL lightness is not how the eye perceives brightness, two colours with the same L value can look very different in weight, so these spaces produce more even gradients and accessible scales. Contrast is the practical check: WCAG requires 4.5:1 for body text and 3:1 for large text, and the ratio depends on relative luminance, not on hue. Everything is computed locally in your browser.