HSL Color Converter
Enter any color in hex, rgb(), or hsl() notation and get all three formats at once with a swatch.
How it works
- 1
Enter a color in any notation — hex (#rrggbb), rgb(), or hsl() — and the result updates immediately.
- 2
See the color swatch alongside all three notations so you can compare how each format represents the same shade.
- 3
Copy whichever value you need and move on. Everything runs locally in your browser.
Questions
What notations can I enter?
Hex (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba() with integers or percentages, and hsl()/hsla() — comma-separated and space-separated syntax both work.
How does HSL relate to hex and RGB?
HSL describes a color by hue (the color wheel angle), saturation (intensity), and lightness (brightness). It maps to the same underlying color as the matching RGB or hex value.
Why might the round-tripped hex differ by one digit?
Converting to HSL uses floating-point arithmetic and rounding, so the final value can be off by one in the last byte. The visible difference is imperceptible.
Is my data processed on a server?
No. All parsing and conversion happens inside your browser — no color data is sent anywhere.
More developer tools
JSON Formatter
Paste compact or messy JSON and get it back neatly indented with your chosen spacing.
JSON Minifier
Remove all whitespace and line breaks from a JSON document to shrink it as small as possible.
JSON Validator
Check whether a JSON string is well-formed, and see the exact line and column of any syntax error.
JSON Beautifier
Reformat JSON with sorted keys and readable indentation for easier reading and diffing.
JSON Tree Viewer
Explore a JSON document as an interactive collapsible tree — expand and collapse any node.
XML Formatter
Pretty-print XML with configurable indentation, preserving attributes, comments, and tag order.
XML Validator
Check XML for well-formedness and report every error with its line and column number.
YAML Formatter
Normalize and re-indent YAML, or convert it to JSON, with a configurable indent width.