Color Converter (HEX / RGB / HSL)
Convert colors between HEX, RGB and HSL formats.
About the Color Converter (HEX / RGB / HSL)
Converts a color among HEX, RGB and HSL representations. Enter any HEX code and get the equivalent RGB and HSL values instantly.
How to use
Enter a HEX color (e.g. #3b82f6), then click Convert.
Worked example
#3b82f6 → rgb(59, 130, 246) → hsl(217°, 91%, 60%).
How to use this calculator
- Enter a color in HEX, RGB, or HSL format.
- Check the instant converted values in the other formats.
- Use the formula shown by the tool to understand how the conversion works.
- Compare your input and output carefully, especially channel ranges and symbols.
The formula explained
$$ \text{HEX} = \text{combine } R,G,B \text{ in base 16};\quad R = \text{HEX}_{1,2},\ G = \text{HEX}_{3,4},\ B = \text{HEX}_{5,6};\quad M = \max(R',G',B'),\ m = \min(R',G',B'),\ \Delta = M - m;\quad L = \frac{M+m}{2};\quad S = \begin{cases}0,& \Delta=0\\ \frac{\Delta}{1-|2L-1|},& \Delta\neq 0\end{cases} $$
- \(\text{HEX}\) = a color written in hexadecimal form such as #33A1FF
- \(R\) = the red channel value in RGB from 0 to 255
- \(G\) = the green channel value in RGB from 0 to 255
- \(B\) = the blue channel value in RGB from 0 to 255
- \(R'\) = red normalized to a 0 to 1 scale
- \(G'\) = green normalized to a 0 to 1 scale
- \(B'\) = blue normalized to a 0 to 1 scale
- \(M\) = the largest of the normalized red, green, and blue values
- \(m\) = the smallest of the normalized red, green, and blue values
- \(\text{Delta}\) = the difference between the largest and smallest normalized values
- \(L\) = lightness in HSL
- \(S\) = saturation in HSL
Step by step method
- Start with one known color format, such as a HEX code or RGB value.
- If you are converting from RGB to HSL, first normalize each RGB channel to a 0 to 1 scale.
- Find the largest and smallest normalized channel values, then compute the difference between them.
- Use the HSL rules to calculate lightness, saturation, and hue, or combine RGB values to form HEX.
Worked example
Here is a simple example converting a bright blue color from RGB to HEX and HSL.
- Take the RGB color \(rgb(51, 161, 255)\).
- Convert the channels to HEX by writing each value in two-digit hexadecimal: 51 becomes 33, 161 becomes A1, and 255 becomes FF.
- For HSL, the normalized values are 0.20, 0.63, and 1.00, so the lightness is \((1.00 + 0.20) / 2 = 0.60\).
Answer. The color is #33A1FF and its HSL lightness is 60 percent.
Tips and common mistakes
- HEX colors usually start with a # symbol, but some tools accept the value without it.
- RGB channel values should stay between 0 and 255.
- Do not confuse HSL lightness with brightness, they are related but not the same.
- If a conversion looks unexpected, check whether the input uses percentages, decimals, or whole numbers.
Frequently asked questions
What is HSL?+
Hue, Saturation, Lightness, an intuitive way to describe and adjust colors.
Do I need the # sign?+
No, it is optional; both 3b82f6 and #3b82f6 work.
More Tech Tools Tools
Explore related calculators in this category
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.
Color Namer
Find the closest named CSS color to any HEX value.
Color Palette Generator
Generate a harmonious color palette from one base color.
Color Picker
Pick a color and get its HEX, RGB and HSL values.
You Might Also Like
Popular tools from other categories
Capacitor Code Calculator
Decode a 3-digit ceramic capacitor code to capacitance.
Color Converter
Convert between HEX, RGB, and HSL color formats.
Color Shade Generator
Generate a palette of tints and shades from a base hex color. Great for design systems.
Random Color Generator
Generate a random color with HEX and RGB values.
Can't Find the Right Calculator?
Try our AI Math Solver, type any problem in plain English and get instant step-by-step solutions.