How to use the color code converter
- Choose the format you already have: HEX, RGB, or HSL. The input fields change to match that representation.
- Enter every channel. HEX accepts three or six digits; RGB accepts whole channels from 0 through 255; HSL accepts any numeric hue and percentages from 0 through 100.
- Choose the destination format and select Convert color. The converted code and a swatch appear together so you can check both the text and the visible color.
- Copy result for CSS or design notes. Swap formats makes the converted representation editable while preserving the same color. Editing any field clears the old result until you convert again.
HEX, RGB, and HSL describe the same web color
HEX and RGB both encode the red, green, and blue light channels. A six-digit HEX code stores two hexadecimal digits per channel: #3366FF means red 0x33 = 51, green 0x66 = 102, and blue 0xFF = 255. The three-digit shorthand #0F8 expands by repeating each digit, producing #00FF88. The converter always returns a six-digit uppercase HEX value so copied output is consistent.
HSL represents hue, saturation, and lightness. Hue is an angle around the color wheel, saturation describes how vivid or gray the color is, and lightness runs from black at 0% through the chosen color around 50% to white at 100%. HSL is often easier when you want to adjust a family of related colors without thinking directly in red, green, and blue channels.
Conversion direction and formulas
For HEX to RGB, each two-digit hexadecimal pair becomes an integer from 0 to 255. RGB to HEX performs the reverse conversion and pads single hexadecimal digits with a leading zero. RGB to HSL first scales each channel to 0–1, finds the largest and smallest channel, then derives lightness, saturation, and the hue sector. HSL to RGB calculates chroma from saturation and lightness, places that chroma in the hue sector, and adds the lightness offset before rounding each final RGB channel.
All six practical directions are supported in the same tool: HEX to RGB, RGB to HEX, HEX to HSL, HSL to HEX, RGB to HSL, and HSL to RGB. Converting between HEX and HSL passes through the equivalent RGB channels internally. The result still represents the same color within the integer-channel limits used by CSS RGB and six-digit HEX.
Ranges, hue wrapping, and precision
- HEX input is exactly three or six hexadecimal digits, optionally beginning with #. Alpha transparency, color names, eight-digit HEX, CSS variables, and arbitrary CSS expressions are outside this page.
- RGB channels are integers from 0 to 255. Decimal, negative, and out-of-range channel values are rejected instead of silently clipped.
- Saturation and lightness accept decimal values from 0% to 100%. Hue is periodic: 360° equals 0°, 420° equals 60°, and −120° equals 240°.
- RGB and HEX output use integers. HSL output shows at most two decimal places and removes trailing zeros. Achromatic black, white, and gray use hue 0° because hue has no visible effect when saturation is 0%.
- The swatch is a visual check, not a calibrated proof. Displays, browser color management, ambient light, and accessibility contrast requirements can change how a color is perceived.
Practical uses and output
- Translate a designer’s HEX token into RGB for code, documentation, or software that exposes separate channels.
- Convert RGB to HSL before tuning hue, saturation, or lightness for a related hover, border, or background color.
- Compare a pasted value with its swatch before copying. The preview uses the calculated six-digit HEX value locally and sends no color input to analytics.
- Copying returns one destination value such as rgb(51, 102, 255) or hsl(225deg, 100%, 60%). This tool does not build palettes, extract colors from images, or provide CMYK print profiles.
HEX, RGB, and HSL conversion directions
Choose the pair that matches the code you have and the code you need. Each direction below includes the full format names, the conversion rule, and an input-to-result example.
HEX hexadecimal to RGB red, green, blue
Split a six-digit HEX code into red, green, and blue pairs, then convert each hexadecimal pair to a base-10 integer. Example: #3366FF becomes 0x33 = 51, 0x66 = 102, and 0xFF = 255, so the result is rgb(51, 102, 255). A three-digit value such as #0F8 first expands to #00FF88.
RGB red, green, blue to HEX hexadecimal
Convert each integer channel from 0–255 to two hexadecimal digits and join them after #. Example: rgb(255, 87, 51) becomes FF, 57, and 33, producing #FF5733. A channel below 16 receives a leading zero.
HEX hexadecimal to HSL hue, saturation, lightness
Decode HEX to RGB first, normalize the channels to 0–1, and calculate hue, saturation, and lightness from the maximum, minimum, and channel difference. Example: #3366FF converts to hsl(225deg, 100%, 60%).
HSL hue, saturation, lightness to HEX hexadecimal
Use hue to select the color-wheel sector, combine saturation and lightness into RGB channels, round those channels to integers, then encode them as HEX. Example: hsl(60deg, 100%, 50%) converts to #FFFF00. A hue of 420° gives the same result because hue repeats every 360°.
RGB red, green, blue to HSL hue, saturation, lightness
Normalize the RGB channels, find their maximum and minimum, use their midpoint for lightness, and use the difference for saturation and hue. Example: rgb(128, 128, 128) converts to about hsl(0deg, 0%, 50.2%); with zero saturation, hue does not change the visible gray.
HSL hue, saturation, lightness to RGB red, green, blue
Calculate chroma from saturation and lightness, place it in the hue sector, and add the lightness offset before scaling to 0–255. Example: hsl(240deg, 100%, 50%) converts to rgb(0, 0, 255). Final RGB channels are rounded to whole numbers.
Worked conversion examples
Example 1: HEX to RGB and HSL
Enter #3366FF as HEX. HEX to RGB returns rgb(51, 102, 255). Change the destination to HSL after the successful conversion and it updates immediately to hsl(225deg, 100%, 60%). The swatch remains the same blue because only the notation changed.
Example 2: HSL hue wrapping to HEX
Choose HSL and enter H = 420, S = 100, and L = 50. Because hue repeats every 360°, 420° is the same point as 60°. HSL to HEX returns #FFFF00 and HSL to RGB returns rgb(255, 255, 0), both representing yellow.
Frequently asked questions
Can I enter #RGB shorthand?
Yes. Three-digit HEX expands by repeating each digit, so #0F8 becomes #00FF88. Four- and eight-digit alpha forms are not supported.
Why does gray have hue 0°?
When saturation is 0%, every hue produces the same gray. The conversion uses 0° as a stable conventional value; it does not imply that the gray is red.
Why did changing a format clear or update the result?
Before the first successful Convert, and after any field edit, format changes keep the result blank. After a successful Convert, changing only a format updates immediately because the confirmed color has not changed.
Does converting back always reproduce my HSL decimals?
It reproduces the color through integer RGB channels. Some HSL decimals map to the same integer RGB color, so a round trip can return slightly different HSL numbers while the six-digit HEX and visible color stay equivalent.
Can this replace print color management or a contrast checker?
No. It covers browser-oriented HEX, RGB, and HSL notation only. CMYK profiles, spot colors, display calibration, palette generation, and WCAG contrast evaluation require separate tools and context.