Converter

Color Format Converter

Convert between HEX, RGB, HSL, HSV, and CMYK color formats with a visual color picker.

Quick Answer

Pick a color or enter a HEX value to instantly see it in all formats. #3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%). Click any value to copy it.

HEX#3B82F6Copy
RGBrgb(59, 130, 246)Copy
HSLhsl(217, 91%, 60%)Copy
HSVhsv(217, 76%, 96%)Copy
CMYKcmyk(76%, 47%, 0%, 4%)Copy

About This Tool

The Color Format Converter instantly translates a color between the five most common color formats used in web design, graphic design, and print. HEX and RGB are standard for web, HSL is increasingly popular in CSS for its intuitive lightness control, HSV is used in color pickers, and CMYK is essential for print design.

Understanding Color Spaces

HEX is a compact hexadecimal representation of RGB values. RGB defines colors as a mix of red, green, and blue light (0-255 each). HSL describes colors by hue (0-360 degrees on the color wheel), saturation (0-100%), and lightness (0-100%). HSV is similar but uses value (brightness) instead of lightness, which makes it more intuitive for picking pure colors. CMYK is a subtractive model using cyan, magenta, yellow, and black inks, designed for print production.

Web vs. Print Colors

RGB and HEX are additive color models designed for screens. CMYK is subtractive, designed for printing. Not all RGB colors can be accurately reproduced in CMYK, which is why screen colors sometimes look different when printed. When designing for print, work in CMYK from the start or verify your colors convert well. Bright, saturated blues and greens are especially prone to looking different in print.

Frequently Asked Questions

Which format should I use for CSS?
HEX is the most compact and widely used. HSL is gaining popularity because adjusting lightness and saturation is more intuitive than changing individual RGB channels. Both have identical browser support.
Why do print colors look different from screen?
Screens emit light (RGB, additive), while paper reflects light (CMYK, subtractive). The CMYK gamut is smaller than RGB, so some vibrant screen colors cannot be matched in print. Always request a proof before large print runs.
What is color gamut?
Gamut is the range of colors a system can display or reproduce. sRGB is the standard web gamut. Display P3 is wider and supported by modern Apple devices. CMYK has a narrower gamut than both. Colors outside a gamut are 'clipped' to the nearest reproducible color.
How do I pick accessible color combinations?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use HSL to easily adjust lightness for contrast. Dark text on light backgrounds or vice versa is the safest approach.
Can I enter RGB values directly?
This tool accepts HEX input. To convert from RGB, you can convert the decimal values to hex manually or use the color picker which accepts any color and outputs the HEX code.

You might also like

Converter

Military Time Converter

Convert between 12-hour and 24-hour military time formats.

⏱ instantConverter

Energy Converter

Convert joules, calories, BTU, kWh.

⏱ instantConverter

Temperature Converter

Convert Fahrenheit, Celsius, and Kelvin.

⏱ instant