Color Converter
Convert colors between HEX, RGB, HSL, and CMYK
Color Converter tool
Color Converter: key facts
- What it does
- Convert colors between HEX, RGB, HSL, and CMYK
- Category
- Converters
- Cost
- Free, with no account, sign-up, or install.
- Your data
- Runs entirely in your browser — the files and text you enter are never uploaded to a server.
- Last reviewed
- . Report an incorrect result.
What this tool is for
Every screen, printer, and design application speaks a slightly different color dialect. HEX codes power the web, RGB drives monitors and digital displays, HSL gives designers an intuitive way to adjust hue and lightness, and CMYK governs the inks used in offset printing. Jumping between them manually means running through formulas that are easy to get wrong — this converter keeps all four formats in sync simultaneously, updating every field the moment you change any one of them.
Front-end developers reach for it when a designer hands them a CMYK swatch from a brand guide and they need the HEX code for a stylesheet. Print designers need it when a client approves a web color and they must verify the CMYK build before sending to press. Illustrators and UI designers use the HSL view to tweak lightness without losing the hue. The live preview swatch lets you see the actual color immediately, so you know the conversion is correct before you copy anything.
All math runs entirely in your browser — no image files, no sign-up, no external service. Conversions use direct mathematical formulas: RGB to HSL via the max/min channel algorithm, RGB to CMYK via the standard ink-key calculation, and back again. The result is exact, not an approximation.
How to use the Color Converter
- Choose the format you are starting from and type or paste the value into that row — HEX as a six-digit code, RGB as three numbers 0–255, HSL as hue 0–360 and saturation/lightness 0–100%, or CMYK as four percentages 0–100%.
- All other format fields update instantly as you type.
- Watch the color swatch at the top to confirm the color looks correct.
- Click any Copy button to copy that format to your clipboard.
Hex, RGB, and HSL describe the same colour
Hex and RGB are the same information in different notation: each pair of hex digits is one byte for a channel, so parsing hex is reading three base-16 numbers. Converting back pads each channel to two digits so the result is always six characters.
HSL is a genuine transformation rather than a relabelling. It re-describes the colour as a hue angle around a colour wheel, a saturation percentage, and a lightness percentage — which maps far better onto how people think about colour. Making something lighter in HSL means changing one number; in RGB it means adjusting three in concert.
Because they describe the same colour, converting between them round-trips cleanly apart from small rounding at the edges.
- #FF0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%) — pure red.
- Lightness at 0% is black and at 100% is white, whatever the hue.
- Saturation at 0% gives a grey, and the hue value stops mattering.
What the Color Converter gets right
- True two-way conversion across all four formats in one step — changing any field syncs HEX, RGB, HSL, and CMYK simultaneously rather than requiring separate roundtrips.
- All conversion math runs in-browser with no external calls, so private brand colors and client work never leave your machine.
- The live color preview swatch gives instant visual confirmation that the color is correct before you copy it into a design file or stylesheet.
- No libraries required — the pure JavaScript formulas guarantee accuracy without dependency version drift.
Working in HSL, and the limits of these models
HSL is the more useful space for building a palette. Rotating the hue while holding saturation and lightness produces colours that belong together; adjusting lightness alone produces a tint or shade of the same colour. That is why design systems are usually defined in HSL even when they ship as hex.
The important caveat is that HSL lightness is not perceived brightness. Pure yellow and pure blue both sit at 50% lightness while looking dramatically different in brightness, because the underlying model is a simple geometric transformation of RGB rather than a model of human vision. Two colours at equal HSL lightness can therefore have wildly different contrast against the same background.
This matters for accessibility, where contrast ratios are calculated from relative luminance and must meet specific thresholds — 4.5:1 for normal text under WCAG AA. Judging contrast by lightness values will mislead you; measure it. Newer perceptually-uniform spaces such as OKLCH exist precisely to fix this, and are now supported in CSS. Note too that hex and RGB are device-dependent sRGB values, so wide-gamut displays and print need colour management rather than a numeric conversion.
Frequently Asked Questions
Why does my CMYK not match what I expected?
CMYK values calculated mathematically from RGB are "device-independent" — the real ink output depends on the print profile and paper. This tool gives you the mathematical CMYK equivalent, which is the right starting point, but always proof-print or use an ICC-profiled workflow for exact press results.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are related but different. In HSL, 50% lightness is a pure color while 100% is white; in HSB, 100% brightness is a pure saturated color. This tool converts to HSL, which CSS and most design tools understand directly.
Is my color data private?
Yes. All conversion happens locally in your browser — no color values are sent to any server. The tool works offline once the page has loaded.
Why are HEX codes six digits?
Each pair of hex digits represents one channel: the first pair is Red, the second Green, the third Blue. Hexadecimal (base 16) fits each channel's 0–255 range into exactly two characters (00 to FF), making HEX codes compact and universally understood in web and design contexts.
