Color Converter
Convert colors between HEX, RGB, HSL and CMYK formats.
The Color That Looks Different on Screen and in Print — Why It Happens
A web designer picks a vibrant orange (#FF6600) in CSS, the client approves it on-screen, the brochure goes to print — and the printed orange looks muddy and dull. This is the gamut mismatch problem, and it trips up even experienced designers who treat HEX and CMYK as interchangeable representations of the same color.
They are not. HEX and RGB describe colors produced by emitting light (additive color). CMYK describes colors produced by absorbing light with ink on paper (subtractive color). The sRGB color space — the default for screens — contains colors that physically cannot be reproduced with CMYK inks. Highly saturated greens, cyans, and oranges are typical casualties. When a printer's RIP (raster image processor) converts out-of-gamut RGB colors to CMYK, it desaturates them to fit the printable range, which is why that vibrant orange turns flat.
Understanding Each Color Model
HEX is a compact way to write RGB values in hexadecimal. #FF6600 means R=255 (FF), G=102 (66), B=0 (00). The 6-digit HEX range covers 256³ = 16,777,216 colors. It is the dominant format in CSS and HTML because it is compact and easily copy-pasted.
RGB works by mixing red, green, and blue light. 0 means no light in that channel; 255 means full intensity. Pure red is (255, 0, 0). All three at 255 gives white; all at 0 gives black — opposite to ink behavior.
HSL (Hue, Saturation, Lightness) maps the same sRGB space to a human-intuitive coordinate system. Hue is the color angle (0°=red, 120°=green, 240°=blue). Saturation controls how vivid the color is. Lightness controls brightness from black (0%) to white (100%). HSL is valuable in code when you want to create color variants — darkening a button on hover, for example, is a single Lightness adjustment rather than recalculating all three RGB channels.
CMYK is the standard for offset printing. C=0, M=0, Y=0, K=0 is white paper; K=100 is black ink. Most printers prefer CMYK source files because converting RGB to CMYK in-house introduces rendering variability. If you are submitting files to a commercial printer, ask for their ICC profile and do the conversion in Photoshop or Illustrator before sending — do not leave it to the printer's software.
HSL vs. HSB/HSV — The Confusion That Never Dies
Adobe Photoshop uses HSB (Hue, Saturation, Brightness), also called HSV (Value). CSS uses HSL (Hue, Saturation, Lightness). They use the same Hue axis but define Saturation and the third dimension differently, so the same numeric values produce different colors. HSB Brightness=100% at any hue gives you the most vivid possible version of that color. HSL Lightness=50% at full saturation gives the same vivid color; Lightness=100% always gives white regardless of hue. Confusing HSB values with HSL inputs is a common source of subtle color inaccuracy when copying color values between Photoshop and CSS.
How to Use This Tool
- Enter a color value in any format: HEX (#RRGGBB), RGB (r, g, b), HSL (h°, s%, l%), or CMYK (c%, m%, y%, k%).
- All other representations update instantly.
- A live color swatch confirms the visual result.
⇄ FAQ
01 Why does converting a bright RGB color to CMYK produce a duller result? +
Highly saturated RGB colors often fall outside the CMYK gamut — the range of colors ink on paper can reproduce. The converter maps out-of-gamut values to the nearest printable equivalent, which is less saturated. This is not a bug; it reflects a physical limitation of ink.
02 What is the difference between HSL and HSB used in Photoshop? +
HSL (Lightness) and HSB (Brightness) use the same hue axis but define the third channel differently. In HSL, 50% lightness at full saturation is the most vivid form of the color; 100% lightness is always white. In HSB, 100% brightness at full saturation is the most vivid color. Copying HSB numbers into an HSL field produces a different color.
03 Is HEX always 6 digits? What are the 3-digit HEX codes I sometimes see? +
CSS allows a 3-digit shorthand where each digit is doubled: #F60 expands to #FF6600. This only works when both digits of each channel are identical, so #FF6600 shortens to #F60 but #FF6601 cannot be shortened.
04 How do I get the most accurate color match between screen and print? +
Use a color-managed workflow: obtain your printer's ICC profile, set your design software to work in that color space, and perform a soft proof before sending files. Never rely on a screen preview alone for color-critical print work, since monitors vary in their color accuracy.
