What color formats does this converter support?
It converts between HEX, RGB, HSL, and CMYK - the four most common color formats used in CSS, design tools, and printing.
Color Converter Free - HEX to RGB, HSL, CMYK Online
Free online color converter to convert colors between HEX, RGB, HSL, and CMYK formats instantly. Copy values for CSS, design tools, and code with one click.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
About this tool
HEX is used in CSS and HTML. RGB is used in CSS and design software.
HSL is used in CSS for programmatic color manipulation. CMYK is required for print production.
Design work routinely crosses these formats - this converter eliminates the manual conversion step. Type or pick a color in HEX, RGB, or HSL and all four formats update together; CMYK is calculated as an output only, so it isn't a field you can type a value into directly.
Enter a color in HEX, RGB, or HSL, and instantly see the equivalent in all four supported formats - HEX, RGB, HSL, and CMYK. CMYK is a one-way output calculated from RGB; there's no HSB/HSV format and no CMYK input field.
How to Use Color Converter
Enter a Color
Pick a color using the color picker or type a HEX, RGB, or HSL value.
Auto Convert
All equivalent color values update instantly in every format.
Copy Format
Click copy next to HEX, RGB, HSL, or CMYK to grab the value you need.
Preview Swatch
A live color swatch confirms the exact color you are working with.
Common Workflows
CSS Value Lookup
Type or pick a HEX brand color and copy the RGB or HSL equivalent for a CSS file that uses a different format.
Rough Print-Color Starting Point
Enter a screen RGB/HEX color to see its estimated CMYK values before sending artwork to a print vendor - then verify against their actual color profile.
Generate Hover-State Lightness Variants
Convert a base color to HSL, then adjust the Lightness slider to create lighter or darker variants for hover and active states.
Pick a Real Color, Then Convert It
Use the Image Color Picker to sample an exact color from an image, then paste its HEX code here to get the CMYK or HSL equivalent.
Build a Palette From a Converted Color
Once you have the HEX value you want, take it to the Color Palette Generator to build a full harmony-based scheme around it.
Best For
- Converts between HEX, RGB, HSL, and CMYK instantly - four formats, with CMYK shown as a one-way output derived from RGB rather than an editable input.
- Copy any format with one click - ready for CSS, Figma, Photoshop, or print specs.
- Requires full 6-digit HEX input (e.g. #10B981) - 3-digit shorthand HEX (e.g. #FFF) isn't accepted.
Examples
Convert a brand HEX color to all formats
Input
#10B981 typed into the HEX fieldResult
RGB rgb(16, 185, 129), HSL hsl(160, 84%, 39%), CMYK cmyk(91%, 0%, 30%, 27%) - all shown and individually copyableEntering a value in HEX, RGB, or HSL recalculates all four rows together. CMYK is always the derived output in this direction - there's no field to type a CMYK value into in this tool.
Use Cases
Converting a brand HEX color for CSS use
Get the RGB or HSL equivalent of a brand HEX color for a stylesheet that uses a different format.
Getting a rough CMYK estimate before print
Convert a screen color to its estimated CMYK values as a starting point, then confirm with your printer's actual color profile.
Creating lightness variants for UI states
Convert a base color to HSL and adjust the Lightness value to generate consistent hover or active-state colors.
Common Mistakes
Problem
Looking for an HSB/HSV input field
Solution
This tool supports HEX, RGB, HSL, and CMYK only - there's no HSB/HSV (Hue, Saturation, Brightness) format, despite it being what Photoshop's color picker displays.
Problem
Trying to type a value into the CMYK row
Solution
CMYK is calculated as an output only, from whatever HEX/RGB/HSL value is currently set - there's no way to type CMYK values in and see the equivalent RGB or HEX.
Problem
Typing a 3-digit shorthand HEX like #FFF
Solution
Only full 6-digit HEX values are accepted (e.g. #FFFFFF) - a 3-digit shorthand isn't expanded or recognized.
Problem
Treating the CMYK output as print-exact
Solution
The CMYK values are a simple RGB-based estimate, not calibrated to any specific printer's ICC color profile - always verify against your actual print vendor before production.
Problem
Looking for alpha/transparency support
Solution
There's no RGBA, HSLA, or 8-digit hex (#RRGGBBAA) input or output - only fully opaque colors are supported.
Tips & Best Practices
Enter the color in whichever format you already have
HEX, RGB, and HSL are all independently editable - start from whichever value you were given, and the other formats update automatically.
Treat the CMYK output as a starting estimate for print
Use the generated CMYK values as a rough guide, then confirm the exact result with your printer's color profile before final production.
Use the HSL sliders to build consistent color variants
Adjusting only the Lightness value while keeping Hue and Saturation fixed is the fastest way to generate a matching lighter or darker shade.
Pair with the Image Color Picker and Color Palette Generator
Sample a real color with the Image Color Picker, convert it here, then build a full scheme in the Color Palette Generator.
Limitations
No HSB/HSV support
The four supported formats are HEX, RGB, HSL, and CMYK - HSB/HSV (the format Photoshop's picker shows) isn't available as input or output.
CMYK is output-only
CMYK values are calculated from whatever RGB/HEX/HSL color is set - there's no CMYK input field, so conversion only flows one way, into CMYK, not out of it.
No alpha/transparency support
There's no RGBA, HSLA, or 8-digit hex input or output - only fully opaque colors are handled.
No modern CSS color spaces
Formats like OKLCH or LAB from CSS Color 4 aren't supported - only the four traditional formats are available.
3-digit shorthand HEX isn't accepted
Only full 6-digit HEX values work (e.g. #FFFFFF) - typing a shorthand like #FFF doesn't get expanded or recognized.
CMYK is a simple RGB-based estimate
The conversion isn't calibrated to any specific printer's ICC color profile - treat it as a rough starting point, not a print-exact value.
Comparisons
This Converter's CMYK Estimate vs a Color-Managed Print Conversion
This tool's CMYK output is a quick, uncalibrated RGB-based estimate - useful for a starting point, but not a substitute for a real print color profile.
| This Tool's CMYK Estimate | Color-Managed Print Conversion | |
|---|---|---|
| Method | Simple formula derived directly from RGB values | Calibrated against a specific printer/paper ICC color profile |
| Accuracy for production print | Rough approximation only | Accurate for the specific press and paper used |
| Best for | A quick starting estimate during design | Final production-ready print files |
Which should you use?
Use this tool's CMYK output to get a fast, rough sense of how a color will shift toward print - then verify the exact result with your printer's actual color profile before final production.
FAQs
The most common question is why CMYK and RGB produce slightly different colors for the same values. RGB (Red, Green, Blue) is additive - colors mix toward white, used for screens. CMYK (Cyan, Magenta, Yellow, Key/Black) is subtractive - inks mix toward black, used for print. The same visual color cannot always be perfectly reproduced in both systems - the print and screen gamuts have different ranges.
Can I type in any format and convert to all others?
Yes. Enter a color in HEX, RGB, or HSL format and the tool instantly shows all equivalent values in every other format.
Is CMYK conversion exact?
CMYK is estimated from RGB values. For print production, always verify with your printer's color profile as screen and print color spaces differ.
Get more tools like this
Leave your email so we can prioritize similar tools and updates.
Trending Tools
Trending tools will appear as visitors explore the catalog.
Recently Used
Your recently visited tools will show up here.