Free Color Converter — HEX, RGB, HSL, CMYK, HSB & LCH

How to use the Color Converter

Using this tool takes under a minute. Furthermore, no account is needed and no data is sent to any server.

How the color conversion works

All conversions are performed in the browser using pure JavaScript math, with no server communication at any point. Furthermore, the converter accepts input in 8 different formats and detects which format you have entered using regular expressions before parsing the values.

The conversion chain always passes through RGB as an intermediate step: any non-RGB input is first converted to RGB, then RGB is converted to all other target formats simultaneously. Furthermore, HSL and HSB are computed from RGB using the standard hue-saturation formulae. CMYK is derived by normalising each RGB channel and finding the black key component.

LCH (Lightness-Chroma-Hue) is a perceptually uniform color space increasingly used in CSS Color Level 4. The converter routes through the XYZ → Lab → LCH pipeline. Furthermore, perceptually uniform means that numerically equal differences in LCH values correspond to visually equal differences in color — something that RGB and HSL cannot guarantee.

Example: converting HSL to HEX, RGB and CMYK

The following example walks through a realistic scenario step by step. Furthermore, it shows what output to expect from a typical use case.

A UX designer receives a brand color specification as 'hsl(28, 89%, 67%)' and needs to provide the developer with a HEX code and the Figma team with an RGB value, and the print vendor with CMYK.

They paste 'hsl(28, 89%, 67%)' into the converter. The tool instantly produces: HEX #F4A261, RGB rgb(244,162,97), CMYK cmyk(0%, 34%, 60%, 4%). Furthermore, the LCH output (L:74.2, C:51.3, H:57.1) is ready for CSS Color Level 4 usage.

Each format is copied with a single click. Moreover, the large color swatch confirms the warm amber orange visually before any format is shared, preventing errors caused by misread or mis-typed values.

What is a color converter?

A color converter transforms a color from one notation system to another. Different tools, platforms and workflows require colors in different formats — web browsers primarily use HEX and RGB, design tools like Figma accept HSL and HSB, print workflows require CMYK, and modern CSS Color Level 4 supports LCH and Oklch. Furthermore, each format encodes the same color using entirely different mathematical representations.

HEX codes represent each RGB channel as a two-digit hexadecimal number from 00 to FF. RGB uses decimal integers from 0 to 255. HSL describes color as Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). Furthermore, CMYK — used exclusively in print — describes color as ink percentages across Cyan, Magenta, Yellow and Key (Black) channels.

Why do different tools use different color formats?

Different color formats were developed for different output media. RGB and HEX are optimised for light-emitting screens. CMYK was developed for subtractive ink printing where mixing pigments absorbs light. HSL and HSB were designed to be more intuitive for humans — separating the perceptual qualities of hue, saturation and brightness. Furthermore, LCH and Oklch are newer perceptually uniform formats that make color manipulation more predictable for design systems.

What is the difference between HSL and HSB?

Both HSL and HSB describe color using Hue and Saturation, but differ in the third channel. HSL uses Lightness — where 50% is pure color and 100% is white. HSB uses Brightness — where 100% is pure color or white depending on saturation. Furthermore, HSB (also called HSV) is used natively in Photoshop and most design tools, while HSL is the standard in CSS.

Why a unified color converter saves design time

Color format conversions are one of the most repetitive tasks in digital design. A brand guideline may specify a Pantone color; the web team needs HEX; the developer needs RGB for CSS; the design token system uses HSL; the print vendor needs CMYK. Furthermore, manually converting between each format pair using separate tools introduces transcription errors and wastes time on every project.

A unified converter that accepts any format as input and outputs all formats simultaneously eliminates this friction entirely. Moreover, the visual color picker enables teams without a reference code to still start the conversion process by selecting the color visually and then copying the required format.

LCH support sets this tool apart from most converters. As CSS Color Level 4 adoption grows, design systems increasingly store colors in LCH or Oklch for better perceptual uniformity. Furthermore, having LCH in the same output panel means the converter serves both legacy and modern CSS workflows without switching tools.

Frequently asked questions

Related color tools

Every tool in this collection runs entirely in your browser. Furthermore, all tools are free to use with no account required.