How it works
Enter a six-digit hex color with or without a leading #. The output is suitable for common CSS usage.
Hex channels → RGB; RGB → HSL.
Debugging scenario
Convert a design token from three- or six-digit hex, copy the RGB and HSL results into a test stylesheet and compare the rendered color in the target browser. Check contrast and interaction states separately because equivalent color notation says nothing about accessibility.
How to interpret the result
The outputs represent an opaque sRGB-style color. HSL is rounded for readable CSS and a round trip can differ slightly in displayed numbers while rendering equivalently. Alpha, wide-gamut profiles, color management and contrast against a background are outside this conversion.
Input reference
- Hex color
- Example default: Sample input included
Common mistakes
- Pasting secrets, credentials, customer records or other production data into a browser tool or shareable URL.
- Treating a converted value as proof of color contrast, display consistency or wide-gamut equivalence.
- Treating a convenient preview as validation by the target runtime, parser, database or security control.
Before using the result
- Reduce the input to a synthetic example that still reproduces the behavior.
- Render in target browsers and run contrast checks for every foreground, background and state pair.
- Add the accepted input and expected output to the project regression tests before release.
Questions to check before production use
Can I use shorthand hex?
Yes. Three-digit colors are expanded before conversion.
Does this change the color profile?
It converts numeric sRGB-style values and does not manage display color profiles.
Independent developer utility. Review output before using it in production.