What is RGB / HEX / HSL Converter?
RGB, HEX, and HSL Converter translates common CSS color representations and previews the normalized color. It accepts three- or six-digit HEX, rgb(), or hsl() text and returns uppercase six-digit HEX, integer RGB, and rounded HSL for design annotations, theme variables, and stylesheet maintenance. Common workflows include the following. Convert a HEX value from a design into CSS RGB or HSL. Standardize colors used in theme tokens and component styles. Preview the practical color represented by an adjusted HSL value. The page also documents input boundaries, output behavior, and practical cautions so you can review the result before putting it into an application, configuration, test, or production workflow.
When to use it
- Convert a HEX value from a design into CSS RGB or HSL.
- Standardize colors used in theme tokens and component styles.
- Preview the practical color represented by an adjusted HSL value.
How to use it
- Enter a HEX, RGB, or HSL color.
- Parse and convert it.
- Review the swatch and all three normalized values.
- Load one of the realistic examples first to verify the selected options and processing direction before replacing it with your own data.
- Review the output, status message, and documented limits; copy, download, or continue only after the result matches your expectation.
Runnable examples
The “Example 1” and “Example 2” buttons load the matching inputs. They cover different structures, directions, or boundaries and can be run directly in the workspace.
Example 1
#087f74Example 2
hsl(224, 51%, 41%)Input rules
- Supported forms are #RGB, #RRGGBB, rgb(r,g,b), and hsl(h,s%,l%).
- Named colors are unsupported, and alpha from rgba or hsla is not retained.
- RGB, saturation, and lightness are clamped while hue wraps around 360 degrees.
- Text input is counted before processing and is limited to 200 characters on this page; file modes apply the separate file limit shown in the workspace.
- Alpha is not retained.
Output rules
- HEX expands to uppercase six-digit notation.
- RGB uses integer channels from 0 to 255 and HSL is rounded to integers.
- Converting rounded HSL again may introduce a very small difference from an original decimal value.
- Output reflects only the current input, direction, and options; rerun after changing a mode or value instead of treating an earlier result as current.
- HSL output uses integer rounding.
Limitations and cautions
- Alpha is not retained.
- HSL output uses integer rounding.
- This is not a color-management or wide-gamut conversion system.
How your data is handled
Parsing, mathematical conversion, and swatch preview occur in the browser without sampling the screen, uploading colors, or calling a design service.