Color Picker

Pick any color and instantly read its HEX, RGB and HSL codes with a live preview. Drag the swatch or type a value — everything updates in your browser, and each code copies with one click.

Pick a color above to see its codes.

HEX, RGB and HSL

A screen color is built from three channels — red, green and blue — each from 0 to 255. The same color can be written three common ways:

HEX #RRGGBB = rgb(R, G, B) = hsl(H, S%, L%)

HEX writes each channel as two hexadecimal digits. RGB lists the same three numbers in decimal. HSL describes the color by hue (the angle on the color wheel, 0–360°), saturation (how vivid) and lightness (how bright) — often easier to tweak by eye.

Worked example

The blue #2563EB in each format:

HEX: 25 = 37, 63 = 99, EB = 235.
RGB: rgb(37, 99, 235).
HSL: ≈ hsl(221°, 83%, 53%) — a vivid medium-bright blue.

Picking good colors

HSL makes palettes easy: keep the hue and vary lightness for tints and shades, or rotate the hue by 30–60° for harmonious neighbours and 180° for a complementary accent. When colors carry meaning (text on a background, buttons, status), check that there's enough contrast for readability — light text needs a dark enough background and vice versa. All three formats describe the exact same pixel, so use whichever your tool or stylesheet prefers.

Tip: already have a hex value and just need its RGB numbers? Use the dedicated HEX to RGB converter.

Frequently asked questions

What's the difference between HEX, RGB and HSL?

They're three notations for the same color. HEX and RGB both describe the red, green and blue amounts (in hex or decimal); HSL describes hue, saturation and lightness, which is often more intuitive for adjusting a color by eye.

How do I copy a color code?

Pick or type a color, then click the copy button next to whichever format you need — HEX, RGB or HSL. The value is placed on your clipboard ready to paste into CSS or a design tool.

Can I enter my own HEX value?

Yes. Type a 3- or 6-digit hex code (with or without the #) into the HEX field and the swatch and other formats update instantly.

Does this work offline / privately?

Yes. The color math runs entirely in your browser. Nothing about the colors you pick is sent anywhere.

MB
Mustafa Bilgic · Editor, Calcool
Color conversions use the standard sRGB and HSL formulas. For a reference see the MDN CSS color reference. Everything runs in your browser — nothing you enter is uploaded, logged or stored.

Related calculators

🎨 HEX to RGB Converter🔢 Hex to Decimal Converter🔳 QR Code Generator🆔 UUID Generator