What is Color Picker?

Pick any color visually and grab its hex, RGB, and HSL values. Click or drag to find the right shade, then copy the code you need.

Drag inside the saturation/brightness square to change tone, slide the hue bar to shift colour family, and the tool spits out hex, RGB, and HSL values you can copy with one click. Type a hex code in the input and the square jumps to that exact spot — useful for tweaking a brand colour you already own without restarting from a random shade.

How to use

1. Click on the color area or drag the selector to find your desired color
2. Fine-tune using the hue slider and optional opacity control
3. Copy the hex, RGB, or HSL value with one click

When to use

• Picking accent colours for a website's CSS without juggling design apps.
• Translating a hex from a brand guide into HSL for design systems.
• Building a small palette of neighbouring shades by stepping the hue slider.

Result

Select a warm orange and get #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).

FAQ

What's the difference between HSL and HSB (HSV)?

HSL goes from black to white through full colour at 50% lightness — useful for symmetric tints and shades. HSB (used by Photoshop) goes from black to full colour at 100% brightness, which matches how a paint mixer thinks.

Why do my screen colours look different from the printed result?

Screens use RGB (additive light); print uses CMYK (subtractive ink). Bright greens and electric blues in particular have no exact CMYK match. Always proof on the target medium before sign-off.

Are the hex codes WCAG-safe by default?

No — accessibility depends on the colour pair, not a single colour. Pair your foreground hex with the background, then check the contrast ratio (at least 4.5:1 for body text, 3:1 for large text).

How do I find a colour that already exists on screen?

Click Pick from screen and the eyedropper lets you sample any pixel anywhere on your display — the exact hex loads straight into the picker so you can fine-tune saturation, brightness, or transparency. (The eyedropper button only shows up where this is supported; otherwise grab the hex with your operating system's color meter — macOS Digital Color Meter, Windows PowerToys, Chrome DevTools — and paste it into the input field.)

Does this picker support transparency?

Yes. Drag the Opacity slider below the hue bar to set any alpha from 0 to 100 percent. The preview swatch shows a checkerboard behind the colour so you can see the see-through level at a glance, and the RGB and HSL copy buttons switch to rgba() and hsla() automatically once alpha drops below 100.

Related Tools