Skip to content

Color Code Converter

Convert between HEX, RGB, HSL, HSV, and CMYK instantly

Auto-detects format

Convert Colors Between Every Major Format

Different tools and contexts demand different color formats. CSS uses HEX and HSL. Design tools work in HSV. Print workflows need CMYK. APIs and data files pass RGB integers. This converter bridges all five formats: enter a color in any notation and instantly see the equivalent values in every other system, with a live preview swatch and one-click copy for each output.

HEX: The Web Standard

HEX codes represent red, green, and blue as two hexadecimal digits each, prefixed with #. The 3-character shorthand (#f00) doubles each digit (#ff0000). HEX is the most common color notation in CSS, HTML, and design specs because it is compact and unambiguous. Every browser, design tool, and image editor understands it.

RGB: The Color Model Behind Screens

RGB defines a color as a mix of red, green, and blue light, each ranging from 0 to 255. It is the native model of monitors, phone screens, and cameras. CSS uses the rgb() function, and programming languages typically store colors as RGB integers or tuples. When you need to manipulate color channels directly — darken a color, blend two colors, calculate contrast — RGB is the most natural format.

HSL and HSV: Human-Friendly Color Spaces

HSL and HSV describe colors the way humans think about them: hue (the color on the wheel, 0–360°), saturation (how vivid vs gray), and a brightness dimension. HSL uses lightness (0% black, 50% pure color, 100% white) and is the format behind CSS hsl(). HSV uses value (0% black, 100% full brightness) and is the model in Photoshop's color picker, Figma, and most design tools. The converter handles both.

CMYK: Print-Ready Values

CMYK defines a color by the percentage of cyan, magenta, yellow, and black ink needed to print it. Screen colors (RGB) have a wider gamut than print, so some bright or saturated screen colors cannot be reproduced exactly on paper. The converter uses the standard mathematical formula, which gives a serviceable approximation for web-to-print handoff, but professional printing requires ICC profile-based conversion in tools like Adobe InDesign.

Practical Workflow

A designer sends you a HEX value and you need the HSL equivalent for a CSS variable that adjusts lightness across themes. A client gives you a Pantone-to-CMYK reference and you need the HEX for the website. A developer logs an RGB tuple and you need to match it to the brand color in the style guide. This converter removes the manual math from all these handoffs — paste any format, copy the one you need.

$ faq

What color formats are supported? ▸
HEX (#ff5733 or #f53), RGB (rgb(255, 87, 51) or 255, 87, 51), HSL (hsl(14, 100%, 60%)), HSV/HSB (hsv(14, 80%, 100%)), and CMYK (cmyk(0%, 66%, 80%, 0%)). The tool auto-detects the input format and converts to all others simultaneously.
What is the difference between HSL and HSV? ▸
Both use hue and saturation, but they define brightness differently. HSL (Hue, Saturation, Lightness) places pure colors at 50% lightness, with 0% being black and 100% being white. HSV (Hue, Saturation, Value) places pure colors at 100% value, with 0% being black. HSL is used in CSS; HSV is common in design tools like Photoshop and Figma.
Why does CMYK conversion look slightly different from print? ▸
Screen-to-print color conversion depends on ICC color profiles, paper type, and ink characteristics that vary by printer. This tool uses the standard mathematical CMYK formula, which gives a reasonable approximation but cannot replicate the output of a specific printer. For print-critical work, use a color-managed workflow in your design software.
Can I use the browser color picker? ▸
Yes. Click the color swatch next to the input field to open your browser's native color picker. Selecting a color updates all conversion outputs instantly.
Does it support alpha/transparency? ▸
The converter focuses on opaque color conversion between the five major formats. Transparency (alpha channel) is format-specific — RGBA and HSLA support it, but HEX-alpha and CMYK handle it differently or not at all. For consistent results, the tool converts the opaque color values only.
What does the 3-character HEX shorthand mean? ▸
A 3-character HEX code like #f53 is shorthand for #ff5533 — each character is doubled. The tool accepts both forms and always outputs the full 6-character version for clarity and compatibility.
Is my data sent to a server? ▸
No. All color math runs in JavaScript inside your browser. No color values or usage data are transmitted anywhere.