🎨 Color Converter: HEX to RGB, HSL, HSV and CMYK

What is the Color Converter?

HEX, RGB and HSL are three ways of writing the same thing: a single screen color. RGB is the most direct. It describes a color as three channels (red, green and blue) each running from 0 to 255, which is how displays actually emit light. (255, 0, 0) is full red, (0, 0, 0) is black, and (255, 255, 255) is white. HEX is simply RGB written in base 16 (hexadecimal) so it fits in a compact six-character string. A hex code like #337BFF splits into three pairs: 33, 7B and FF. Each pair is one channel converted to a two-digit hex number, so 33 is red 51, 7B is green 123, and FF is blue 255.

The mapping between a hex pair and a 0 to 255 value is pure base conversion. Hex digits run 0-9 then A-F, where A is 10 and F is 15. The left digit counts sixteens and the right digit counts ones, so the pair 7B is (7 x 16) + 11 = 123. The reverse, going from RGB to HEX, divides each channel by 16: the quotient is the first digit and the remainder is the second. Because two hex digits cover 0 to 255 exactly (16 x 16 = 256 values), every RGB color has one clean six-digit hex code.

HSL takes a different angle and is built for humans rather than hardware. It describes a color by hue, saturation and lightness. Hue is an angle from 0 to 360 degrees around a color wheel (0 is red, 120 is green, 240 is blue). Saturation is how vivid the color is, from 0 percent (gray) to 100 percent (fully colorful). Lightness runs from 0 percent (black) through the pure color at 50 percent to 100 percent (white). Designers reach for HSL because it is intuitive to tweak: to make a button darker on hover you just lower the lightness, and to build a palette you hold the hue and nudge saturation and lightness, which is awkward to do in raw RGB or HEX.

HSV, also called HSB (hue, saturation, brightness), is the cousin of HSL that you meet inside image editors like Photoshop and GIMP. It shares the same hue angle, but its value (or brightness) axis behaves differently from lightness: at 100 percent value the color is the pure, fully saturated hue rather than white, which is why the square swatch in a picker fades to white on one side and to black on the other. HSV and HSL describe the same gamut of colors and convert exactly, but they place those colors on different axes, so the same hue can have very different saturation numbers in each model.

CMYK belongs to a separate world: print rather than screen. Where RGB is additive (you add red, green and blue light to reach white), CMYK is subtractive (you layer cyan, magenta, yellow and a black key ink on white paper, and more ink means a darker result). Each CMYK channel is a percentage from 0 to 100. Converting RGB to CMYK is only an approximation because the two systems cover different ranges of color (gamuts) and real printing depends on the paper, inks and color profile, so treat any RGB to CMYK number as a starting point to refine against a printed proof, not an exact match.

Newer CSS color formats are worth knowing even though most day to day work still uses HEX and RGB. RGBA and 8-digit HEX (#RRGGBBAA) add an alpha channel for transparency, where alpha runs from 0 (fully transparent) to 1, or 00 to FF in hex. HSLA does the same for HSL. Modern browsers also support perceptual spaces such as OKLCH and LAB that keep brightness steadier across hues, which is handy for accessible palettes, but for everyday conversion between HEX, RGB, HSL, HSV and CMYK this converter has you covered.

When to use it

• Converting a brand hex code from a style guide into the rgb() value a design tool or CSS file expects.
• Turning an RGB value picked from a screenshot back into a tidy hex code to paste into HTML or CSS.
• Generating HSL so you can build hover and active states by shifting lightness while keeping the same hue.
• Getting an approximate CMYK breakdown so a screen color can be handed to a printer or used in a print layout.
• Reading the HSV or HSB numbers a photo editor like Photoshop or GIMP shows, so you can match a color across tools.
• Checking that a 3-digit shorthand hex expands to the full 6-digit value you intended.

How to use the Color Converter

1. Type or paste a color in any field: HEX (with or without the #), RGB, HSL, HSV or CMYK.
2. The other formats update automatically and the swatch shows the resulting color.
3. Use the color picker if you want to choose a shade visually instead of typing a code.
4. Copy the format you need (for example the rgb() string for CSS or the hex code for a design tool).

Formula & method

Worked examples

Common web colors in HEX and RGB

Same colors across HEX, HSL, HSV and CMYK

Hex digit to decimal value reference

Common mistakes to avoid

• Thinking the # is required. In CSS the leading # is part of the hex notation, but for conversion the digits are what matter. 337BFF and #337BFF are the same color, so the # is optional when you enter a value here.
• Mixing 3-digit and 6-digit hex. Shorthand like #3BF expands by doubling each digit to #33BBFF, not by padding with zeros. Treating #3BF as #03B0F0 gives a completely different color.
• RGB channels outside 0 to 255. Each RGB channel only goes from 0 to 255, since that is exactly what two hex digits cover. Values like 300 or negative numbers are invalid and cannot map to a hex pair.
• Confusing HSL percentages with the hue angle. Hue is an angle from 0 to 360 degrees, while saturation and lightness are percentages from 0 to 100. Writing the hue as a percentage breaks the color.
• Treating HSL and HSV as interchangeable. HSL and HSV share a hue but use different saturation and lightness or value axes, so the same color often has different numbers in each. Copying an HSV saturation into an HSL field shifts the color.
• Expecting RGB to CMYK to be exact. Screen RGB and print CMYK cover different color ranges, so any conversion is an approximation. Vivid blues and greens in particular look duller in print. Always confirm against a printed proof and your printer profile.

Glossary

HEX

A color written in base 16 as #RRGGBB, where each two-digit pair is one RGB channel from 00 to FF (0 to 255).

RGB

Red, green and blue channels, each from 0 to 255, describing how much of each primary light makes up the color.

HSL

Hue, saturation and lightness: a human-friendly model that describes a color by its tint, vividness and brightness.

Hue

The position of a color on the color wheel, given as an angle from 0 to 360 degrees (0 red, 120 green, 240 blue).

Saturation

How vivid or pure a color is, from 0 percent (gray) to 100 percent (fully colorful).

Lightness

How light or dark a color is, from 0 percent (black) through the pure color at 50 percent to 100 percent (white).

HSV / HSB

Hue, saturation and value (brightness): the model used in many image editors, where 100 percent value is the pure hue rather than white.

CMYK

Cyan, magenta, yellow and key (black) ink percentages used in printing. It is subtractive, so more ink gives a darker result.

Alpha

The opacity channel in RGBA, HSLA or 8-digit hex, from 0 (fully transparent) to 1, or 00 to FF in hex.

Gamut

The full range of colors a system can reproduce. Screen RGB and print CMYK have different gamuts, so some screen colors cannot be printed exactly.

Additive vs subtractive

RGB is additive (mixing light toward white), while CMYK is subtractive (layering ink on white paper toward black).

Frequently asked questions