Color Converter
Convert between HEX, RGB, and HSL color formats.
About Color Converter
HEX uses 6 hexadecimal digits for Red, Green, Blue. RGB uses 0-255. HSL uses Hue (0-360), Saturation, Lightness.
$$\text{\#RRGGBB} \leftrightarrow RGB(r,g,b)$$
How to use this calculator
- Enter a color in one supported format, such as \(\text{\#3366FF}\) or \(RGB(51,102,255)\).
- Choose the format you want to convert to, such as \(RGB\) or \(HSL\).
- Read the converted values and compare them with the original color.
- If needed, adjust the input and convert again until you get the exact shade you want.
The formula explained
This converter translates a color between the hexadecimal form \(\text{\#RRGGBB}\) and the red, green, blue form \(RGB(r,g,b)\). It also uses the color model relationships that connect \(RGB\) and \(HSL\), so the same color can be written in different ways.
- R = the red component, usually from \(0\) to \(255\)
- G = the green component, usually from \(0\) to \(255\)
- B = the blue component, usually from \(0\) to \(255\)
- H = the hue, measured in degrees around the color wheel
- S = the saturation, which shows how vivid the color is
- L = the lightness, which shows how bright or dark the color is
Step by step method
- Read the starting color format, for example \(\text{\#3366FF}\).
- Split the hex value into three pairs, \(33\), \(66\), and \(FF\), then convert each pair from base \(16\) to decimal to get \(51\), \(102\), and \(255\).
- Use the decimal values as \(RGB(51,102,255)\), or convert them into \(HSL\) if needed by the tool.
- Check that the converted color matches the original shade, then copy the result.
Worked example
Problem. Convert \(\text{\#3366FF}\) to \(RGB\).
- Break \(\text{\#3366FF}\) into \(33\), \(66\), and \(FF\).
- Convert each pair to decimal, so \(33_{16} = 51\), \(66_{16} = 102\), and \(FF_{16} = 255\).
- Write the result as \(RGB(51,102,255)\).
Answer. \(RGB(51,102,255)\)
Tips and common mistakes
- Hex color pairs always come in the order red, green, blue, so do not mix the positions.
- If two colors look similar but not identical, check each component carefully, because a small change in \(R\), \(G\), or \(B\) can change the final shade.
Frequently asked questions
How do I convert a HEX color to RGB in this tool?+
Enter the HEX code, including the # if you have it, and the tool splits it into the red, green, and blue channel values. For example, #1E90FF becomes RGB(30, 144, 255).
How does the RGB to HEX conversion work?+
The tool converts each RGB channel, from 0 to 255, into a two digit hexadecimal value and combines them into one six digit HEX code. For example, RGB(255, 0, 0) becomes #FF0000.
Can this converter handle shorthand HEX colors like #FFF?+
Yes, shorthand HEX colors are expanded first, so #FFF is treated as #FFFFFF. That means it represents white, with all RGB channels at 255.
What is the difference between HEX, RGB, and HSL?+
HEX and RGB describe the same color using different notations, while HSL describes it by hue, saturation, and lightness. HSL is often easier for adjusting a color visually, while HEX and RGB are common for web and screen values.
Why might a color look different after converting between formats?+
The numeric color itself does not change, but differences can happen if you compare colors on different devices, in different profiles, or if the original value used transparency, which HEX, RGB, and HSL here do not show. If you start with an exact color value, the conversion should round back to the same visible color.
More Unit Converters Tools
Explore related calculators in this category
Acceleration Converter
Convert between acceleration units. Get quick, accurate results with this free online converter, including formulas and worked examples.
Angle Converter
Convert between degrees, radians, gradians, and turns.
Area Converter
Convert between square meters, acres, hectares, square feet, etc.
Aspect Ratio Calculator
Calculate and convert display aspect ratios.
You Might Also Like
Popular tools from other categories
Accessible Color Pair Finder
Check if a text/background pair meets WCAG and suggest a fix. Free tool with instant calculations, the underlying formula, and an easy-to-follow example.
Capacitor Code Calculator
Decode a 3-digit ceramic capacitor code to capacitance.
Color Converter (HEX / RGB / HSL)
Convert colors between HEX, RGB and HSL formats.
Color Namer
Find the closest named CSS color to any HEX value.
Can't Find the Right Calculator?
Try our AI Math Solver, type any problem in plain English and get instant step-by-step solutions.