MSRX Tools

Color Converter

One colour, every notation — HEX, RGB, HSL, OKLCH, CMYK.

Everything runs inside your browser. Your files never leave your device.

Input

Result

The result appears here as you type.

Ask about Color Converter

Questions about what this tool does, which option to pick, or what it can and cannot handle.

The question you type here is sent to an AI provider to be answered — your files and whatever you put in the tool above are not, and the assistant cannot see them. Answers are generated and can be wrong. The tool itself is not guessing: it runs deterministic code on your device.

About the Color Converter

The same colour is written four or five different ways depending on where it is going. A designer hands over a hex code, CSS wants HSL to adjust a lightness, a print job needs CMYK, and a native app wants RGB components. Converting between them is arithmetic that has no business being done by hand.

This converts between hex, RGB, HSL, HSB and CMYK, in every direction, and accepts input in whichever notation you happen to have.

HSL earns its place in day-to-day work more than the others. Hue, saturation and lightness are the axes people actually think in: a hover state is the same colour a little darker, a disabled state is the same colour desaturated, a palette is one hue at several lightnesses. Doing any of that in hex means guessing at six digits. Doing it in HSL means changing one number, and it is why CSS custom properties are so often stored as HSL components.

CMYK carries a caveat the tool states rather than hiding. The conversion here is the standard arithmetic formula, which is not what a print shop will use. Real print conversion depends on an ICC profile describing the specific press, ink and paper, and the same CMYK values produce visibly different results on different stock. Treat the numbers here as an approximation for reference, and let the printer's own profile do the real conversion.

A related point on gamut: a vivid screen colour often has no CMYK equivalent at all. Print covers a smaller range than a display, and a bright cyan or a saturated orange will come back duller. That is not the conversion failing — it is the ink telling you what it can do.

How to use it

  1. 1Enter a colour in any notation — hex, an rgb() string, an hsl() string, or plain components.
  2. 2Read the equivalents in every other format below.
  3. 3Work in HSL when you need a variation: adjust the lightness for a hover state, the saturation for a disabled one.
  4. 4Treat the CMYK figures as a reference only, and let a printer's ICC profile do the real conversion.

Questions

Why do the CMYK numbers not match what my printer produces?
Because a real conversion uses an ICC profile for that specific press, ink and paper, while this uses the standard formula. The result here is a reasonable reference; it is not a proof, and no formula can be.
What is the difference between HSL and HSB?
The third component. In HSL, 100% lightness is white; in HSB, 100% brightness is the most vivid version of the hue. Design applications tend to use HSB, CSS uses HSL, and confusing them produces colours far lighter or more vivid than intended.
Does an eight-digit hex code work?
Yes. The last two digits are the alpha channel, and they are preserved through the conversion where the target format can express transparency.
Why did my bright screen colour come back dull in CMYK?
Because it is outside the printable gamut. Displays emit light and cover a wider range than ink on paper reflects. Vivid cyans, oranges and greens are the usual casualties, and no conversion can recover them.