HEX, RGB, HSL, HSV or CMYK: Which Color Format Fits the Job?

Use HEX for CSS and sharing colors, RGB when you need transparency or separate channel numbers, HSL for creating lighter and darker variations, HSV for working with color picker interfaces, and CMYK only as a rough reference for print. They're different ways of describing a color, and four of them (HEX, RGB, HSL, HSV) describe exactly the same screen color, so the choice is about convenience, not accuracy.

Here's one color in all five formats, then a tour of where each one earns its place.

One color, five notations

Take the CSS named color coral. In the Color Converter, it comes out as:

Format	Value	What the numbers mean
HEX	#ff7f50	Red, green, blue as two hex digits each (00–ff)
RGB	rgb(255, 127, 80)	Red, green, blue from 0 to 255
HSL	hsl(16, 100%, 66%)	Hue angle, saturation, lightness
HSV	hsv(16, 69%, 100%)	Hue angle, saturation, value (brightness)
CMYK	cmyk(0%, 50%, 69%, 0%)	Cyan, magenta, yellow, black ink percentages

HEX: the lingua franca

Best for: CSS, design tokens, style guides, sharing a color in a message.

HEX is compact, easy to copy and searchable in a codebase: find every use of #ff7f50 with one search. Nearly every design tool shows it. Its weakness is that you can't adjust it by eye; nobody knows offhand what "10% darker" is in HEX.

RGB: when you need the channels

Best for: transparency in CSS, canvas and image code, office and presentation software.

Writing rgb(255 127 80 / 50%) is the readable way to make coral semi-transparent. RGB is also what image-processing code, canvas APIs and many office color dialogs work with directly. The HEX to RGB guide covers the CSS transparency patterns in detail.

HSL: when you need variations

Best for: theming, hover states, shade scales, dark mode.

Because lightness is its own number, hsl(16, 100%, 66%) → hsl(16, 100%, 50%) gives you a deeper coral without touching the hue. That makes HSL the friendliest format for generating related colors in CSS.

HSV: the color picker's format

Best for: understanding and matching values in design app color pickers.

Many graphics apps use a picker made of a square and a hue slider: horizontal position is saturation, vertical is "value" (brightness), and the slider sets hue. That's HSV (sometimes called HSB). The key difference from HSL: in HSV, a fully bright, fully saturated color is 100% value; in HSL, it's 50% lightness. Coral's 100% value tells you it's at the top of the picker square. CSS has no hsv() function, so use it to communicate with design tools, not in stylesheets.

CMYK: a starting point for print, nothing more

Best for: a ballpark when talking to a printer, or spotting colors that won't print well.

The CMYK values are a straightforward mathematical conversion. Real printing depends on the paper, inks and the printer's color profile, and many bright screen colors simply can't be reproduced in ink. Use these numbers for orientation, then get proofs or official values from your print shop or brand guide.

Practical jobs, matched to formats

Job	Use
Paste a brand color into CSS	HEX
Semi-transparent overlay or hover tint	RGB with alpha
Build a 5-step shade scale	HSL
Match a color shown in a design app's picker	HSV
Brief a print shop on a color	CMYK (as a starting point)
Describe a color in a quick prototype	A CSS color name

Color names: handy, with a few surprises

The converter accepts common CSS names such as navy, teal, coral, crimson, gold and rebeccapurple, ignoring capitalization and extra spaces. Two surprises worth knowing:

• CSS green is #008000, a fairly dark green. The bright pure green #00ff00 is called lime.
• gray and grey are both accepted and both mean #808080.

Not every one of CSS's named colors is recognized; if a less common name like cornflowerblue isn't accepted, enter its HEX or RGB value instead.

How to convert a color step by step

1. Type any color into Color (HEX, RGB, HSL or name): #ff7f50, rgb(255, 127, 80), hsl(16, 100%, 66%) or coral. Or use the Picker.
2. All five formats update instantly, next to a preview swatch.
3. Click Copy next to the one you need.

Conversions run in your browser.

FAQ

Does converting between formats lose quality?

HEX and RGB convert perfectly both ways. HSL and HSV are shown as whole numbers, so converting from them back to RGB can be off by one step in a channel, which is invisible on screen.

Which format do designers and developers use most?

HEX for handing over colors, and increasingly HSL or RGB variables inside CSS for theming.

Can I convert CMYK back to HEX here?

No. CMYK is output only, because the conversion depends on print conditions the calculator can't know.

Paste any color into the Color Converter and copy the format your next task needs.