What is the difference between RGB and HEX color formats?

RGB and HEX represent the same colors — just in different notations. RGB uses three decimal numbers (0–255) for red, green, and blue: rgb(255, 128, 0). HEX uses a hash followed by six hexadecimal digits: #ff8000. Each pair of hex digits represents one channel (ff = 255, 80 = 128, 00 = 0). They are interchangeable — choose the format your tool or language expects.

What is HSL color format?

HSL stands for Hue, Saturation, Lightness. Hue is the color angle on a color wheel (0–360 degrees: 0=red, 120=green, 240=blue). Saturation is the color intensity (0%=grey, 100%=full color). Lightness is brightness (0%=black, 50%=normal, 100%=white). HSL is more intuitive for designers because adjusting lightness or saturation is straightforward without changing the hue.

Why do some CMYK colors look different when printed?

RGB monitors emit light and can display very bright, saturated colors outside the printable CMYK gamut. When these out-of-gamut colors are converted to CMYK, they are clipped or mapped to the nearest printable color, which may appear less vivid on paper. Always soft-proof designs in your application before sending to press.

Color Converter - HEX RGB HSL CMYK Online

Q: What is CMYK and when is it used?

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is a subtractive color model used in color printing. Unlike RGB (which adds light), CMYK subtracts ink from white paper. Print designers specify colors in CMYK to ensure accurate printed output. Note that CMYK has a smaller color gamut than RGB — some bright RGB colors cannot be reproduced accurately in print.

Q: How do I convert HEX to RGB manually?

Split the hex string into three pairs, then convert each from base-16 to decimal. Example: #1a2b3c → R = 0x1a = 26, G = 0x2b = 43, B = 0x3c = 60 → rgb(26, 43, 60). This converter handles the calculation automatically.

What Is a Color Converter?

A color converter translates a color from one format to another — such as from HEX to RGB, or RGB to HSL. Different tools and contexts use different color formats: web CSS uses HEX and RGB, design tools often use HSL for its intuitive controls, and print workflows use CMYK. This converter lets you move between all four formats instantly with a live preview.

How to Use This Color Converter

Edit any field in any format — HEX, RGB sliders, HSL sliders, or CMYK sliders — and all other formats update automatically. The large color swatch shows a live preview. Use the native color picker to choose a color visually. Click Copy on any format card to copy that format's value to your clipboard.

Color Format Formulas

HEX ↔ RGB

HEX to RGB: Split #rrggbb into pairs and convert each from base-16 to decimal.

RGB to HEX: Convert each decimal (0–255) to a two-character hex string with toString(16).padStart(2,'0').

Example: #3b82f6 → R = 0x3b = 59, G = 0x82 = 130, B = 0xf6 = 246 → rgb(59, 130, 246)

RGB ↔ HSL

Normalise RGB values to 0–1 range. Find max and min channel values. Compute Lightness = (max+min)/2. Saturation = (max−min)/(1−|2L−1|). Hue depends on which channel is max.

RGB ↔ CMYK

RGB to CMYK: K = 1 − max(R,G,B)/255. C = (1 − R/255 − K) / (1 − K). M = (1 − G/255 − K) / (1 − K). Y = (1 − B/255 − K) / (1 − K).

CMYK to RGB: R = 255 × (1−C) × (1−K). G = 255 × (1−M) × (1−K). B = 255 × (1−Y) × (1−K).

Frequently Asked Questions

What is the difference between RGB and HEX?

Both represent the same colors — RGB uses decimal numbers (e.g. rgb(255, 128, 0)) and HEX uses hexadecimal (e.g. #ff8000). Each pair of hex digits maps to one RGB channel. They are interchangeable — choose the format your tool expects.

What is HSL?

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive for design: to make a color darker, decrease Lightness; to desaturate it, decrease Saturation — without touching Hue. HSL is supported in all modern CSS browsers.

What is CMYK and when is it used?

Cyan, Magenta, Yellow, Key (Black). Used in color printing — subtractive color model where inks on white paper absorb light. Designers specify CMYK for print materials. Note: some bright RGB/screen colors are outside the CMYK gamut and cannot be reproduced exactly in print.

How do I convert HEX to RGB manually?

Split the 6-digit hex into pairs: #1a2b3c → 1a, 2b, 3c. Convert each: 0x1a = 26, 0x2b = 43, 0x3c = 60 → rgb(26, 43, 60). This converter does it automatically.

Why do CMYK colors look different on screen vs. print?

Screens emit light (additive RGB) and can display vivid colors outside the printable CMYK range. When converted, out-of-gamut colors are mapped to the nearest printable color, which may appear less vivid. Always soft-proof in your design application before printing.