Color Converter

Front-end developers pulling a HEX value out of a Figma file, SEO specialists matching a brand color inside structured data, and print coordinators translating screen colors into CMYK specs all hit the same wall. A value arrives in one format and the next system in the chain demands another, and hand-converting channel math under deadline is where off-by-one hex digits creep in.

This converter takes any HEX, rgb(), hsl(), hwb(), or cmyk() string and expands it into every other format at once, with a live swatch so you can see the color before you trust the numbers. A built-in contrast panel computes WCAG ratios between any two colors, and everything runs locally in the tab.

How the conversion math works

Every input is normalized to an RGB triple first, because RGB is the common denominator the other models decompose from. HEX parsing expands shorthand three and four digit forms by doubling each digit, then slices pairs into 0 to 255 channels. Functional notations are tokenized on commas, slashes, and whitespace, with the optional fourth component treated as alpha for rgb, hsl, and hwb but as the black channel for cmyk.

RGB to HSL finds the maximum and minimum channel to derive lightness as their average, saturation from the spread relative to that lightness, and hue from which channel dominates, scaled to 360 degrees. HWB reuses the same hue but reports the minimum channel as whiteness and one minus the maximum as blackness, following the CSS Color 4 rule that sums beyond 100 percent collapse to grey. CMYK divides each inverted channel by one minus the black key, with pure black short-circuiting to a key of 100.

The contrast panel applies the sRGB relative luminance formula, converting each channel through the piecewise gamma expansion before weighting green most heavily, then computes the lighter plus 0.05 over darker plus 0.05 ratio the WCAG specification defines. Rounding is deferred to display time so round-tripping a value through two formats stays within one channel unit of the original.

Before and after: brand HEX to every format

Input, a marketing HEX pulled from a brand sheet:

#ff8800

Output, all formats derived from that single value:

hex:  #ff8800
rgb:  rgb(255 136 0)
hsl:  hsl(32 100% 50%)
hwb:  hwb(32 0% 0%)
cmyk: cmyk(0% 46.7% 100% 0%)

contrast vs white: 2.39:1 (fails AA for body text)
contrast vs black: 8.77:1 (passes AAA)

Press the Brand blue sample above and the same expansion happens for #3b83f7, which converts to hsl(217 92.2% 60%) and cmyk(76.1% 47% 0% 3.1%), giving you a print spec and a CSS string from one paste.

Who converts colors with this tool

Common mistakes when converting colors

• Treating CMYK percentages as press-ready separations. The naive formulas here match the mathematical model but ignore ink limits, total area coverage, and the ICC profile of a specific press. Always have a commercial printer re-separate brand colors before a print run.
• Forgetting that HWB sums are capped. Whiteness and blackness above a combined 100 percent discard the hue entirely, so dialing both sliders high yields grey rather than a tinted shade. If you want a pastel, keep blackness near zero and raise whiteness instead.
• Judging contrast by eye. A color that looks fine on a calibrated designer monitor can fail AA on a washed-out laptop panel, which is exactly the device many users read email on. Copy both hex values into the contrast panel and trust the ratio over the swatch.
• Dropping the hash or pasting extra whitespace. A value like " #ff8800 " with padding usually parses because the tool trims, but values copied from PDFs sometimes carry non-breaking spaces or a trailing semicolon that break strict parsers downstream. Trim to the bare value before committing it to code.

Best practices for color conversion workflows

• 1.Store HEX as the source of truth in design tokens and derive HSL at build time, so a single edit propagates to every theme variant without manual re-entry.
• 2.Convert and record the CMYK spec alongside the HEX in the brand guide, and note that it is a naive conversion the printer must profile before production.
• 3.Run every text and background pair through the contrast panel and keep a screenshot of the passing ratio in the pull request, which shortens accessibility review later.
• 4.Prefer space-separated rgb() and hsl() strings in modern CSS because the slash alpha syntax this tool emits also works in color-mix() and oklch() pipelines.

Frequently asked questions