Hex Color Picker
Convert hexadecimal color codes into RGB and HSL formats with color channel breakdowns and brightness classification.
Run tool
The Hex Color Picker converts hexadecimal color codes into standard RGB and HSL values for web design and digital styling. You can type any valid three-character or six-character hex value with or without a leading hash symbol. For shorthand three-character inputs, each character doubles automatically so that values like #09c resolve to #0099cc before calculation. Leaving the input empty applies the default color code #ff5733. After you run the conversion, the results display both uppercase and lowercase six-digit hex notations alongside formatted RGB and HSL strings. The tool also provides separate numeric component breakdowns for red, green, blue, hue, saturation, and lightness, with HSL values rounded to the nearest whole integer. A brightness assessment checks whether the weighted color brightness exceeds the standard threshold of 128, helping you identify whether text placed on the color needs light or dark styling. If an invalid sequence is entered, the interface shows an error notice instead of raw data.
Instructions
- Enter a three-digit or six-digit hexadecimal color code in the Hex Color field, with or without the leading # prefix.
- Leave the color field blank if you want to inspect the default color #ff5733.
- Select Convert to process the color value.
- Review the generated RGB, HSL, and normalized hex values along with the individual color channels and lightness assessment.
Examples
- Entering #3498db converts the hex value to rgb(52, 152, 219) and hsl(204, 70%, 53%) with individual channels R: 52, G: 152, B: 219.
- Entering shorthand hex f00 expands to #ff0000, yielding rgb(255, 0, 0) and hsl(0, 100%, 50%) along with an active lightness classification.
FAQ
Can I enter shorthand three-character hex codes?
Yes. Three-character codes such as #abc are expanded to six characters (#aabbcc) before conversion.
Is the leading hash symbol required?
No. You can enter values with or without the leading # symbol, such as #1a2b3c or 1a2b3c.
What happens if I leave the Hex Color field empty?
When no color value is entered, the tool automatically uses the default color #ff5733.
How are HSL values rounded?
The calculated hue in degrees, saturation percentage, and lightness percentage are all rounded to whole numbers.