How to use this tool
- Choose a color using the picker, or edit one of the HEX, RGB or HSL fields.
- Check the preview. All three representations update when your input is valid.
- Copy the format you need, or reset to the starting color #3366FF.
How it works
Choose a color or enter its HEX, RGB or HSL value. The tool shows the same opaque sRGB color in all three formats, ready to copy into your design or CSS.
HEX represents red, green and blue channels in hexadecimal notation. RGB uses channel values from 0 to 255. HSL describes hue from 0° to 360°, saturation from 0% to 100%, and lightness from 0% to 100%. The tool converts between these representations locally, using the sRGB color space.
| Format | Notation | Example |
|---|---|---|
| HEX | #RRGGBB | #3366FF |
| RGB | rgb(r, g, b) | rgb(51, 102, 255) |
| HSL | hsl(h, s%, l%) | hsl(225, 100%, 60%) |
What to keep in mind
This tool supports opaque sRGB colors. It does not support transparency, wide-gamut colors or image sampling. RGB channels are rounded to integers and HSL values to two decimal places; converting repeatedly may introduce small rounding differences. Screens, display profiles and surrounding colors can change how a color looks. The preview is not an accessibility contrast test.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe colors in different ways. HEX encodes red, green and blue channels in hexadecimal; RGB writes those channels numerically; HSL expresses hue, saturation and lightness. This tool converts the same sRGB color between all three.
How do I convert a HEX color to RGB?
Enter a three- or six-digit HEX value, such as #36F or #3366FF. The RGB field updates automatically. For #3366FF, the result is rgb(51, 102, 255).
Can I use the copied value in CSS?
Yes. The copy buttons provide a six-digit HEX code, an rgb() value or an hsl() value that you can use in CSS properties such as color and background-color.
Why can a color look different on another screen?
Screen calibration, brightness, display profiles and surrounding colors affect perceived color. Matching numeric sRGB values does not guarantee an identical appearance on every device. Small conversion differences can also result from rounding.