Color Converter — Convert Colors Between HEX, RGB, HSL, and CMYK
Convert colors between HEX, RGB, HSL, and CMYK with a live preview. Live swatch and accessibility contrast check, all in your browser.
Color is a single visual perception encoded in four different ways depending on the medium. Screens speak RGB (red, green, blue channels, 0-255 each). Web code speaks HEX (RGB in base-16, #3B82F6). Designers and color pickers speak HSL (hue, saturation, lightness — a more intuitive model for picking a tint or a shade). Print speaks CMYK (cyan, magenta, yellow, key/black — a subtractive model that mixes pigments instead of light). Each model is right for its medium, and the conversions between them are not exact: RGB and HEX are the same color in different notations, HSL is a different parameterization of the same RGB color space, and CMYK is a smaller gamut that cannot represent every RGB color.
The non-obvious thing about color conversion is that the four models are not equally expressive. RGB and HEX can represent every color a screen can show, full stop — about 16.7 million distinct values. HSL is a re-parameterization of RGB, so it represents the same 16.7 million colors, just grouped by perceptual properties. CMYK is subtractive and represents only the colors that can be reproduced by overlaying cyan, magenta, yellow, and black inks — roughly 70 percent of the sRGB gamut. Saturated blues and greens that show up perfectly on a screen often print as muddier versions, and the only way to know which is to look at a printed proof or use a color-managed workflow.
For a final hand-off: if you are picking a color for a website, HEX and RGB are the formats you will use in CSS; HSL is the friendlier input format for picking tints and shades. If you are sending a color to a print shop, the CMYK value here is a starting point — bring the source file (PDF, AI, INDD) and let the shop’s color management produce the final ink mix. If you are designing for accessibility, the contrast ratio check is the part that matters most: a beautiful color that fails WCAG is not a usable text color.
How to use
Enter a color in any format
Type a HEX code (#3B82F6), an RGB triplet (59, 130, 246), an HSL value (217°, 91%, 60%), or paste from a design tool. The input is auto-detected from the format you type.
Read all four formats at once
The output panel shows HEX, RGB, HSL, and CMYK values for the same color. The live swatch on the right updates as you type, so you can see the color in real time.
Check the contrast ratio
The accessibility panel shows the WCAG contrast ratio against white and black backgrounds, with AA/AAA pass/fail badges for body text and large text. Useful for picking text colors that meet accessibility guidelines.
Frequently asked
Why does the CMYK value look different from what Photoshop shows?
CMYK conversion is color-management dependent. This tool uses a standard sRGB-to-CMK conversion (the one most web design tools use), which may differ from a print shop's ICC-profile-aware conversion. For press work, export the source from your design tool with the right profile.
Is the conversion lossless?
HEX, RGB, and HSL are mathematically equivalent — no loss, no rounding. CMYK is a smaller color space than sRGB, so going sRGB → CMYK and back can shift saturated colors. The shift is small (a few units in any channel) but visible on calibrated displays.
What does the alpha channel do?
Toggle alpha to add an opacity slider (0-100%). The output includes RGBA and HSLA values. Note that CSS does not support CMYK with alpha — print colors are always opaque, so CMYK is shown without an alpha component.
How is the contrast ratio calculated?
The contrast ratio follows the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the two colors. AA requires 4.5:1 for body text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Can I save colors for later?
The history list in the side panel keeps the last 12 colors you converted in this session. For persistent storage, copy the HEX code into a design system file or a Figma library — the tool does not store anything between sessions.
Limitations
- No Pantone matchingPantone colors are proprietary spot inks used in print. The tool cannot convert to or from Pantone codes. For Pantone-to-CMYK approximations, use a Pantone swatch book or a print shop's reference chart.
- CMYK is approximateThe sRGB-to-CMYK conversion uses a standard formula, not a color-managed ICC profile. Print shops using different paper stocks and presses will see slightly different results. For press work, export from your design tool with the shop's profile.
- No color blindness simulationThe accessibility check covers luminance contrast (WCAG 2.1) but does not simulate protanopia, deuteranopia, or tritanopia. For color-blindness checks, use a tool that shows the color as a red-green or blue-yellow deficient viewer would see it.
Platform notes
- macOS
- Digital Color Meter (in Applications > Utilities) reads the color under the cursor. This tool is the right pick for converting that sampled color to HSL or CMYK, which the macOS color picker does not expose.
- Windows
- PowerToys' Color Picker reads any pixel on screen. The browser tool is the right pick for code-form conversions (HEX, RGB, HSL, CMYK strings) that you can paste into CSS, design tools, or print specs.
- Linux
- GIMP's color picker and KDE's KColorChooser both show HEX, RGB, and HSV. The browser tool adds HSL and CMYK output that those pickers do not, plus a contrast ratio check for accessibility.
- Web
- Runs entirely client-side. Works offline once the page has loaded. The contrast ratio is the only check that needs any computation beyond parsing — useful in design reviews and accessibility audits.