HEX / RGB / HSL Converter
Convert color codes instantly between every format designers and developers actually use.
#6366F1
rgb(99, 102, 241)
Color Formats
Complementary Color
Hex and RGB are the same color wearing different clothes. `#FF5733` and `rgb(255, 87, 51)` describe an identical pixel — one written in base 16 for compactness, the other in decimal for readability. Understanding that they are notations rather than formats is what makes color work in CSS click. This converter moves between hex, RGB, and HSL instantly, and the third one is where it gets genuinely useful: HSL separates a color into hue, saturation, and lightness, which means you can build a coherent palette by adjusting one number instead of guessing at hex codes until something looks right.
How the converter works
Enter a color in any supported notation — hex with or without the leading hash, RGB values, or HSL — and the converter produces the others immediately along with a live preview. Hex to RGB is a base conversion: each pair of hex digits becomes one decimal value from 0 to 255. HSL requires more work, since it maps the color into a cylindrical space where hue is an angle around a wheel, which is why it is far more intuitive to adjust by hand.
The conversions
Hex → RGB
R = parseInt(hex.slice(0,2), 16)
G = parseInt(hex.slice(2,4), 16)
B = parseInt(hex.slice(4,6), 16)
RGB → Hex
hex = '#' + each value.toString(16).padStart(2,'0')
Example:
#FF5733 → FF = 255, 57 = 87, 33 = 51
→ rgb(255, 87, 51)Each hex pair covers 00 to FF, which is 0 to 255 in decimal — 256 possible values per channel, and 256³ ≈ 16.7 million colors in total. That is the origin of "16.7 million colors" in display specifications. The three-digit shorthand `#F53` expands by doubling each digit into `#FF5533`, which is why it can only express 4,096 colors and why it fails for most real palette values. Uppercase and lowercase hex are identical; the choice is purely stylistic.
What to know about color notation
- 1HSL is the notation to reach for when designing rather than copying. Hue is an angle from 0 to 360 on the color wheel, so a complementary color is simply hue plus 180. Building a palette in HSL means changing one number; building it in hex means guessing. Browsers accept HSL directly in CSS, so there is no conversion step needed.
- 2Use 8-digit hex for transparency. `#FF5733CC` appends an alpha channel where CC is roughly 80% opacity. This is supported in every modern browser and is often cleaner than switching to `rgba()` notation midway through a stylesheet.
- 3Hex is not perceptually uniform, which is why palettes built by nudging hex values look inconsistent. `#808080` is not perceptually half as bright as `#FFFFFF` — human vision responds non-linearly to light. This is why two colors with the same hex "distance" can look wildly different in contrast.
- 4Always check contrast, not just aesthetics. WCAG requires a 4.5:1 ratio between text and background for normal text. Light gray on white is a recurring accessibility failure that passes visual inspection and fails real users, particularly on lower-quality displays or in daylight.
- 5Modern CSS supports color spaces beyond RGB. `oklch()` is perceptually uniform, meaning equal numeric changes produce equal perceived changes — which makes generating a set of shades that actually look evenly spaced possible for the first time. Browser support is now broad enough to use it in production.
Frequently asked questions
What is the difference between hex and RGB?
None, in terms of the color produced — they are two notations for the same values. Hex writes each channel as two base-16 digits, RGB writes them as decimal numbers from 0 to 255. `#FF5733` and `rgb(255, 87, 51)` render identically. Hex is more compact and dominates design tools; RGB is easier to manipulate programmatically since the values are already numbers.
What does the three-digit hex shorthand mean?
It expands by doubling each digit: `#F53` becomes `#FF5533`. This makes it a convenient shorthand for a small set of colors, but it can only express 4,096 combinations rather than 16.7 million, so most real palette colors have no three-digit form. It is fine for quick prototypes and unsuitable for a designed palette.
How do I add transparency to a hex color?
Append two more digits for the alpha channel: `#FF5733CC` where CC is about 80% opacity. The alpha runs from 00 (fully transparent) to FF (fully opaque). Every modern browser supports this. The alternative is `rgba(255, 87, 51, 0.8)`, which is more readable but requires switching notation mid-stylesheet.
Why should I use HSL instead of hex?
Because HSL is designed for humans to adjust. Hue is a position on the color wheel, saturation is intensity, lightness is brightness — so making a color darker means lowering one number rather than recalculating three. Generating a coherent palette, finding complementary colors, or producing a set of tints all become straightforward operations instead of trial and error.
Why do my colors look different on other screens?
Because the same hex value is interpreted differently by different displays. Screens vary in color gamut, calibration, and default profile, so `#FF5733` on an uncalibrated laptop genuinely is not the color it is on a calibrated monitor. This is why print work uses CMYK with color profiles, and why brand guidelines specify colors in multiple systems rather than trusting a single hex code.