Why convert at all
Design tools hand you hex; CSS often wants rgb() because you need an alpha channel, or hsl() because you want to reason about hue shifts. Converting by hand is error-prone — this tool does the arithmetic and shows all three notations at once.
How hex maps to RGB
A six-digit hex code is three byte pairs: #6d28d9 is 6d, 28, d9 — 109, 40, 217. Shorthand #fff doubles each digit to ff, ff, ff. The converter accepts both forms and ignores a leading #.
When to prefer HSL
- Building hover states: keep hue and saturation, drop lightness by 8%
- Generating palettes: rotate hue in fixed steps
- Dark mode: flip lightness while keeping the brand hue
Alpha and modern syntax
Modern CSS accepts rgb(109 40 217 / 0.5) and hsl(258 76% 50% / 0.5) without commas. Older codebases still use rgba(). Both are valid; pick one convention per project.
Frequently Asked Questions
Does the converter handle 3-digit hex?
Yes — #abc expands to #aabbcc automatically.
What about 8-digit hex with alpha?
The tool reads the six colour digits; paste the alpha separately into rgba().
Is HSL the same as HSB?
No. HSL's lightness differs from HSB/HSV's brightness; converting HSB values directly will not match.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.