Paste a 12 color palette into a design handoff and convert each value by hand and you spend an afternoon injecting typos. Our color code converter takes the whole list at once and returns five formats per line. Three of its parsing and rounding rules surprise people regularly, so this article documents all of them from the shipped code.
What the color code converter accepts
The component runs each line through three checks in a fixed order. HEX first, then the RGB family, then the HSL family.
1. HEX matches an optional hash mark followed by 3 to 8 hexadecimal characters. A 3 digit value expands to 6 digits by doubling each character. A 4 digit value expands to 8 digits the same way.
2. rgb() and rgba() match three integers plus an optional decimal alpha. Omit the alpha and the converter assumes 1.
3. hsl() and hsla() match hue, saturation, and lightness plus an optional alpha. The percent sign on saturation and lightness is optional in the input, which is more permissive than most converters.
The order matters. The string rgb(1,2,3) never reaches the HSL check because the HEX check runs first and fails on the parentheses. A line that fails all three checks still occupies a row in the results table, marked as an invalid color in red, while every other line converts normally.
What each output column emits
Every valid row returns HEX, RGB, HSL, RGBA, and HSLA, plus a preview swatch. The HSL values come out as whole numbers because the converter rounds hue to a whole degree and saturation and lightness to whole percents.
The placeholder examples in the tool give you three reference rows you can verify yourself. rgb(66, 135, 245) converts to hsl(217, 90%, 61%). hsl(120, 50%, 50%) converts to rgb(64, 191, 64). These two roundtrip exactly, which makes them safe for demos.
The rgba() line shows the alpha rule. Input rgba(255, 0, 128, 0.8) produces this Copy All line:
rgba(255, 0, 128, 0.8) => HEX: #ff0080 | RGB: rgb(255, 0, 128) | HSL: hsl(330, 100%, 50%) | RGBA: rgba(255, 0, 128, 0.8) | HSLA: hsla(330, 100%, 50%, 0.8)
Read that line carefully. The HEX column shows #ff0080 with no alpha. The HEX output template builds exactly six digits from the red, green, and blue channels, always. Alpha survives only in the RGBA and HSLA columns.
This bites people who paste an 8 digit HEX input. The parser reads the last two digits as an alpha byte divided by 255 and carries it into RGBA and HSLA, then silently drops it from the HEX column. If your pipeline reads the HEX column, you lose translucency without any warning.
Roundtrip drift, measured on one color
Converting a color to HSL and back does not always return the original value. The cause is integer rounding in the HSL output, and one shipped placeholder color proves it.
Input #ff5733 has red 255, green 87, blue 51. The exact hue works out to 10.588 degrees, which the converter rounds to 11. Convert hsl(11, 100%, 60%) back and you get rgb(255, 88, 51), which is #ff5833. The green channel moved from 87 to 88 because of a half degree of hue.
Apply one rule to avoid this trap. Treat the converter output as the canonical value and copy all five formats at once with the Copy All button. Never reconvert a converted value and expect the original, and never store HSL as the master for a brand color with an exact HEX definition.
Convert a palette in five steps
1. Open the color code converter and paste your colors, one per line, in any mix of the three accepted families.
2. Press Convert and scan for red rows before copying anything. Each red row names the exact line that failed.
3. Check each preview swatch against your design source. A swatch that looks wrong means the input line parsed in a format you did not intend.
4. Press Copy All to get one pipe delimited line per color with all five formats, or press the copy icon on a single cell for one format.
5. Paste into your stylesheet or design tokens file and delete the source column so the converted values become the single source of truth.
Honest downsides of this converter
The HEX regex accepts 3 to 8 characters, which includes 5 and 7 digit strings that CSS itself does not define. Those lines still produce values instead of an error, because the parser slices the string into channels regardless of length. Check your digit count when a HEX row looks off.
Named colors such as red or rebeccapurple fail all three checks and show as invalid. Convert named colors to HEX before pasting. The converter also has no OKLCH or CMYK support, and it never sends data anywhere, so it cannot pull values from a file or a URL.
Checklist before you ship converted values
- [ ] Every pasted line produced a swatch, with no red invalid rows left.
- [ ] The alpha you intended appears in the RGBA or HSLA column, since the HEX column drops it.
- [ ] Your master copy is the converter output, not a reconverted value.
- [ ] HSL values are read as whole numbers, with no expectation of fractional precision.
- [ ] HEX inputs have 3, 4, 6, or 8 digits, the four lengths CSS defines.
One conversion habit worth questioning is whether you need HSL at all when the destination is CSS. Run your next palette through the [color code converter](/en/color-code-converter) and check how many values drift a unit on the HSL roundtrip. If your tally differs from what the #ff5733 example shows, tell us which colors moved.
