Color converter: HEX, RGB and HSL
Convert an opaque sRGB color between the hexadecimal, RGB and HSL notations supported by this tool. Processing takes place in your browser.
Enter a color in HEX, RGB or HSL format.
Three ways to write an sRGB color
- HEX
- A compact hexadecimal notation used in CSS and HTML. This tool accepts #RGB and #RRGGBB forms, such as #FF5733.
- RGB
- Red, green and blue channel values from 0 to 255, for example rgb(255, 87, 51).
- HSL
- Hue from 0° to 360°, saturation from 0% to 100%, and lightness from 0% to 100%. Adjusting one component can help create color variations.
Examples
- Pure red: #FF0000 → rgb(255, 0, 0) → hsl(0, 100%, 50%).
- Royal blue: #4169E1 → rgb(65, 105, 225) → approximately hsl(225, 73%, 57%).
- Light green: hsl(120, 80%, 70%) → #75F075 and rgb(117, 240, 117).
How the conversion works
- HEX to RGB: split the hexadecimal pairs for red, green and blue, then convert each pair to a decimal value.
- RGB to HEX: convert each decimal channel to two hexadecimal digits and join them after #.
- RGB and HSL: the converter applies the standard channel and hue calculations; displayed HSL values are rounded to whole numbers.
When to use each format
- HEX is compact and common in CSS, HTML and design tools.
- RGB names the red, green and blue channel values directly.
- HSL can be convenient when you want to adjust hue, saturation or lightness.
Supported values and limits
- The converter accepts opaque sRGB colors in short or long HEX, comma-separated rgb(), and comma-separated hsl() notation.
- Alpha transparency, RGBA, HSLA, modern space-separated CSS syntax, named colors and wide-gamut color spaces are not supported by this input.
- HSL output is rounded to whole degrees and percentages, so converting back can produce a nearby color rather than the exact original channel values.
- The color and its result stay in this browser; the page and its code are loaded from the website.
Frequently asked questions
What does the # sign mean in a HEX color?
It marks a hexadecimal color notation. The converter accepts the sign with a 3- or 6-digit sRGB value; the sign is not itself a color channel.
How can HSL make a color lighter or darker?
Keep hue and saturation steady, then raise or lower lightness. For example, changing hsl(240, 100%, 50%) to a higher lightness produces a lighter blue.
Can I enter a transparent color?
No. This converter handles opaque HEX, RGB and HSL values only; it does not accept alpha channels.