Color Format Converter

The color format converter prints one color in nine notations at once — HEX, RGB, HSL, OKLCH, HWB, LAB, LCH, a CMYK approximation and a packed RGB integer — each on its own row with its own copy button.

What is Color Format Converter?

The color format converter answers a question about notation rather than about color. One color goes in at the top of the page and nine readings come back below it, each on a copy row, so a value that arrived as a screenshot swatch can leave as a token, an API field or a print approximation without a second tool. Every row is derived from the same parsed color, which is why the formats here can never disagree with one another.

• HEX — six digits, upper case, the compact exact form for sRGB tokens.
• RGB — decimal channels in red, green, blue order, as in rgb(59, 130, 246).
• HSL — hue in degrees with saturation and lightness as percentages, two decimals deep.
• OKLCH — perceptual lightness, chroma and hue, the oklch notation modern CSS accepts natively.
• HWB — hue with whiteness and blackness percentages.
• LAB and LCH — the CIE Lab axes and their cylindrical form, two decimals on each Lab value.
• CMYK — four whole-number percentages, written cmyk(76%, 47%, 0%, 4%) for the same blue.
• Int — the packed rgb integer, one 24-bit number built from the three channels.

The arithmetic is not hand-written. Parsing, RGB, HSL and the hex formatter come from the culori library this domain already uses, so a value here matches what a browser renders. HWB, LAB, LCH and OKLCH run through explicit conversions of that same parsed color; CMYK is computed in the tool from the 8-bit channels, taking black as one minus the largest channel and each ink as the remainder divided by the non-black share, rounded to whole percents. The packed integer shifts red into the top eight bits, green into the middle and blue into the bottom, which is how (r << 16) + (g << 8) + b turns three channels into one number.

The caveats are worth knowing before anything is pasted.

• The CMYK figure is arithmetic, not a press profile. No ICC profile is consulted and no soft proof is produced, so treat it as the start of a conversation with a printer rather than a conversion to hand over.
• The cmyk(...) string is not CSS. Browsers do not parse it; copy it into notes, spreadsheets or documentation tables, never into a declaration.
• OKLCH prints at the library's full float precision, so that row is long even though the value itself is exact.
• There is no alpha anywhere. An 8-digit value types into the field but is normalized to its six-digit form, so alpha never reaches a row.

Choose the row by where it is going rather than by preference. Hex is the token format: compact, exact for sRGB, and the spelling every other tool understands. OKLCH is the one to keep when lightness or chroma will be edited later, because its coordinates map onto the things a designer actually changes. Use the panel to convert color to hsl when a person will tune the number by hand in a stylesheet, and to rgb when tooling wants channel integers. The packed integer earns its place when an API, a canvas call or a mobile framework expects one number instead of three. Before two of these notations land in the same file, confirm they round-trip to the same color — rounding is the only place where two spellings of one color can quietly disagree.

How to use Color Format Converter

1. Set the color with the picker field, or type any value the field accepts and let it normalize.
2. Read the formats panel: nine rows, from HEX through to the packed integer.
3. Copy the row your stylesheet, spec or API needs with the copy button on that row.
4. Cross-check a second notation only where a document quotes both, so the pair cannot drift.

When to use Color Format Converter vs related tools

Use this when one color has to leave in a notation you do not have. The format validator is the reverse direction — it checks a string you already have; the CSS color formatter gives the five CSS-ready spellings without the lab, lch and integer rows; the HEX generator is the shortest route when only the token form matters; and the alpha generator covers the translucency this panel deliberately omits.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Color Format Converter