How it works
Clamp each channel to 0-255, round it, then write two hexadecimal digits per channel behind #. HSL is derived from the RGB ratios: hue from the dominant channel, saturation from the distance between max and min, lightness from their average.
- HEX accepts 3 or 6 digits; values are clamped to 0–255.
Why it matters
Design tools export different formats and CSS expects specific ones. Converting by hand invites rounding mistakes, and the same colour written three ways is easy to verify once you see all representations side by side.
A worked example
rgb(99, 91, 255) is #635BFF and hsl(244, 100%, 68%). The HEX form is what CSS authors paste most often; HSL is easier to darken or desaturate without guessing new channels.
Common mistakes
- Assuming the same HEX looks identical everywhere without colour management.
- Forgetting that three-digit HEX expands each nibble twice.
- Editing RGB channels when you meant to adjust lightness.
Practical tips
Design in HSL when you need systematic tints and shades: keep hue and saturation, vary lightness in steps. Store the HEX for output, but keep HSL notes in the design file for future adjustments.
How to use it
- Open the tool. Everything runs in your browser tab.
- Paste or type your input, then choose the action you need.
- Check the result and copy it with one click.
Common questions
Why is my HEX value different in another tool?
Values are clamped to 0-255 and rounded, then written as uppercase HEX. Some tools keep lowercase or invalid input.
What is HSL?
An alternative representation: hue in degrees, saturation and lightness in percent. It is useful for adjusting colours.
Does it check contrast?
No. This converts colour formats; contrast checking is a different tool.
Is this tool really free?
Yes. There is no account, no paywall and no usage limit. Tools App is funded by aumenso, the studio behind it.
Is anything I enter uploaded?
No. The tool runs in your browser tab; what you enter is never sent to us and never stored.