Color Model Converter (RGB, HSL, HSV, CMYK)

Enter a HEX color code or pick one with the color picker to instantly convert it into RGB, HSL, HSV (HSB), and CMYK values, all shown side by side.

Last updated: 2026-09-06

How the color models differ

Model	Description	Typical use
RGB	An additive color model that mixes the three primary colors of light (red, green, blue), each on a 0-255 scale.	Displays, web development (CSS), and the base format used by most image editors.
HSL	Represents a color using hue, saturation, and lightness. It maps more closely to how humans intuitively describe color.	CSS's `hsl()` function, and adjusting hue/saturation in color-scheme tools.
HSV/HSB	Represents a color using hue, saturation, and value (brightness). Similar to HSL but with a different definition of the third axis.	The color pickers found in design tools such as Photoshop and Illustrator.
CMYK	A subtractive color model that overlays four inks: cyan, magenta, yellow, and a key (black) plate.	Print design and desktop publishing (DTP), where color is reproduced with ink on paper.

What converting between colour models means

Converting between colour models means expressing one and the same colour as numbers in different systems: RGB, HSL, HSV (also called HSB) and CMYK. RGB follows how a display emits light; HSL and HSV describe a colour along axes closer to human perception — hue, saturation and lightness or value; CMYK follows how printing inks layer over one another. The colour is identical, but the axis you are looking along is entirely different.

Give this tool a single colour, either as a hex code or through the colour picker, and it converts it into all four systems at once. That suits the situations a single conversion cannot cover: changing the notation used in CSS, reconciling how different design tools specify colour, or checking CMYK values for print — cases where you want to see several models side by side.

How to use the converter

Enter a hex colour code It accepts the code with or without the leading hash, and the three-digit shorthand such as #f60 works too.
Or pick a colour with the picker Whatever you choose is reflected automatically in the hex code field.
Check the colour in the preview The swatch lets you confirm visually that the value you entered has been read as you intended.
Read the RGB, HSL, HSV and CMYK results The figures for all four systems appear at the same time.
Use whichever values you need Copy them into a CSS hsl() function, check the CMYK values for print, or whatever the task calls for.

Tips for getting more out of it

The hex field accepts codes with or without a leading `#`, and both 3-digit shorthand (e.g. `#f60`) and 6-digit forms.
Any color you choose with the color picker is automatically reflected in the hex field, so you can pick colors visually while checking the exact numeric values.
If you want to set a background or text color in CSS using the `hsl()` function, you can plug the HSL values shown here directly into `hsl(H, S%, L%)`.
When preparing print artwork, keep in mind that the CMYK values shown here are a simplified conversion; the actual values used by a print shop's ICC profile may differ slightly.

When this converter is useful

Changing how a colour is written in CSS

Convert a hex code given in a design mock-up into the HSL values you need when you want to nudge the hue or saturation through the CSS hsl() function.

Checking indicative CMYK values for print

Before reusing a palette chosen for the web in printed material, looking at the CMYK equivalent makes the gap between screen and paper easier to notice. Where accurate reproduction matters, confirm the conversion separately against the printer’s ICC profile.

Carrying a colour between design tools

Photoshop, Illustrator and similar tools often present their colour picker in HSV (HSB), so when the numbers appear to disagree with a web colour code, this tool shows how they correspond.

Fine-tuning a palette

Breaking a colour into hue, saturation and lightness makes it much easier to see which way to adjust — keeping the hue and changing only the brightness, for instance. For building out detailed palettes, a dedicated palette generator is worth using alongside this.

Terms used with colour models

RGB: An additive model expressing colour by mixing red, green and blue light. Each component is given as a number from 0 to 255, and it is the basic way of specifying colour on displays and in CSS.
HSL: A model expressing colour through hue, saturation and lightness. Compared with the bare numbers of RGB, it makes brightness and vividness far more intuitive to adjust.
HSV (HSB): A model expressing colour through hue, saturation and value, or brightness. It resembles HSL but defines the third axis differently, and it is widely adopted in the colour pickers of tools such as Photoshop.
CMYK: A subtractive model expressing colour by layering four inks: cyan, magenta, yellow and the key plate, meaning black. It is what print design works in.
Hue: The kind of colour — red, green, blue and so on — given as an angle from 0 to 360 degrees. It is the axis HSL and HSV share, running in a circle from red through yellow, green, blue and violet and back to red.
Saturation: How vivid a colour is. Close to 0 per cent it approaches grey; close to 100 per cent it becomes a vivid pure colour.
Lightness and value: Lightness in HSL describes how much black or white is mixed in, whereas value in HSV describes how much black is mixed into the colour. It is the classic case of the same colour meaning different numbers in different models.
Key plate (K): The black ink component in CMYK. Cyan, magenta and yellow alone struggle to produce a deep black, so printing lays down black ink separately to make text and dark areas crisp.

Frequently asked questions

RGB represents a color by mixing the three primary colors of light, red, green, and blue, each on a 0-255 scale, and it's the basic format computers use internally. HSL re-expresses the same color using three axes that map more closely to human intuition, hue, saturation, and lightness, which makes adjustments like "a bit brighter" or "a bit more vivid" much easier to reason about.

HSV and HSL share the same hue (H) and saturation (S) axes, but define the third axis differently. HSL's lightness describes how much a color is mixed toward black or white, while HSV's value describes only how much black has been mixed into the color. When you want to pick a vivid, near-pure color, HSV tends to feel more intuitive, which is why it's the model used in the color pickers of tools like Photoshop.

In theory, mixing equal parts of cyan, magenta, and yellow ink should produce black, but real inks are never perfectly pure, so combining all three only produces a muddy brown. To get crisp, deep blacks (especially for text), the printing industry adds a dedicated black ink, the key plate, denoted K.

Displays create color through additive mixing, combining red, green, and blue light, so RGB, which is based on the primary colors of light, is a natural fit. Printing, on the other hand, works by subtractive mixing, layering inks on paper that absorb light, so CMYK, the ink primaries plus black, is used instead. Because the two processes work on different principles, colors on screen and colors in print don't always match exactly, a gap known as a difference in color gamut.

Side Note — the history behind these color models

The idea of additive color mixing behind RGB traces back to 19th-century color theory, but it only became widespread in computer graphics from the 1970s onward. Early color televisions and monitors created color by lighting up red, green, and blue phosphors on a cathode-ray tube, so RGB was adopted as the numeric model that mapped directly onto that physical hardware.

HSL and HSV were both devised by computer graphics researchers in the 1970s and 1980s to solve a specific usability problem: adjusting raw RGB numbers directly isn't intuitive for people. HSV in particular is well known for having been formalized in a 1978 paper by Alvy Ray Smith, who later became one of the co-founders of Pixar.

CMYK evolved alongside the history of printing technology and originates from a technique called four-color process printing. Because cyan, magenta, and yellow alone struggle to reproduce a deep, rich black, a dedicated key (black) plate was added to solve that print-specific limitation. CMYK remains the standard for offset printing, inkjet printers, and many other printing technologies to this day.

Browse all trivia