Color Converter

A color converter translates a color between its common representations — HEX, RGB, HSL, and CMYK. Each format exists for a different audience: web developers write HEX and rgb() in CSS, designers think in HSL for intuitive hue/saturation adjustments, and print production uses CMYK because ink mixing is subtractive. Instead of memorizing conversion formulas or opening a design app, paste a value in any format and get every other format instantly.

HEX is a base-16 shorthand of RGB (#RRGGBB) used in CSS and design tools. RGB defines a color by its red, green, and blue light intensities (0–255). HSL describes the same color by hue (0–360 degrees around a color wheel), saturation (0–100%), and lightness (0–100%) — which people find much more intuitive to adjust. CMYK describes color for printing, mixing cyan, magenta, yellow, and black inks, with each channel from 0–100%. They all represent the same color, just in different coordinate systems.

Because screens and printers create color differently. Monitors emit light and mix it additively (RGB), while printers lay down inks that absorb light subtractively (CMYK). The two color spaces have different gamuts, so a vivid on-screen color may not be reproducible in print. Converting a color to CMYK and soft-proofing it in a design app gives you a closer idea of how it will look on paper — this tool gives you the exact CMYK percentages for that process.

Split the 6-digit HEX value into three pairs — RR, GG, BB — and convert each pair from base-16 to decimal. For example #3F51B5: 3F = 63, 51 = 81, B5 = 181, giving rgb(63, 81, 181). The tool does this instantly and also accepts short 3-digit HEX like #F00 (which expands to #FF0000) and 4- or 8-digit values with an alpha channel, which is ignored for the standard conversions.

HSL stands for Hue, Saturation, and Lightness. Hue is the position on the color wheel (0° red, 120° green, 240° blue), saturation is the vividness, and lightness is how close the color is to black or white. It is ideal for generating shades, tints, and harmonious palettes in code — you can create a color ramp by varying only the lightness. This converter shows the exact HSL values of any color so you can use them in CSS.

It understands about 40 common CSS color names such as red, blue, green, black, white, gray, orange, purple, pink, teal, navy, olive, coral, and many more. Type a name on its own and the converter resolves it to its HEX/RGB/HSL/CMYK equivalents. For named colors not in the list, paste the hex or rgb value instead — the converter accepts any standard format.

A complementary color sits directly opposite a color on the color wheel — the hue plus 180 degrees. Complements create the strongest contrast and are a foundation of color theory for UI design, brand palettes, and accent colors. The converter shows the complement of your current color automatically, so you can pair it immediately.

Yes — completely free, no registration, and 100% private. All conversion runs locally in your browser with plain JavaScript; your colors are never sent to any server. The tool works offline after the page loads, and it pairs well with our JSON formatter and CSS-adjacent developer tools for a complete workflow.