How to Convert Colors Between HEX, RGB, HSL and More

Why Color Formats Differ

A single color can be written a dozen different ways, and each representation exists because it makes a particular job easier. HEX and RGB describe a color as amounts of red, green, and blue light, which is exactly how screens produce color, so these two dominate web and UI work. HSL and HSV describe the same color in terms of hue, saturation, and lightness or value, which map much more closely to how people think about color, making them natural for picking and adjusting shades. CMYK describes color in terms of ink, cyan, magenta, yellow, and black, which is the subtractive model printers use. Because the formats describe the same underlying color, conversion between them is a deterministic mathematical operation, not a guess. That is the principle behind the Color Converter: one input value, and all the equivalent representations come back, ready to paste into whatever workflow needs them. The catch is that the formats are not perfectly interchangeable in practice. HEX, RGB, and HSL are all based on the same sRGB color space, so converting between them preserves the color exactly. CMYK is different: it depends on the printer profile, and its gamut, the range of colors it can reproduce, is smaller than a screen's, so some screen colors simply have no exact CMYK equivalent. Understanding these differences up front saves confusion later. If you are moving a color from a design tool into CSS, you can convert freely among HEX, RGB, and HSL. If you are sending a color to a print shop, expect CMYK conversion to involve some approximation.

HEX and RGB Explained

RGB is the direct representation: a color is three numbers, typically 0 to 255, for the intensities of red, green, and blue light that combine to produce it. Pure red is (255, 0, 0), pure green is (0, 255, 0), pure blue is (0, 0, 255), and white is (255, 255, 255). Mixing all three at equal intensities produces gray, and higher values mean more light, so (128, 128, 128) is mid-gray. HEX is just RGB written in base 16, or hexadecimal. The familiar hash sign is followed by six digits: the first two are the red channel in hex, the next two are green, and the last two are blue. The decimal value 255 becomes the hex value FF, so white is #FFFFFF and black is #000000. The color (76, 70, 229), a bright indigo, becomes #4C46E5 because 76 is 4C in hex, 70 is 46, and 229 is E5. Converting between the two is a two-step operation per channel. To go from HEX to RGB, split the six digits into pairs, then convert each pair from base 16 to base 10. To go the other way, convert each channel from 0 to 255 into a two-digit hex number, prefixing a zero when the value is below 16, so a channel value of 9 becomes 09. A six-digit HEX code is almost always fine for web work, but an eight-digit form exists too: #RRGGBBAA, where the last two digits are the alpha channel. A leading FF means fully opaque and 00 means fully transparent.

HSL Explained

HSL splits a color into three perceptual properties: hue, saturation, and lightness. Hue is measured in degrees around a color wheel, from 0 (red) through 60 (yellow), 120 (green), 180 (cyan), 240 (blue), 300 (magenta), and back to 360, which is red again. Saturation, from 0 to 100 percent, describes how vivid the color is, and lightness, also 0 to 100 percent, describes how close it is to black or white. The key benefit of HSL is that it makes intuitive adjustments possible. To darken a color, lower the lightness. To gray it out, lower the saturation. To shift it toward a neighboring color, change the hue by a few degrees. None of these operations are obvious in RGB, where a small visual change can require adjusting all three channels in unrelated ways. Converting from RGB to HSL involves a known algorithm. Find the minimum and maximum of the three channels. The lightness is half the sum of the max and min, scaled. Saturation depends on how far the max and min are apart relative to the lightness, and hue is derived from which channel is the max, with a correction for the position around the color wheel. The math is fiddly enough that doing it by hand is not recommended, which is exactly why a converter is useful. HSL also appears in CSS as hsl(hue, saturation, lightness), with modern CSS adding an alpha parameter such as hsl(240 60% 50% / 0.5) for a half-transparent blue. Once you can read that syntax, you can tweak design tokens directly in a stylesheet.

CMYK and Print

