Color Converter

About Color Converter

Color Converter turns a HEX color code into RGB, HSL, HSV/HSB, CMYK and HWB values in one go. Type a 3-, 4-, 6- or 8-digit HEX code (the 4- and 8-digit forms include transparency), or click the swatch to pick a color visually, and every format updates as you type. Each value has its own copy button, plus a Copy All button for the full set. Front-end developers and designers use it to convert HEX to RGB or HSL for CSS, check CMYK values for print mockups, and grab color codes in the format their tools expect. Everything runs in your browser.

How to use

1. Type a 3-, 4-, 6- or 8-digit HEX code into the input under the color swatch, with or without the leading #.
2. Or click the color swatch to open a color picker and drag to choose a color and its transparency visually.
3. Read the HEX, RGB, HSL, HSV / HSB, CMYK and HWB values in the list below, which update as you edit.
4. Click Copy next to any row to copy that one value, or Copy All to copy every format at once.

Limitations & notes

• Only HEX input is accepted; pasting rgb(), hsl() or any other non-HEX text, or more than eight digits, shows an "Enter a HEX value" message instead of converting.
• Transparency from 4- or 8-digit HEX appears in RGB, HSL and HWB (rounded to two decimals); HSV and CMYK have no alpha and show the opaque color.
• Converted values are rounded to whole numbers, so converting them back may not reproduce the exact original HEX.
• The HSV and CMYK strings are for reference only and are not valid CSS color values.
• CMYK is a plain math conversion without a color profile and may not match printed output.

FAQ

How do I convert HEX to RGB?

Split the 6-digit HEX code into three pairs and convert each pair from base 16 to base 10. For example, #FFDE59 becomes rgb(255, 222, 89). This tool does it automatically as you type.

Does it accept shorthand HEX codes like #fff?

Yes. 3- and 4-digit codes are expanded by doubling each digit, so #fff is treated as #ffffff and #fff8 as #ffffff88. Input is limited to HEX; to start from another format, use the color picker.

What is the difference between HSL and HSV?

Both describe color by hue and saturation, but HSL uses lightness (100% is always white) while HSV uses value or brightness (100% is the most vivid version of the color). CSS supports HSL natively; HSV/HSB is common in design apps.

Are the CMYK values accurate for printing?

They are a straightforward mathematical conversion from RGB without a color profile. For professional print work, confirm the values in your design software with the printer's ICC profile.