How to Use the Color Picker
Pick a color using the color swatch, or type a HEX code directly, and instantly see the equivalent HEX, RGB, and HSL values you can paste directly into CSS, design tools, or code.
Worked example: HEX #4F46E5 (this site's brand purple) converts to rgb(79, 70, 229) and hsl(243, 75%, 59%). All three describe the exact same color — just in the format your tool of choice expects.
Understanding Color Formats
| Format | Example | Best For |
|---|---|---|
| HEX | #4F46E5 | CSS, design tools, most common everyday use |
| RGB | rgb(79, 70, 229) | Adjusting individual red/green/blue channels |
| HSL | hsl(243, 75%, 59%) | Adjusting brightness or vibrancy while keeping the same hue |
Common Uses
Web developers grab the exact color code from a design mockup to use in CSS. Designers convert a brand color between formats depending on which tool they're using. Anyone matching a color from an image or inspiration board can dial in the exact HEX code and get all three formats at once. Everything runs locally in your browser with no data sent anywhere.
Frequently Asked Questions
What's the difference between RGB and HSL?
RGB defines a color by its red, green, and blue channel intensities, while HSL defines it by hue, saturation, and lightness, which many find more intuitive for adjusting shades.
Can I convert HEX to RGB directly?
Yes, type or paste any valid HEX code and the RGB and HSL equivalents appear instantly.
Does this tool support transparency (alpha)?
This version handles standard 6-digit HEX colors without an alpha channel.
Is this tool free to use?
Yes, completely free with unlimited conversions.
What does the Lightness value in HSL actually mean?
It ranges from 0% (black) to 100% (white), with 50% representing the purest, most saturated version of the hue.