Color Converter
The same color is written differently depending on where it is going: HEX in a stylesheet, RGB in a design tool or a canvas call, HSL when you want to adjust lightness or saturation directly. Converting between them by hand is error-prone.
Enter a color in any one of the three notations, or pick one with the color picker, and the other two update immediately beside a live swatch. A block of ready-made CSS declarations is generated underneath, and each format has its own copy button.
Runs in your browser. Color Converter processes your input on your own device. Nothing you enter or upload is sent to a server.
Did this tool help you? ☕
WebzTools is free to use. If this tool saved you some time, you can support the project with a coffee and help us keep improving the tools.
(opens in a new tab)How to use the Color Converter
- Choose a color with the picker, paste a HEX code (with or without the #), or type RGB or HSL values.
- Watch the swatch and the other two formats update.
- Use the copy button beside the format you need, or Copy All Formats for the whole CSS block.
- Select Reset to go back to the default color, #6366f1.
Supported formats: HEX (3 or 6 digits), RGB (0 to 255 per channel) and HSL (hue 0 to 360, saturation and lightness 0 to 100). No alpha channel.
What each field accepts
| Format | Enter | Range and behavior |
|---|---|---|
| HEX | #rgb or #rrggbb, with or without the # | Three-digit shorthand is expanded by doubling each digit, so #f0c becomes #ff00cc. Output is always lowercase six-digit HEX. |
| RGB | Three whole numbers: red, green, blue | 0 to 255 each. Values outside the range are clamped to the nearest valid one. |
| HSL | Hue in degrees, then saturation and lightness as percentages | Hue 0 to 360, saturation and lightness 0 to 100, as whole numbers. |
Worked example: #6366f1
RGB and HSL values are rounded to whole numbers. Converting a color to HSL and then back can therefore land a unit away from where it started: rgb(0, 0, 25) is shown as hsl(240, 100%, 5%), and entering that HSL gives rgb(0, 0, 26). For web work the difference is invisible, but keep the original value if you need an exact match.
If you do not have a color yet and want to take one from a photo or a logo, the Color Palette extractor reads dominant colors out of an image, and you can paste a HEX value from it back here.
Enter #6366f1
Input
#6366f1
Output
/* HEX */ color: #6366f1; /* RGB */ color: rgb(99, 102, 241); /* HSL */ color: hsl(239, 84%, 67%);
Things worth knowing
- HEX codes must have exactly 3 or 6 digits. Other lengths, including 4-digit codes and 8-digit codes with an alpha channel, are ignored: nothing converts until the code is complete and valid.
- Paste a complete HEX code rather than typing it one digit at a time. The field reformats the code as soon as it holds three valid digits, which can interrupt typing a six-digit code. The color picker avoids this too.
- There is no alpha channel, so no transparency in any of the three formats.
Frequently asked questions
When is HSL more useful than HEX?
When you are adjusting a color rather than specifying one. HSL separates hue from saturation and lightness, so building a lighter or more muted variant is a single-number change, which is not obvious at all in HEX.
What does a shorthand HEX code mean?
A three-digit code is expanded by doubling each digit, so #f0c is identical to #ff00cc. It only works when each channel happens to have two matching digits, so a color like #6366f1 has no shorthand.
Can it convert colors with transparency, or to CMYK?
No. It converts between HEX, RGB and HSL only. Eight-digit HEX codes, rgba() and hsla() values, named colors, CMYK, HSV and newer formats such as OKLCH are not supported.
Is the conversion done locally?
Yes. It runs in your browser, and nothing you enter is sent to a server.