Free online color converter. Convert between HEX, RGB, and HSL color formats with a live color preview and one-click copy.
How to Use the Color Converter
Enter a color value in HEX, RGB, or HSL and see conversions to all other formats instantly.
About This Tool
Colors on screens are defined by mixing red, green, and blue light — but different tools express that mix in different notations. HEX codes (#3b82f6) pack three 0–255 values into a compact six-character string used throughout CSS and design tools. RGB spells out the same three values as decimals, which is convenient for programmatic manipulation. HSL describes a color by its hue (0–360°), saturation, and lightness, making it intuitive to adjust a shade without affecting its hue. This converter translates between all three systems instantly with a live color swatch, so you can grab a HEX code from Figma and get the HSL values for your CSS, or vice versa. Pair with the Contrast Checker to verify accessibility.
Quick Reference Table
| Color | HEX | RGB | HSL |
|---|---|---|---|
| White | #ffffff | rgb(255,255,255) | hsl(0°,0%,100%) |
| Black | #000000 | rgb(0,0,0) | hsl(0°,0%,0%) |
| Red | #ef4444 | rgb(239,68,68) | hsl(0°,84%,60%) |
| Blue | #3b82f6 | rgb(59,130,246) | hsl(217°,91%,60%) |
| Green | #22c55e | rgb(34,197,94) | hsl(142°,71%,45%) |
| Yellow | #eab308 | rgb(234,179,8) | hsl(45°,93%,47%) |
| Orange | #f97316 | rgb(249,115,22) | hsl(24°,95%,53%) |
| Purple | #a855f7 | rgb(168,85,247) | hsl(271°,91%,65%) |
Frequently Asked Questions
How do I convert HEX to RGB?
Split the 6-digit hex code into three pairs and convert each pair from hexadecimal to decimal. For example, #FF5733 becomes R:255, G:87, B:51. This converter does it instantly.
Is this color converter accurate?
Yes. It uses exact mathematical conversions between HEX, RGB, and HSL color spaces following web standards.
Does this converter work on mobile?
Yes. The Color Converter works on all devices with a live color preview.
Do I need to sign up to use this tool?
No. Completely free with no account needed.
What is the difference between RGB and HSL?
RGB defines a color by its red, green, and blue components — how the screen physically produces it. HSL defines a color by hue (the color on the wheel), saturation (intensity), and lightness (how light or dark). HSL is more intuitive for humans because you can adjust brightness without shifting the hue, which is why it is preferred in CSS for creating color variations.
Can I enter colors with transparency (alpha)?
This tool focuses on opaque color conversion between HEX, RGB, and HSL. If you need alpha transparency, append an alpha channel to your CSS value: rgba(59, 130, 246, 0.5) or hsla(217, 91%, 60%, 0.5). The underlying HEX/RGB/HSL values remain the same.