Convert colors between HEX, RGB, HSL formats with complementary color and contrast info.
Enter a color in any common format — HEX (#3498db), RGB (rgb(52, 152, 219)), or HSL (hsl(204, 70%, 53%)) — and this tool instantly converts it to all the others, with a live swatch so you can see exactly what you're working with. It handles 3-digit shorthand hex, alpha channels (RGBA/HSLA), and percentage vs 0-255 RGB notation. Everything is computed in your browser, so it's a fast reference while coding CSS or building a palette.
150+ Free Tools No Signup Required JSON / CSV / Excel 30 Uses / Day
Quick answer
Enter a color in any common format — HEX (#3498db), RGB (rgb(52, 152, 219)), or HSL (hsl(204, 70%, 53%)) — and this tool instantly converts it to all the others, with a live swatch so you can see exactly what you're working with. It handles 3-digit shorthand hex, alpha channels (RGBA/HSLA), and percentage vs 0-255 RGB notation. Everything is computed in your browser, so it's a fast reference while coding CSS or building a palette.
What is Color Code Converter?
A color converter translates a single color between the notations web and design tools use: hexadecimal (HEX), red-green-blue (RGB/RGBA), and hue-saturation-lightness (HSL/HSLA). Each format describes the same color in the sRGB color space but suits different tasks — HEX is compact for CSS, RGB maps directly to how screens emit light, and HSL makes it intuitive to adjust brightness or find complementary hues. This tool keeps all three in sync so you never have to convert by hand.
How to use Color Code Converter
1
Type a color in any format
Paste a HEX like #ff6600, an RGB value like rgb(255, 102, 0), or an HSL value like hsl(24, 100%, 50%). The tool recognises the format automatically.
2
See every equivalent instantly
The other notations update in real time along with a live color swatch, so you can confirm the conversion is the color you expected.
3
Adjust with HSL when tuning
Use the HSL representation to nudge lightness for a hover state or shift the hue for a related accent color, then read back the HEX for your stylesheet.
4
Copy the format you need
Copy the HEX for CSS, the RGBA for a semi-transparent overlay, or the HSL for a design token — one click each.
Try it when you need to…
Try it when your CSS needs an rgba() for opacity but the brand guide only gives you a HEX code
Try it when a designer hands you HSL values and your codebase uses HEX variables
Try it when you need to build a lighter or darker shade of an existing color for a hover state
Use cases
Converting a brand HEX code from a style guide into RGBA so you can add transparency to an overlay
Turning a designer's HSL values into HEX for a CSS variable
Generating hover and active states by lowering HSL lightness on a base color
Matching a color picked from a screenshot (RGB) to the nearest HEX for your theme
Building an accessible palette by comparing lightness values across shades
Key features
✓Two-way conversion between HEX, RGB/RGBA, and HSL/HSLA
✓Live color swatch preview updates as you type
✓Supports 3-digit shorthand hex (#f60) and full 6-digit hex
✓Handles alpha channels for transparency (8-digit hex, RGBA, HSLA)
✓Client-side only — no upload, works offline once loaded
Tips & best practices
HSL is the format to reach for when building color variations: keep the same hue and saturation and only change lightness to get a consistent set of tints and shades, which looks far more harmonious than eyeballing HEX values.
3-digit hex is just shorthand where each digit is doubled — #f60 expands to #ff6600, not #f06000. It only works when both nibbles of each channel are identical, so #ff6612 has no 3-digit form.
8-digit hex encodes alpha as the last two characters: #3498db80 is roughly 50% opacity. Note that alpha in hex is 00-FF (0-255), while CSS RGBA/HSLA alpha is a 0-1 decimal — 80 hex ≈ 0.5.
HEX and RGB describe the same sRGB values, so conversion between them is exact and lossless. HEX/RGB to HSL rounds, so round-tripping a color through HSL and back can shift it by one unit.
Frequently asked questions
All three describe colors in the sRGB space but in different terms. HEX is a base-16 encoding of the red, green, and blue channels (#RRGGBB) and is compact for CSS. RGB states those same three channels as decimal numbers (0-255). HSL restructures the color into hue (the angle on the color wheel, 0-360), saturation (intensity, 0-100%), and lightness (0-100%), which is more intuitive for adjusting brightness or picking related colors.
Each of the three digits is duplicated: #abc becomes #aabbcc, and #f60 becomes #ff6600. This shorthand only represents colors where both hex digits of each channel are equal, so it can express 4,096 colors versus the full 16.7 million of 6-digit hex.
Use 8-digit hex, where the final two characters are the alpha channel from 00 (fully transparent) to FF (fully opaque). For example #3498dbCC is about 80% opaque. Alternatively convert to rgba() or hsla() and use a 0-1 decimal alpha, which is more widely supported in older browsers.
Yes. HEX is simply a hexadecimal representation of the same 0-255 RGB channel values, so the two are mathematically identical and converting back and forth never changes the color. Conversions involving HSL, however, require rounding, so a round trip through HSL may shift a channel by one unit.
CSS accepts both notations: rgb(255, 0, 0) and rgb(100%, 0%, 0%) describe the same red. The 0-255 form maps to the 8 bits used per channel in most images and displays, while percentages are resolution-independent. This tool understands both.
Yes, that's its main advantage. Because lightness is a separate axis, you can hold hue and saturation constant and step lightness up or down to generate a coherent set of tints and shades — ideal for hover states, borders, and background tints that all read as the same color family.
HEX, RGB, and HSL all operate in the sRGB gamut. Newer formats like OKLCH and LAB work in perceptually-uniform color spaces that better match how humans see brightness and can express colors outside sRGB on wide-gamut displays. For most web work sRGB HEX/RGB/HSL remains the standard, which is what this converter focuses on.