What is the difference between HEX and RGB?

HEX is a six-digit hexadecimal representation of an RGB color. They represent the same color space in different notations — #3b82f6 equals rgb(59, 130, 246). HEX is shorter; RGB is easier to read as three separate channel values.

When should I use HSL instead of RGB?

HSL is easier to adjust intuitively. Increase the L (Lightness) value to lighten, decrease S (Saturation) to dull. Use HSL in CSS custom properties when you need to programmatically generate tints, shades or color scales.

What is CMYK and when is it used?

CMYK (Cyan Magenta Yellow Key/Black) is the color model used in printing. Printers mix physical ink in these four channels. Digital screens use RGB light; print uses CMYK ink. The same color value can look different between screen and print.

Can I paste a CSS color value directly?

Yes. Paste a HEX value (with or without #), an rgb() or hsl() function string, and the converter parses and converts it to all other formats automatically.

Why does the CMYK conversion look slightly different from my design software?

The mathematical conversion from RGB to CMYK is an approximation. Professional print software applies ICC color profiles for more accurate conversions. Use this tool for a close reference value and verify with your printer for critical print work.

How do I add transparency to a CSS color?

Use rgba() or hsla() with a fourth alpha value between 0 (fully transparent) and 1 (fully opaque): rgba(59, 130, 246, 0.5) for 50% transparent blue. In HEX, append two hex digits for alpha: #3b82f680.

🎨

Color Converter

Convert colors between HEX, RGB, HSL and CMYK formats instantly. Free, private.

🔄 Conversion Tools Free Browser-based

Tool

HEX

RGB

HSL

CMYK

Why Convert Between Color Formats?

Different tools and workflows use different color formats. A designer working in Figma copies a HEX code, but a CSS developer may need HSL for easy lightness manipulation. A print designer needs CMYK values, while a JavaScript developer working with the Canvas API needs RGB. Converting between formats manually requires knowing the math — this tool does it instantly. Paste any color in any format and get all four formats at once.

Color Format Comparison

Format	Used in	Example	Alpha support
HEX	CSS, HTML, design tools (Figma, Sketch)	#3b82f6	#3b82f680 (8 digits)
RGB	CSS, JavaScript Canvas API, image processing	rgb(59, 130, 246)	rgba(59, 130, 246, 0.5)
HSL	CSS, programmatic color manipulation	hsl(217, 91%, 60%)	hsla(217, 91%, 60%, 0.5)
CMYK	Print design, Illustrator, InDesign	cmyk(76%, 47%, 0%, 4%)	Not supported (print only)

Which Format Should You Use?

HEX — the default for CSS and HTML. Short, copy-pasteable, universally understood. Use for fixed brand colors.
RGB / RGBA — preferred when you need transparency (rgba(0,0,0,0.5)) or when manipulating colors in JavaScript.
HSL / HSLA — the best format for programmatic manipulation. Changing only the lightness value creates tints and shades without affecting hue — ideal for CSS custom properties and design systems.
CMYK — required for print work. Web colors (RGB) and print colors (CMYK) do not map 1:1, so some colors visible on screen cannot be reproduced in print.

HSL for Design Systems

HSL makes it trivial to create color scales. Keep Hue and Saturation fixed, then vary Lightness from 10% (very dark) to 90% (very light) to generate a full 9-step palette from a single base color — the same technique used by Tailwind CSS.

Color Converter

Why Convert Between Color Formats?

Color Format Comparison

Which Format Should You Use?

HSL for Design Systems

Frequently Asked Questions