Convert a color between HEX, RGB, HSL, HSV and CMYK with live two-way sync, in your browser.
Every color on a screen is the same physical thing — an amount of red, green and blue light — but designers, developers and printers describe it in different languages. HEX is compact and universal in CSS; RGB is the raw channel data; HSL and HSV describe a color the way a person thinks about it, as a hue plus how vivid and how bright it is; CMYK describes the four inks a press lays on paper. This converter holds one color in memory and shows it in all five languages at once.
Internally every input is normalised to RGB first. HEX parsing expands the three-digit shorthand (#fff becomes #ffffff) and ignores an alpha pair if you paste one. HSL and HSV use the standard chroma model: chroma comes from saturation combined with lightness or value, a secondary component comes from the hue's position inside its 60° sector, and a constant offset lifts the result to the right brightness. CMYK uses the classic screen conversion, where black is one minus the largest channel and each ink is the remaining distance to that black. The parser is deliberately forgiving — commas, spaces, slashes and percent signs are all optional, so rgb(255 0 0), 255,0,0 and #f00 land on exactly the same color.
Typical uses: turning a brand HEX into the HSL a CSS variable wants, reading the RGB a design tool asks for, or getting a rough CMYK to hand to a print shop. That last one deserves a warning. CMYK on screen is always an approximation: real printing depends on the ICC profile of the press, the ink set and the paper, and vivid screen colors — bright blues and greens especially — have no exact ink equivalent. Treat the CMYK here as a starting point, not a proof. Nothing you type is uploaded: the whole conversion runs in JavaScript on your device.
HEX is the hexadecimal notation of the three RGB bytes. HSL → RGB: chroma C = (1 − |2L − 1|) × S, secondary X = C × (1 − |(H/60) mod 2 − 1|), offset m = L − C/2; the triple (C, X, 0) is rotated according to the 60° hue sector and m is added to all three channels. HSV → RGB uses C = V × S and m = V − C. RGB → CMYK: K = 1 − max(R, G, B) and each ink = (1 − channel − K) / (1 − K).
HEX with or without the # (#fff, #ffffff, 3498db), rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), cmyk(), and about thirty common CSS color names such as red, teal or crimson. Separators are flexible: commas, spaces and slashes all work.
No — treat it as an approximation. The conversion here is the standard screen formula and ignores color profiles, while a real press uses an ICC profile that depends on the ink, the paper and the machine. Ask your print shop which profile they use before committing to a value.
Both start from the same hue angle but describe brightness differently. In HSL, 50% lightness is the pure color and 100% is always white; in HSV, 100% value is the pure color and you only reach white by dropping saturation. Design tools tend to expose HSV, while CSS uses HSL.
It reads the alpha channel and discards it. If you paste an 8-digit HEX or an rgba() value, only the opaque color is converted — the transparency is not carried into the other formats.
No. Every conversion runs in JavaScript on your device. Nothing is sent to a server, logged or stored.
Vai.la turns any URL into a short link with click statistics, QR Code and your own biolink.
Vai.la is not responsible for how the tools are used or for decisions made based on their results.