HEX to RGB Converter
Type a color in any format — HEX, RGB or HSL — and the other two update live, with a preview swatch and one-click copy for your CSS.
How the color formats relate
HEX and RGB are the same numbers in different clothing: #ff6600 is rgb(255, 102, 0), just written in hexadecimal. HSL describes the same color by hue (0–360° on the color wheel), saturation and lightness — which is why designers reach for it when deriving shades.
Enter any format
Paste #2563eb, rgb(37, 99, 235) or hsl(217, 84%, 53%) — with or without the wrapper.
Or pick visually
The native color picker under the swatch sets all three values at once.
Copy for CSS
Each format has its own copy button, ready to paste into stylesheets or design tools.
A practical trick: shades via HSL
Need a hover state or a darker border of your brand color? Convert it to HSL, keep hue and saturation, and move only the lightness: hsl(217, 84%, 53%) becomes a credible hover at 45% and a subtle background at 95%. That beats eyeballing darker hex codes and keeps a palette consistent. The converter shows all three formats simultaneously, so you can think in HSL and ship in HEX.
Frequently asked questions
How do I convert HEX to RGB?
A hex code is three byte values in hexadecimal: #ff6600 means red ff (255), green 66 (102), blue 00 (0) — so rgb(255, 102, 0). Paste any hex code and the tool converts it live.
What does a 3-digit hex code like #f60 mean?
It's shorthand where each digit is doubled: #f60 expands to #ff6600. The converter accepts both forms, with or without the # sign.
When should I use HSL instead of RGB?
HSL (hue, saturation, lightness) is easier to reason about for design: keep the hue, lower the lightness, and you get a darker shade of the same color — handy for hover states and palettes.
Which format should I use in CSS?
All three work in every modern browser. HEX is the most compact and common, RGB is convenient when adding transparency via rgba(), and HSL shines when deriving color variations systematically.