Color Converter (HEX, RGB and HSL)

The same color can be written in several ways. This tool works with the three formats most used on the web and in design:

• HEX is the six-digit code preceded by "#", like #2563EB. Each pair represents the intensity of red, green and blue in hexadecimal.
• RGB describes the color with three values from 0 to 255, one per channel: red, green and blue. The same blue above is rgb(37, 99, 235).
• HSL thinks about color more intuitively: hue (the "tone", 0 to 360 degrees), saturation (how vivid, 0 to 100%) and lightness (how light, 0 to 100%).

You can use the visual picker, type directly into any of the three fields, or paste a ready-made code. When you change one format, the other two are recalculated instantly, and the preview shows the resulting color. Each format has its own copy button, already in the right form to drop into CSS.

Anyone working with websites and design constantly converts colors. A brand guide provides a color in HEX, but the code needs it in RGB to apply transparency. A design tool hands over HSL, and the developer wants the equivalent HEX.

The HSL format is especially useful for creating variations of a color — making it lighter or darker by adjusting just the lightness, or getting harmonious tones by rotating the hue. Having all three formats side by side speeds up that work, avoids typos in long codes and saves memorizing conversion formulas.

The most common mistake is mixing up the channel order in RGB. It's always red, green, blue, in that sequence. Swapping two values produces a completely different color from the one intended.

Another slip is forgetting the "#" in HEX or using the wrong number of digits. The standard format has six characters (two per channel). There's a three-digit shorthand, but it only works when each pair repeats — not every color can be shortened without losing precision.

In HSL, it's common to swap saturation for lightness. Saturation controls how vivid or grayish the color is; lightness controls how light or dark. Adjusting the wrong value leads to unexpected results, like a color turning gray when you only wanted to darken it.