Free Online Color Converter — HEX, RGB, HSL, CMYK

Convert colors instantly between HEX, RGB, HSL, and CMYK formats. This free color converter provides live preview and bidirectional conversion for web design, print, and graphic design workflows.

What Is a Color Converter?

A color converter translates color values between different formats used in digital and print design. Web developers use HEX and RGB, designers often work in HSL for intuitive color adjustment, and print production relies on CMYK.

Instead of manually calculating conversions or opening a design tool, this converter gives you every format at once — with a live preview so you can see exactly what color you're working with.

How to Use This Color Converter

1. Enter a color — Type a HEX value, or input RGB, HSL, or CMYK numbers.
2. See all formats — Every other format updates instantly.
3. Copy what you need — Click the copy button next to any format.
4. Use the preview — The color swatch shows the exact color with a contrast label.

Key Features

Feature	Benefit
4 format support	HEX, RGB, HSL, CMYK — all at once
Bidirectional conversion	Edit any format and the rest update
Live preview	See the exact color with its HEX label
Per-format copy buttons	One-click copy for each format
Print-ready CMYK	Get accurate CMYK values for print production

Understanding Color Formats

HEX

Hexadecimal color notation uses six characters (0-9, A-F) to represent red, green, and blue values:

• #FF0000 = red at full intensity
• #3B82F6 = Tailwind CSS blue-500

Common in CSS, HTML, and design tools. Always starts with #.

RGB (Red, Green, Blue)

Additive color model where each channel ranges from 0 to 255:

• rgb(255, 0, 0) = pure red
• rgb(59, 130, 246) = Tailwind blue-500

Used in CSS (rgb() function) and most programming contexts.

HSL (Hue, Saturation, Lightness)

A more intuitive model for adjusting colors:

• Hue (0-360): Position on the color wheel (0=red, 120=green, 240=blue)
• Saturation (0-100%): Intensity of the color (0%=gray, 100%=full color)
• Lightness (0-100%): Brightness (0%=black, 50%=normal, 100%=white)

Used in CSS (hsl() function) and preferred by designers for creating color palettes.

CMYK (Cyan, Magenta, Yellow, Key/Black)

Subtractive color model used in print production:

• Each value ranges from 0% to 100%
• Represents ink coverage on paper
• Not directly usable in CSS (browsers use RGB internally)

Essential for preparing designs for professional printing.

Color Format Comparison

Format	Use Case	Example	Range
HEX	Web CSS, HTML	#3B82F6	00-FF per channel
RGB	Web CSS, programming	rgb(59, 130, 246)	0-255 per channel
HSL	Design, CSS	hsl(217, 91%, 60%)	H: 0-360, S/L: 0-100%
CMYK	Print production	cmyk(76%, 47%, 0%, 4%)	0-100% per channel

Real-World Use Cases

Web Development

Copy HEX or rgb() values directly into your CSS. HSL is great for generating color scales (e.g., varying lightness for hover states).

Design Systems

Convert brand colors between formats. A designer gives you HSL from Figma — you need HEX for CSS. Done in one click.

Print Production

Convert screen colors to CMYK before sending to a printer. Note that some vibrant RGB colors cannot be perfectly reproduced in CMYK (the "gamut" is smaller).

Accessibility

Use the HSL lightness value to check if a color meets WCAG contrast requirements. Colors with lightness close to 50% tend to have the highest perceived contrast.

Tips for Working with Colors

Tip	Explanation
Use HSL for palettes	Fix hue, vary saturation and lightness to create harmonious color scales.
Short HEX works	#3BF is shorthand for #33BBFF. This converter accepts both.
Watch CMYK gamut	Bright blues and greens often shift when converted to CMYK. Always proof print colors.
CSS supports all formats	Modern CSS accepts HEX, rgb(), hsl(), and even hwb(). Use whatever is most readable.
Alpha transparency	For transparency, use rgba() or 8-digit HEX (#3B82F680).

Frequently Asked Questions

Why does my CMYK color look different on screen?

Screens display colors in RGB (additive), while print uses CMYK (subtractive). Some RGB colors — especially bright blues, greens, and oranges — fall outside the CMYK gamut and will appear duller in print.

Can I use this for CSS custom properties?

Yes. Copy the HEX, rgb(), or hsl() value and use it in your CSS variables: --primary: #3b82f6;.

What is the difference between RGB and HSL?

RGB represents color as amounts of red, green, and blue light. HSL represents color as hue (position on the color wheel), saturation (intensity), and lightness (brightness). HSL is more intuitive for adjusting colors — to make a color lighter, just increase the L value.

Does this converter support alpha/transparency?

This converter handles fully opaque colors. For transparency, use CSS rgba() or the 8-digit HEX format separately.

Is the conversion accurate?

HEX, RGB, and HSL conversions are mathematically exact. CMYK conversion is accurate for most colors, but note that the RGB-to-CMYK mapping depends on the color profile (sRGB, Adobe RGB, etc.) and this tool uses a standard approximation.

Does this tool store my data?

No. All calculations happen entirely in your browser. No color data is sent to any server.