Color Converter (HEX / RGB / HSL)
Enter a color in any format — HEX, RGB or HSL — or use the color picker, and instantly get the other two formats plus a live preview, ready to copy into your CSS.
How to use
Type a value like `#3b82f6`, `rgb(59,130,246)` or `hsl(217,91%,60%)`, or click the swatch to pick visually. All three representations update together, each with a copy button.
HEX and RGB describe a color by red/green/blue intensity; HSL describes it by hue, saturation and lightness, which is often easier when you want to nudge a shade lighter or more muted. Having all three makes it easy to grab whichever your tool or codebase expects.
FAQ
How do I convert HEX to RGB?
Split the six hex digits into three pairs and read each as a base-16 number: `#3b82f6` → 0x3b=59, 0x82=130, 0xf6=246 → rgb(59, 130, 246). Paste any hex here and the RGB (and HSL) appear instantly.
What's the difference between RGB and HSL?
They describe the same colors differently. RGB mixes red, green and blue light (how screens work); HSL uses hue (position on the color wheel), saturation (how vivid) and lightness (how bright) — which is more intuitive for adjusting a color by hand.
Does it support 3-digit shorthand hex?
Yes — `#f53` is expanded to `#ff5533` automatically, following the CSS shorthand rule where each digit is doubled.
Is alpha (transparency) supported?
This converter works with solid colors (HEX/RGB/HSL). Alpha channels (rgba/hsla) are read but the transparency value isn't carried through — the tool focuses on the core color conversion.