Color converter
Convert HEX, RGB and HSL colors with a live swatch and explicit transparency.
How it works & useful details
How to use this tool
Enter a HEX, RGB or HSL color. Copy individual formats from the preview or export all three.
Supported values and limitations
Supports 3, 4, 6 and 8-digit HEX; numeric or percentage RGB; degree-based HSL; optional alpha. Named colors except transparent, CSS variables, color(), Lab and OKLCH are outside this tool’s scope. Channels outside their ranges are rejected.
About this tool
Color converter translates a color between HEX, RGB, and HSL with a live swatch and explicit transparency handling. It is useful when a design tool hands you one notation and your codebase expects another.
The conversion is exact for the notations involved and shows the alpha channel separately so transparency is never silently dropped. All parsing happens locally.
How to use it
- Paste or type a color in HEX, RGB, or HSL form.
- Review the equivalent values in the other notations.
- Set the alpha value if the color needs transparency.
- Copy the notation your project uses.
Worked example
HEX: #6366f1
RGB: rgb(99 102 241)
HSL: hsl(238.732 83.529% 66.667%)With 50% transparency, #6366f180, the alpha appears in every format: rgb(99 102 241 / 0.501961). An alpha byte of 0x80 is 128 out of 255, which is why it is not exactly 0.5.
Which format to use
HEX is compact and universal in design tools and brand guides. RGB matches how screens mix light and is what canvas and image APIs use. HSL describes colours the way people think about them: hue as an angle on the colour wheel, then saturation and lightness. That makes it easy to create lighter or darker variants by changing one number.
Output uses the modern space-separated CSS syntax, rgb(99 102 241 / 0.5), which all current browsers support. The older comma syntax, rgba(99, 102, 241, 0.5), is equivalent. Colours are in sRGB, so values from wide-gamut spaces such as Display P3 are outside this converter's scope.
Frequently asked questions
Is the HEX to RGB conversion exact?
Yes. HEX and RGB describe the same 8-bit channels, so the values match exactly; HSL representations are rounded to two decimals for display.
How is transparency represented?
Alpha is kept separate and shown alongside the color, so you can express it in the notation your target format supports.
Does it support named CSS colors?
Paste the notation forms shown in the input; named colors should be converted to HEX first.
Why do converted values have decimals?
HSL is calculated exactly and rounded to three decimals. Converting back to HEX rounds to whole 8-bit channels, so a round trip can differ by one step in a channel.