Home › Image tools › Color Picker

Color Picker

Pick exactly the color you need and grab its code in seconds. This free color picker shows the HEX, RGB and HSL values of any color you select, with a one-click copy button next to each one. It runs entirely in your browser, so design decisions stay on your device.

Pick a color

Hue HEX code

rgb(52, 152, 219)

hsl(207, 69%, 53%)

Preview

What is a color picker?

A color picker is a visual tool that lets you choose a color from a gradient and read off its numeric code in the formats designers and developers use every day. Here you drag a crosshair over a saturation/value box and slide a hue bar; the tool instantly computes the color in HEX (like #3498DB), RGB (like rgb(52, 152, 219)) and HSL (like hsl(207, 69%, 53%)). Each value has a Copy button and each readout is click-to-copy. You can also type a HEX code directly to move the picker to that exact color, and a row of preset swatches gives you instant access to common Apple-style colors. Having all three formats together matters because CSS can take HEX, SVG and design tools often need RGB, and HSL is the friendliest format for adjusting brightness and saturation by hand. This is a fundamental tool for web design, UI work, branding and any time you need an exact, reusable color.

How to use

Drag the crosshair to pick a shade, then slide the hue bar.
The HEX, RGB and HSL values update instantly.
Click Copy (or tap a value) to copy any code to your clipboard.
Type a HEX code directly if you know it.

Example

Drag the crosshair to the top-left area, which is pure saturated color: the HEX reads #3498DB, RGB reads rgb(52, 152, 219) and HSL reads hsl(207, 69%, 53%). Click Copy next to the one you need.

Who is this color picker for?

This free color picker is built for anyone who needs to make a conversion quickly, but a few groups reach for it most often.

Students and young adults: New designers practice choosing colors from a real screen instead of guessing. A color picker for students lets you sample exactly what you see and copy the code instantly.
Designers and developers: Grab the exact hex of a UI element or a screenshot in one click. This free color picker is a color picker for designers and developers who need pixel-perfect values.
Professionals: Brand managers and content teams use the color picker to capture an on-screen color and keep documentation consistent.
Curious users: If you ever want to know the code behind a color you liked on a website, a color picker answers it immediately.

Color code reference table

The pixel you pick in the canvas is reported as these two representations - each color below shows its hex and RGB pair.

Color	HEX	RGB
Crimson	#DC143C	rgb(220, 20, 60)
Teal	#008080	rgb(0, 128, 128)
Royal blue	#4169E1	rgb(65, 105, 225)
Amber	#FFBF00	rgb(255, 191, 0)
Black	#000000	rgb(0, 0, 0)
Silver	#C0C0C0	rgb(192, 192, 192)

Common use cases

Matching a brand or design color from a screenshot or mockup.
Generating a consistent palette for a UI theme or style guide.
Finding the HEX code you need to drop straight into CSS.
Experimenting with HSL to tweak brightness and saturation without guessing.

Pro tips

Click any value (not just the Copy button) to copy it to your clipboard.
Type a HEX code to snap the picker to an exact color and read its RGB/HSL.
Use the preset swatches for quick access to Apple's standard system colors.
For accessibility, use a contrast checker to verify text colors against this one.

FAQ

How do I use the color picker?

Drag the crosshair over the box to choose a shade and slide the hue bar. The HEX, RGB and HSL values update instantly, each with a Copy button.

What is the difference between HEX, RGB and HSL?

HEX is a short code used in web CSS (like #3498DB); RGB defines a color by red, green and blue light; HSL defines it by hue, saturation and lightness, which is easier to adjust by feel.

How do I copy a color?

Press Copy next to any value, or click the value itself. The current color is written to your clipboard.

Can I enter a color instead of picking it?

Yes — type a HEX code (with or without the #) and the picker jumps to that exact color, showing its RGB and HSL.

What is a good starting point for a palette?

Pick one base hue, then vary saturation and lightness to create light backgrounds, accents and dark text from the same color family.

Is it free and private?

Yes. It is free and runs entirely in your browser, so nothing is uploaded or stored.

What else can I do with this color?

Use the Color Converter to transform HEX, RGB and HSL between formats anywhere, and a contrast checker to test readability.

Does it work on mobile?

Yes — the picker supports touch drag, so it works on phones and tablets as well as desktops.