Article — Color Converter (HEX, RGB, HSL, CMYK)
Color Converter Calculator
A color converter translates between HEX, RGB, HSL, HSV, and CMYK so the same color can be used in CSS, JavaScript, Figma, Photoshop, and print. The most common conversions are HEX to RGB (#FF8000 to rgb(255, 128, 0)) and RGB to HSL (rgb(255, 128, 0) to hsl(30, 100%, 50%)). All of these describe identical colors; the formats differ in math and use case.
The calculator shows every format at once. Type a HEX code or move the R, G, B sliders, and the swatch updates instantly. The output panel lists HEX, RGB, HSL, HSV, CMYK, and decimal so you can copy whichever your design tool, code editor, or print proof needs.
What is a color converter?
A color converter is a tool that takes a color expressed in one notation and outputs the same color in another notation. The hardware, software, and people who consume colors use different formats: web browsers prefer HEX or HSL, JavaScript prefers RGB tuples, art software defaults to HSV, and commercial print runs on CMYK plates. Converting between them is constant work for any designer.
Each format encodes the same underlying spectrum but with different axes. HEX is compact (6 characters), RGB is additive (red, green, blue light), HSL is intuitive for adjustment (hue, saturation, lightness), and CMYK is subtractive (cyan, magenta, yellow, black ink). The math to convert between them is well-defined and lossless for most colors.
HEX to RGB color conversion
HEX is shorthand for RGB. The 6-digit HEX code is three 2-digit hexadecimal numbers, each representing one RGB channel from 0 to 255. So #FF8000 splits into FF (255 red), 80 (128 green), and 00 (0 blue). The conversion is purely a base change (16 to 10) and is exact in both directions.
This is why HEX is the default in CSS and brand style guides. The 6-character string is compact, unambiguous, and trivially parsed by every web browser. The downside is that HEX is hard to read: #FF8000 does not visually communicate "bright orange" the way hsl(30, 100%, 50%) might to a trained eye.
#000000 black (0, 0, 0)#FFFFFF white (255, 255, 255)#FF0000 pure red (255, 0, 0)#00FF00 pure green (0, 255, 0)#0000FF pure blue (0, 0, 255)RGB to HSL color conversion
HSL turns the RGB cube into a cylinder. Hue is an angle from 0° (red) through 120° (green) and 240° (blue) back to 360° (red again). Saturation runs 0% (gray) to 100% (full color). Lightness runs 0% (black) to 100% (white), with 50% as the pure-color midpoint.
HSL is the format designers reach for when adjusting an existing color. Want a darker shade? Lower the L. Want a less saturated version? Lower the S. Want a complementary color? Add 180° to the H. The same operations in RGB require coordinated changes to all three channels, which is why HSL is winning ground in modern design systems.
- H = 0° = red
- H = 60° = yellow
- H = 120° = green
- H = 180° = cyan
- H = 240° = blue
- H = 300° = magenta
- S = 0% = grayscale (any L)
- L = 50% = pure color (any H)
RGB to CMYK color conversion for print
CMYK is the standard for commercial print. Cyan, magenta, yellow, and key (black) inks combine on white paper to produce the full color range printers can reproduce. The conversion from RGB to CMYK first calculates the black key as 1 minus the brightest RGB channel, then derives C, M, and Y as the complement of each remaining channel, scaled.
The catch: CMYK has a smaller gamut than RGB. Many bright, saturated colors visible on a screen cannot be printed in process inks at all. Designers handle this by previewing in soft-proof mode using an ICC color profile that simulates the press output, then adjusting any out-of-gamut colors manually.
The same RGB-to-CMYK conversion gives different printed results on different presses. Pantone spot colors exist to bypass this by using premixed inks. For brand color matching, specify both a CMYK value and a Pantone reference.
Which color format should I use?
The format depends on the destination. For CSS and web design, HEX is the de facto standard, with HSL gaining ground for design tokens that need adjustment. For JavaScript and image processing, RGB tuples are easiest to manipulate numerically. For graphic design and photo editing, HSV (in Photoshop) or HSL (in Figma) lets designers think in terms of hue families rather than channel mixes.
For print, CMYK is the only correct format. Sending an RGB file to a press triggers automatic conversion that may give unexpected results, so do the conversion yourself with a soft proof and adjust the out-of-gamut colors before sending.
Color accessibility and contrast
WCAG (Web Content Accessibility Guidelines) requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text against the background. The contrast ratio depends on the relative luminance of the two colors, which is calculated from gamma-corrected RGB values.
About 8% of men and 0.5% of women have some form of color blindness, most commonly red-green. Avoid using only color to convey meaning (use icons or labels too), and check your palette in a colorblindness simulator. Tools like WebAIM Contrast Checker accept HEX input and report pass/fail for each WCAG tier.
The K in CMYK stands for "key" (the key plate that held the black ink for registration), not for "black." The letter B was already taken by blue in RGB. Without the K plate, CMY produces a muddy brown rather than a clean black, which is why the fourth ink is needed.
Common color converter mistakes
The first mistake is assuming RGB to CMYK is lossless. It is not. CMYK cannot reproduce many bright RGB colors, especially saturated greens, blues, and oranges. The converter gives a best approximation, but the printed result will desaturate.
The second mistake is confusing HSL with HSV. Both have H and S, but L (lightness) and V (value) behave differently. HSL 50% L is the pure color; HSV 100% V is the pure color. Tools like Figma show HSL while Photoshop shows HSV, which can confuse designers switching between them.
The third mistake is forgetting that web browsers default to sRGB color space. If your design tool uses a wide-gamut profile like Display P3, the same HEX value renders differently on different screens. For pixel-perfect cross-device color, embed an ICC profile or stick to sRGB.
Modern CSS supports color-mix() and oklch() functions that give better perceptual control than HSL. The OKLCH model addresses HSL's quirk where blues at the same L look much darker than yellows. For new design systems, consider OKLCH as a default.