Color Converter

Enter a color in any format — Hex, RGB, HSL, HSB, or CMYK — and instantly see the equivalent values in all other formats. Use the color picker or type directly into any field.

Understanding Color Formats

Every digital color is ultimately a combination of red, green, and blue light — but designers, developers, and print specialists work with several different notations depending on the context. Here is what each format means and when you would use it.

How Each Color Model Works

Hex and RGB — the same model, different notation

Hex and RGB are two ways of writing the same thing. #6366f1 and rgb(99, 102, 241) are identical colors — the hex digits are just base-16 representations of the 0–255 integer values. Hex is preferred in CSS and HTML because it is compact; RGB is easier to read at a glance and is required by the JavaScript Canvas API and many image-processing libraries.

HSL — intuitive for designers

HSL separates color into three perceptually meaningful axes. Hue is the pure color angle: 0° = red, 120° = green, 240° = blue. Saturation controls how vivid the color is — 0% is gray, 100% is fully saturated. Lightness controls brightness — 0% is black, 100% is white, 50% is the pure hue. This makes HSL excellent for building design systems: you can create a palette of tints and shades by adjusting only the L value while keeping H and S constant.

HSB / HSV — the Photoshop model

HSB (also called HSV) looks similar to HSL but the third axis works differently. Instead of Lightness (where 50% = pure color), Brightness (Value) is 100% for the pure hue and 0% for black. This matches how the color picker in Photoshop and many other creative tools is laid out — a square where the horizontal axis is saturation and the vertical axis is brightness. Selecting colors in HSB is often more intuitive when you want to keep a color "vivid and bright" without accidentally washing it out the way a high HSL lightness value can.

CMYK — for print

CMYK is a subtractive color model used in color printing. Mixing cyan, magenta, yellow, and black inks subtracts wavelengths from white paper to produce color. The K channel (black) is separated from mixing C + M + Y because a pure black from ink mixtures is expensive, muddy, and slower to dry. Note that the CMYK values produced by this tool are mathematical conversions from the RGB color model; professional print work requires ICC color profiles for accurate reproduction, which vary by paper type and press.

Frequently Asked Questions

What's the difference between HSL and HSB?

Both use Hue and Saturation but differ in the third channel. HSL uses Lightness — a pure hue sits at 50% lightness, with black at 0% and white at 100%. HSB uses Brightness (or Value) — a pure hue sits at 100% brightness, with black at 0%. The same color has different HSL and HSB numbers, which trips up developers who move between CSS (which uses HSL) and design tools like Photoshop (which use HSB). If you need to check how your colors look against each other on screen, the Color Contrast Checker can test any two colors for WCAG accessibility compliance.

Can I use HSL colors directly in CSS?

Yes. CSS has supported the hsl() function since CSS3. Modern CSS also supports the newer oklch() and lab() color spaces, which offer even more perceptually uniform color manipulation. For day-to-day web development, hsl() is excellent for building design tokens and responsive palettes. Many designers also use the Color Gradient Generator to create smooth transitions between two HSL colors.

Why does my CMYK conversion look different from what my printer produces?

Screen colors (RGB) and print colors (CMYK) live in different gamuts — not every color visible on screen can be reproduced in print, and vice versa. The conversion this tool performs is a mathematical approximation. For professional print work, use an ICC color profile matched to your specific paper and press, and do your conversions inside a tool like Adobe Illustrator or InDesign that can apply those profiles accurately.

What does the # symbol mean in a hex color?

The # is simply a prefix that tells CSS and HTML parsers the following characters are a hexadecimal color value — it carries no numerical meaning itself. The six characters after it are three two-digit hex pairs: #RRGGBB. Shorthand three-character hex codes (e.g., #f0f) are equivalent to doubled pairs (#ff00ff). If you want to identify the CSS color name closest to any hex code you have, try the Color Name Finder.

What is the hex color for pure black and white?

Pure black is #000000 (R:0 G:0 B:0) and pure white is #ffffff (R:255 G:255 B:255). In HSL, black is any hue at 0% lightness and white is any hue at 100% lightness. In CMYK, black is 0% C, 0% M, 0% Y, 100% K, and white is 0% for all four channels.