← All tools
// Design / Color

Color Picker online

Pick any color and convert between HEX, RGB, HSL formats

Color Picker logo
by
CHUNKY
MUNSTER

How to Use color-picker

  1. Click anywhere in the colour wheel or gradient picker to select a colour.
  2. Alternatively, type a value directly into any field: HEX, RGB, or HSL.
  3. Adjust the hue ring, saturation/lightness square, and opacity slider independently.
  4. Click Copy next to any format to copy that representation to the clipboard.

A colour picker is the most intuitive way to select a colour and read its numeric value — particularly when you know what you want visually but not its code. This picker provides a full HSL wheel with saturation/lightness selection and outputs the picked colour as HEX, RGB, HSL, HSV, and CMYK simultaneously.

How the Colour Picker Works

The outer ring selects the hue (0–360°). The inner square sets saturation (left–right) and lightness (top–bottom). Moving around the square changes the colour while maintaining the chosen hue. The opacity slider adds an alpha channel. All representations update in real time as you drag. You can also type values into any field and the picker will jump to the corresponding colour.

Frequently Asked Questions

What is the difference between a colour picker and a colour converter?

A colour picker starts with a visual selection — drag to choose a colour by sight. A converter starts with a numeric value in one format and translates it to others. Use the picker when you know how a colour looks; use the converter when you know its code.

Why can't I type "orange" and get the colour?

Named CSS colour keywords are supported in the input field. Try typing "orange", "cornflowerblue", or any CSS named colour — the picker will jump to that colour and show its numeric equivalents.

How do I pick a colour from my screen?

Modern browsers support the EyeDropper API. Click the eyedropper icon (if shown) to pick any colour visible on your screen. Chrome supports this from version 95; Firefox support varies.

What are the 6-digit HEX and 8-digit HEX formats?

6-digit HEX is #rrggbb for opaque colours. 8-digit HEX is #rrggbbaa where the last two digits are the alpha channel (00 = transparent, FF = opaque). CSS supports 8-digit HEX in all modern browsers.

See also the Color Converter, CMYK Converter, and Color Contrast Checker.