HEX to RGB & HSL Converter
Convert HEX color codes to RGB and HSL values in real time. Features live color preview, copyable CSS code, and instant validation.
About this hex to rgb & hsl converter
Convert six-digit HEX colors to RGB and rounded HSL values, preview the color, and copy CSS notation.
How this tool works
Read each pair of HEX digits as an integer from 0 to 255. Divide the RGB channels by 255, set M to their maximum, m to their minimum, and L = (M + m) / 2. For M = m, hue and saturation are zero. Otherwise, saturation uses (M − m) / (M + m) when L ≤ 0.5 and (M − m) / (2 − M − m) when L > 0.5; the largest channel determines the hue sector. Only the final hue in degrees and saturation/lightness percentages are rounded to integers.
- Enter #1B6654 in the HEX color field; the result updates immediately.
- Read rgb(27, 102, 84) and hsl(166, 58%, 25%).
- Use the Copy button beside RGB or HSL to copy that CSS value. Clipboard access depends on browser permissions.
Worked example
Scenario: Convert the six-digit brand color #1B6654 into CSS RGB and HSL.
Sample input:
Processing: The pairs 1B, 66 and 54 become 27, 102 and 84. Unrounded HSL is approximately 165.6°, 58.1395%, 25.2941%; round the final displayed components.
Illustrative output:
Limits and verification
Accepts exactly six hexadecimal digits, with an optional leading # and surrounding whitespace. Three-, four- and eight-digit forms, alpha, RGB/HSL input, CSS variables and color names are unsupported. RGB output preserves the three input bytes; rounded HSL can change a color when reused. The browser preview does not measure WCAG contrast or perform CMYK, ICC-profile or wide-gamut conversion. There is no file input or download.
Examples demonstrate an expected workflow; they do not prove every input or every branch of an external specification. Check important results with an independent source before using them for money, security, compliance, safety, or irreversible file changes.
Browser processing boundary
Tool input is processed by code running in the browser and is not intentionally sent to a CZOA processing API. The page can still request ordinary site assets, analytics, or advertising when those services are enabled. Browser extensions and managed-device software remain outside this tool's control.
Relevant references
These references govern or help explain the format, protocol, or calculation used here. Listing a reference does not claim certification or complete implementation of every optional feature.
Content owner: CZOA Tools · Review methodology
How to use it
- Enter #1B6654 in the HEX color field; the result updates immediately.
- Read rgb(27, 102, 84) and hsl(166, 58%, 25%).
- Use the Copy button beside RGB or HSL to copy that CSS value. Clipboard access depends on browser permissions.
Frequently asked questions
Which HEX notation can I enter?+
Use six hexadecimal digits, optionally preceded by #, such as #1B6654 or 1b6654. Surrounding whitespace is trimmed. A # inside or after the digits, internal spaces, shorthand, alpha and color names are rejected.
Why can the copied HSL color differ from the HEX input?+
RGB preserves the exact three channel bytes. HSL hue, saturation and lightness are rounded to whole degrees and percentages only at output. Reusing those rounded values can change RGB channels; no exact HSL round trip is promised.
Can I enter RGB, HSL or CSS variables, or calculate contrast?+
The input accepts HEX only and generates RGB and HSL together. RGB/HSL text, CSS variables, alpha and CMYK are unsupported. The preview shows the converted color; it does not calculate foreground/background contrast or certify WCAG accessibility.
What do the two Copy buttons copy?+
The RGB button copies rgb(27, 102, 84) for #1B6654; the HSL button copies hsl(166, 58%, 25%). If clipboard access is denied, an error is shown and you can select the displayed code manually. No image or color-profile file is generated.