CMYK is the subtractive color model used by printers. Instead of light being added, ink absorbs light, so the primaries are the opposites of RGB: cyan, magenta, and yellow, plus black to deepen shadows and reduce ink use. A printed page with cyan, magenta, and yellow ink at full strength produces a muddy dark brown rather than a clean black, which is why black gets its own channel. Screens and paper cannot reproduce the same colors. A monitor emits light and can produce colors that glow beyond what ink can match, such as vivid neon greens and cyans. Printers have a smaller gamut, and the exact gamut depends on the ink and paper profile, so converting a screen color to CMYK always involves approximation. Colors that are simply out of printable range get clamped to the nearest representable value. When you design for print, convert your palette to CMYK early rather than late. Software built for screen work will happily let you pick a color that cannot be printed, and discovering that after printing is expensive. Converting in advance and checking the closest CMYK equivalents lets you make deliberate choices about which shades will survive the move. If you are sending files to a professional printer, they will generally want CMYK values with a specific color profile, such as Coated FOGRA39, and they will often convert the file themselves. For casual print, the generic CMYK conversion the Color Converter provides is usually a good starting point.

Alpha and Transparency

Every color format discussed so far has an alpha variant that adds transparency, and the meaning of alpha is consistent across them: 255, or 100 percent, is fully opaque, and 0 is fully invisible. RGB and HEX use the 0 to 255 scale, while HSL and CSS use percentages. Alpha matters in CSS because it lets a color blend with whatever is behind it. A headline using rgba(255, 0, 0, 0.5) over a white background appears pink because half the red light passes and combines with the white behind it. The same color over a black background appears dark red. The visual result depends on the backdrop, which is why overlapping semi-transparent elements are a frequent source of surprise in UI work. When you convert a color with alpha to a format that cannot represent it, you must decide what to do with the transparency. A standard approach is to flatten the color onto a background, usually white, computing the blended result in advance. The converter's job is to keep alpha in formats that support it and to flag when an output format drops it. A related trap is the shorthand forms. Eight-digit HEX and the modern CSS color syntax can represent alpha, while six-digit HEX and plain CMYK cannot. Before you paste a converted value, check that the destination format actually carries the transparency you need.

How to Convert a Color

The Color Converter takes any supported format as input and returns every equivalent representation in one screen, which is far faster than converting each pair by hand. It also includes a color picker for fine-tuning, and the alpha channel is preserved where the output format supports it. Like everything else on this site, the conversion runs entirely in your browser, so your values go nowhere.

1. 1Open the Color Converter tool.
2. 2Paste a HEX code like #4F46E5, or enter RGB, HSL, or another supported format.
3. 3Use the color picker to fine-tune the shade if the pasted value is not quite right.
4. 4Check the alpha setting so transparent colors keep their transparency.
5. 5Copy the value in the format your project needs, such as hsl() for a CSS variable or HEX for a design file.

Common Mistakes and Accessibility Tips

Most color conversion mistakes come from assuming the formats are interchangeable when they are not. The first is treating CMYK as a lossless conversion of RGB; it is not, and out-of-gamut colors change. The second is dropping alpha silently: converting an eight-digit HEX to a six-digit HEX deletes transparency, so check the destination format. The third is reading HEX digits as decimal, confusing a pair like 99 with the decimal value 153 that 99 in hex represents. A practical workflow tip: keep all the colors in a project in one canonical format in your design tokens, and convert only when you need a different representation for a specific consumer. This prevents the subtle drift that happens when the same color exists in RGB in one file and HSL in another. Finally, pair conversion with accessibility. Once you have a color in a comparable format, run a contrast check between text and background colors, targeting a WCAG AA ratio of 4.5 to 1 for body text and 3 to 1 for large text. A color can look beautiful and still fail readability; contrast, not preference, is what makes text usable for people with low vision. The Color Converter gets you the exact values quickly, but the decisions about which color to use and whether it passes contrast remain yours. Use the tool for the math and the checkers for the judgment.