Color Converter (HEX/RGB/HSL)
Converts HEX, RGB, and HSL color codes to each other in real time. Enter a value in any field, or pick a color with the color picker, and the other formats update automatically. Everything happens in your browser, and nothing you type is ever sent to a server. Want to check whether two colors are easy to read together? Try the Color Contrast Checker (WCAG) as well.
🔒 Runs in your browser · Your data is never sent to a server
Notes
- RGB and HSL accept formats like "rgb(255, 0, 0)" and "hsl(0, 100%, 50%)", as well as plain comma-separated numbers like "255, 0, 0".
- If a value is not a valid format, the other fields are left unchanged and an error message is shown instead.
- Transparency (alpha) is not supported. If you enter an rgba() or hsla() value, the alpha component is ignored during conversion.
Glossary
HEX (hexadecimal color code)
A format like "#3b82f6" that represents a color as # followed by 6 (or 3) hexadecimal digits. It is the most common format in CSS and design tools.
RGB
A format that expresses a color as amounts of Red, Green, and Blue light, each on a scale of 0 to 255.
HSL
A format that expresses a color as Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). It makes adjustments like "keep the same hue but change the brightness" easy.
FAQ
When should I use HEX, RGB or HSL?
HEX is the most common notation in CSS and design tools. RGB is convenient in code, and HSL (hue, saturation, lightness) is handy for tweaking brightness within the same color family.
Are 3-digit HEX codes supported?
Yes. Short forms like "#f00" are accepted and expanded to six digits by doubling each digit (#ff0000).
How can I use the converted colors?
Copy the result straight into your CSS or design tool. To check readability of a color pair, use it together with the contrast checker.
Share this page