How to Pick a Color and Get HEX, RGB & HSL Codes

Guides · Developer Tools · Updated 2026

Whether you're designing a website, editing a document, or matching a brand color, you need the exact color code — not just "blue". A color picker lets you choose any shade and instantly gives you its HEX, RGB and HSL values, ready to paste into your CSS or design tool.

HEX, RGB and HSL explained

HEX — a 6-digit code like #2B5CF5, the most common format in web design.
RGB — red, green and blue values from 0–255, e.g. rgb(43, 92, 245).
HSL — hue, saturation and lightness, e.g. hsl(226, 91%, 56%). Great for creating lighter or darker variations of a color.

Step-by-step: pick a color

Open the Color Picker.
Click the color box and drag to choose any shade.
See the HEX, RGB and HSL codes update live.
Click the copy button next to the format you need.

💡 Tip: HSL is the easiest format for making a color lighter or darker — just raise or lower the lightness value while keeping hue and saturation the same.

Which format should you use?

For most web work, HEX is standard and compact. Use RGB when you need transparency (RGBA), and HSL when you want to programmatically create shades and tints of the same base color.

Frequently Asked Questions

What's the difference between HEX and RGB?

They describe the same color in different notations. HEX is shorter; RGB is easier to adjust numerically. Both are fully supported in CSS.

How do I make a color semi-transparent?

Use RGBA in CSS, e.g. rgba(43, 92, 245, 0.5) for 50% opacity.

Can I match a color from an image?

This picker lets you choose any shade manually. To sample from an image, use your operating system's built-in eyedropper if available.

Are the codes accurate for CSS?

Yes. You can paste the HEX, RGB or HSL values directly into your stylesheet.

Is it free?

Yes, free and it runs entirely in your browser.

Try the Color Picker