Color Converter

How a value becomes three lines

A field that starts with #, or that is three to six hex digits and nothing else, is read as hex. Three digits are expanded by doubling, so #abc is #aabbcc, which is rgb(170, 187, 204) and hsl(210, 25%, 73%). Six digits are taken as red, green, and blue. The HEX line rebuilds those channels in uppercase with a leading #. #ff6600, FF6600, and #f60 all become HEX: #FF6600, RGB: rgb(255, 102, 0), and HSL: hsl(24, 100%, 50%). Hue, saturation, and lightness on that line are rounded to integers. Channels that are already equal, such as #808080, report hue 0 and saturation 0, with lightness 50.

If the field is not hex, a value that contains the letters rgb, or that starts with a digit, is read as three numbers. Commas and spaces both work, so 255 102 0 matches rgb(255, 102, 0). Any channel above 255 rejects the whole field. If the field contains hsl and was not taken as hex or as RGB, the three numbers are hue, saturation, and lightness, and they are converted back through RGB before the lines are printed. hsl(24, 100%, 50%) round-trips to the sample above. The letters hsl are required. 24, 100, 50 starts with a digit, so it is RGB: rgb(24, 100, 50), HEX: #186432, HSL: hsl(141, 61%, 24%).

The text field, the picker, and Convert

The text field has no separate label. The Color picker sits beside it and is a native color input. Until a conversion or a pick has set a preview, the picker displays #ffffff and does not write that fallback into the text. Choosing a swatch copies the picker's hex into the text and shows the preview square labeled Color preview. Convert is still required before Color formats changes. Enter in the text field is the same as Convert.

The status starts at Ready to convert. Success says Converted successfully. Copy output copies the three lines, not the status. There is no download. Switching away from a good value to a bad one does not erase the last good lines. The preview square also stays on the last hex that was successfully converted or picked. There is no alpha slider and no named-color list.

Jobs for a hex, an rgb(), or an hsl()

Paste a brand hex when a ticket asks for the rgb() or hsl() spelling of the same color. The color palette rotates hue around one hex and keeps saturation and lightness. It does not print the rgb() line. This page does not build a complementary or triadic set. After you have written CSS by hand, the CSS beautifier indents the stylesheet. It does not receive these three lines automatically.

A stylesheet that only needs the hex can copy the first line. The HEX line is always the rebuilt channels, so a 3-digit source becomes six digits. Image files and data URLs are outside this field. The image to Base64 tool reads a file. It does not parse #ff6600. Markup around a color value, if you are indenting it, belongs on the HTML beautifier.

Short hex, bare numbers, and values the parser drops

Four hex digits, five hex digits, and eight hex digits fail. #ff660080 is rejected even though the first six digits are a real color. There is no alpha channel on the RGB or HSL line. A fourth number inside rgb(), such as rgb(255, 102, 0, 0.5), is ignored, and the result is the same three lines as the sample. A minus sign is not part of the number pattern, so rgb(-1, 2, 3) is read as 1, 2, 3. Named colors, including red and blue, hit the error sentence. The word blue is not looked up.

HSL saturation and lightness are not clamped to 0–100, and a hue past 360 wraps during the conversion back to RGB. A saturation above 100 can push a channel outside 0–255. The HEX line is then no longer a tidy six-digit color, because a channel is printed with as many hex digits as it needs, including a minus sign if the channel is negative. Keep saturation and lightness inside 0–100 if you want a normal HEX line. White #fff is hsl(0, 0%, 100%). Black #000 is hsl(0, 0%, 0%).

Rules and limitations

Hex input is 3 or 6 digits, with or without one leading #. Three digits are doubled. RGB is rgb() or any three numbers from 0 to 255. HSL is recognized only when the field contains hsl. Output HEX is uppercase.

A fourth RGB number is ignored. 8-digit hex and color names fail and leave the previous lines. Out-of-range HSL is not clamped. The picker writes hex into the field. Convert or Enter writes the three lines. There is no download.

Common problems

If 24, 100, 50 did not match the HSL you had in mind, the digits were read as red, green, and blue. Type hsl(24, 100%, 50%) when those numbers are hue and percentages.

If the HEX line is longer than seven characters or contains a minus sign, saturation or lightness was outside 0–100. If the status names #ff6600 and the old lines remain, the new field was rejected.

Frequently asked questions

About this tool

Maintained by Toolbench. For large or deeply nested files, split the input into smaller batches and verify representative results before using them in an import or application. Report reproducible problems through Contact.