HEX to RGB and HSL Color Converter
Convert 3- or 6-digit HEX, rgb(r, g, b) and hsl(h, s%, l%) values. Copy equivalent codes and preview the color.
This tool processes its main input in your browser and does not send it to an external API. Fonts and interface assets may load from external providers.
HEX to RGB and HSL Color Converter
Convert supported HEX, RGB and HSL color values into the other two formats. The result includes copyable codes and a browser color preview for CSS, tokens and prototypes.
The converter accepts 3- or 6-digit HEX, comma-separated rgb() channels and hsl() values without alpha. A numeric conversion does not change monitor calibration or color profiles; check important brand colors and text contrast in context.
When is it useful?
- Converting a HEX value from a design file into CSS RGB and HSL values.
- Checking the equivalent code before adding a color to a design token.
How to use it
- Enter a 3- or 6-digit HEX value, an rgb() triplet, or an hsl() value.
- Review the normalized HEX, RGB and HSL outputs and the color preview.
- Copy the format your CSS or design system expects; test contrast separately.
Example
Input: #336699
Output: rgb(51, 102, 153) · hsl(210, 50%, 40%)
Who is it for?
- UI and web designers
- CSS developers
- Teams working with brand palettes
Privacy and limitations
Color conversion is calculated in the browser and the input is not sent to an API.
Frequently asked questions
Do HEX and RGB represent the same color?
Equivalent channel values describe the same color in the display model, though profiles and screen calibration can affect appearance.
Why use HSL?
It separates hue, saturation and lightness, which can make design adjustments more intuitive.
Does it convert alpha transparency?
No. This converter accepts opaque HEX, RGB and HSL values and does not parse alpha channels.
Does conversion guarantee accessible contrast?
No. Conversion changes representation only. Test foreground and background contrast separately.