How to use Color Converter
- Paste a HEX, RGB, RGBA, HSL, or HSLA color, or use the native color picker.
- Check the live swatch and read the equivalent HEX, RGB, and HSL values.
- Use an individual copy button for the format you need, or Reset to clear the color.
A closer look
HEX and RGB describe red, green, and blue channels; HSL expresses hue, saturation, and lightness. Thus #ff0000, rgb(255, 0, 0), and hsl(0, 100%, 50%) all describe red. Short HEX forms expand each digit, and four- or eight-digit HEX includes opacity. RGBA and HSLA accept alpha between 0 and 1 or a percentage. The converter uses 8-bit sRGB channels, so fractional channels are rounded to the nearest byte and HSL results are rounded for readability.
A practical example
Enter #FF0000 to see RGB 255, 0, 0 and HSL 0, 100%, 50%. These describe the same red in different sRGB notations.
A useful tip
Use comma-separated rgb() and hsl() functions. CSS named colors, display-p3(), oklch(), and the newer space/slash function syntax are outside this tool’s supported input formats. The picker sets full opacity.
Good questions. Simple answers.
Does converting preserve transparency?
Alpha from RGBA, HSLA, and alpha HEX is included in the outputs. HEX alpha is limited to 256 levels, so it may be slightly rounded.
Why does a transparent swatch look lighter?
Its color is blended with the page background. The output values still describe the underlying color and opacity.
Explore all developer tools for related tasks and category-specific guidance, or read how Toolzafi handles your data.