Color Converter — HEX, RGB, HSL & RGB to CMYK

Convert HEX, RGB, HSL and RGB to CMYK instantly — free, client-side color code converter with CSS-ready output for web designers.

🔒 100% Client-Side Processing

Your data is processed entirely in your browser and never transmitted to any server.

Example

Input

#FF5733

Output

rgb(255, 87, 51) · hsl(11, 100%, 60%) · cmyk(0%, 66%, 80%, 0%)

One HEX input drives every output format at once — CMYK uses the naive RGB-to-CMYK formula with no ICC profile, matching what the tool itself computes.

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 90%, 60%)
CMYKcmyk(76%, 47%, 0%, 4%)
Tailwind Classbg-[#3B82F6]

Common Use Cases

Translating design handoffs

A designer gives you HEX from Figma but your CSS system uses HSL — convert once and copy the exact value instead of doing the math by hand.

Building theme variations

Convert a brand color to HSL to derive lighter and darker shades systematically by adjusting lightness, then convert back to HEX for your tokens.

Matching legacy code

Unify a stylesheet that mixes rgb(), HEX, and HSL notations by converting everything into your codebase's standard format.

Dropping colors straight into Tailwind

Copy the ready-made bg-[#HEX] arbitrary-value class alongside the RGB and HSL output so a picked color goes straight into markup without hand-formatting the syntax.

Frequently Asked Questions

How do I convert HEX to RGB?
Paste a HEX code like #FF5733 and the converter splits it into pairs — FF, 57, 33 — each parsed as a 0–255 value for red, green, and blue. The output is a CSS-ready rgb() string you can copy directly.
What is the difference between HSL and RGB?
RGB describes a color by red, green, and blue light intensity; HSL describes it by hue (0–360°), saturation, and lightness, which is far more intuitive for adjusting tints and shades. Both are valid CSS and this tool converts between them exactly.
Why is CMYK different from the other formats?
CMYK is a subtractive model for print (ink on paper), while HEX/RGB/HSL are additive models for screens. Conversions to CMYK are approximations — always proof physical print colors with your printer's profile.
Will this CMYK value match Photoshop or Illustrator exactly?
Not necessarily. This tool uses the standard naive RGB-to-CMYK formula (the same one most free online converters use) with no ICC color profile applied. Photoshop and Illustrator convert using the document's actual color profile (e.g. U.S. Web Coated SWOP), which accounts for real ink and paper behavior — so their CMYK numbers can differ from a quick online estimate like this one. Use this for a fast reference value, not a final print-ready conversion.
Can this convert CMYK to Pantone?
No — Pantone (PMS) is a proprietary, licensed spot-color system, not a mathematical color space like RGB or CMYK. There is no formula that derives a Pantone number from CMYK values; professional workflows match against Pantone's own printed or licensed digital guides. Any tool claiming a formula-based CMYK-to-Pantone conversion is giving you an approximation at best — use this converter for HEX/RGB/HSL/CMYK, and check an official Pantone guide for spot-color matching.
Is my data private when I use this tool?
Yes. This tool runs entirely in your browser using client-side JavaScript — nothing you type is transmitted to, logged by, or stored on any server. You can safely process confidential text, tokens, or code.