Tool

Colour Converter

Q: What formats can I paste in?

Six-digit and three-digit HEX, rgb() and rgba(), hsl() and hsla(), and plain channel numbers separated by spaces or commas.

Q: Why is there a named colour shown?

For conversation, not for production. Saying teal is faster than dictating six characters, and named colours help when you are describing a direction to someone else. Always paste the exact value into the code.

Paste a colour in any format and read it in HEX, RGB, HSL and CMYK. Everything updates as you type, and every value is one click from your clipboard.

ConverterHEX, RGB, HSL and CMYK

Paste any colour

HEX, rgb(), hsl() and plain channel numbers are all accepted.

#2F6F62Nearest: Pine

Try one

Closest named colour: Pine #2A5D50. Named colours are handy for conversation, but use the exact value in production — the nearest name can be a long way from the colour you actually picked.

CMYK is a print model, so the numbers above are a straightforward mathematical conversion rather than a colour-managed one. For a real print job, ask your printer for their ICC profile and convert from there.

The four formats, and what each one is for

A colour is not a number; it is a physical result. The formats below are different ways of describing that result, and each one is convenient in a different context.

HEX

Six hexadecimal digits, prefixed with a hash. Two for red, two for green, two for blue, each from 00 to FF. It is the most compact common notation and the default in CSS, HTML and most design files. Its weakness is readability: #2F6F62 tells you almost nothing until you decode it.

RGB

Three decimal numbers from 0 to 255. Same information as HEX, but human readable, which makes it easy to nudge a single channel. If you are working in JavaScript, canvas, WebGL or a data visualisation library, this is usually the form the API expects.

HSL

Hue in degrees, saturation as a percentage, lightness as a percentage. The advantage is that the three values are independent: you can raise lightness without disturbing the hue, which is exactly what you need when generating tints, shades, hover states and dark mode variants.

CMYK

Cyan, magenta, yellow and black as percentages, used for ink. The model is subtractive — each plate removes light from the paper rather than adding it. Because the result depends on the stock and the press, a CMYK value is only meaningful alongside a profile.

Which format should you use?

A practical default for each situation, not a rule that must always be followed.
Situation	Use	Why
CSS and design tokens	HEX	Compact, universally supported
Opacity and overlays	RGB with alpha	Alpha is explicit and easy to tweak
Generating variants	HSL	Lightness and saturation move independently
Print artwork	CMYK with a profile	Matches how ink actually behaves
Describing a colour to a person	Nearest name	Faster than reading out six characters

About rounding

HEX and RGB are exact conversions of one another. HSL is a transform of RGB and is usually stored with whole numbers, so converting RGB → HSL → RGB can land one unit away from where it started. That shift is about 0.4 per cent of a channel and cannot be seen.

If you are round-tripping a value many times in code, keep the canonical form as HEX or RGB and derive HSL only for display. That way the rounding never accumulates.

Why the nearest name is not enough

Named colours exist for communication, not specification. There are only a few hundred names for sixteen million colours, so any name is at best an approximation — sometimes a very loose one. Use the name when you are describing a direction, and the exact value everywhere else. The contrast checker is a good place to see why: two colours that share a name can have completely different contrast against white.

Frequently asked questions

What is the difference between HEX and RGB?

Nothing fundamental. Both store the same three channel values; HEX writes them in base sixteen on one line, while RGB writes them in decimal as three separate numbers. Any HEX code can be converted to RGB without loss.

Can I convert HEX to CMYK accurately?

Not perfectly. HEX describes emitted light and CMYK describes ink on paper, so the conversion depends on the printer, the stock and the ICC profile in use. The value here is a standard mathematical approximation — good for a rough idea, not for a press check.

Why does HSL give different numbers from my design tool?

HSL is a transform of RGB, and some tools round differently or use HSV instead. A degree or a percentage of difference is normal and invisible in practice. If you need exact parity, work in the same colour space as the tool you are matching.

What formats can I paste in?

Six-digit and three-digit HEX, rgb() and rgba(), hsl() and hsla(), and plain channel numbers separated by spaces or commas.

Does the conversion lose accuracy?

HEX to RGB is lossless. RGB to HSL and back can shift by one unit because of rounding, which is far below what any screen can display. CMYK conversion is the only one that loses meaningful information, and that is inherent to the model.

Why is there a named colour shown?

For conversation, not for production. Saying “teal” is faster than dictating six characters, and named colours help when you are describing a direction to someone else. Always paste the exact value into the code.