Color Converter
Convert colors between HEX, RGB, HSL and more formats.
Enter a color as HEX, RGB, HSL or CMYK and get the matching values in the other formats. A live preview shows the screen color so you can check the result before copying it.
Color Formats Explained
- HEX - #FF5733. Six hex digits for red, green and blue. Shorthand works too, so #F00 becomes #FF0000.
- RGB - rgb(255, 87, 51). Three channel values from 0 to 255. This maps closely to how screens mix red, green and blue light.
- HSL - hsl(11, 100%, 60%). Hue, saturation and lightness. HSL is easier when you want to make a color lighter, darker or less intense.
- CMYK - cmyk(0%, 66%, 80%, 0%). A print-oriented model based on cyan, magenta, yellow and black ink.
Which Format Should You Use?
Use HEX when you want a compact CSS value. Use RGB when you are working with channel math or code. Use HSL when you are building shades and tints in a design system. Use CMYK as a rough print reference, then confirm final print colors in your design or print software.
About Alpha Transparency
The converter focuses on the visible color. If you paste RGBA, HSLA or 8-digit HEX, the red, green and blue values are converted, but alpha is not preserved in the output fields. For transparency work, keep the original alpha value and add it back in your CSS.
Quick Color Tips
- Pure black is #000000 or rgb(0, 0, 0). Pure white is #FFFFFF or rgb(255, 255, 255).
- In HSL, lightness of 0% is black and 100% is white.
- Saturation of 0% in HSL gives you a shade of gray.
- CMYK conversion from screen colors is approximate because screens and printers use different color systems.
How to Use
- Enter a color value in any supported format (HEX, RGB, HSL, etc.).
- All equivalent values in other formats appear instantly.
- Check the color preview to make sure it matches what you expect.
- Copy whichever format you need.
Frequently Asked Questions
How do I use the Color Converter?
Enter a HEX, RGB, HSL or CMYK value and the tool shows matching formats. Use the preview to check the color visually. Copy the format your design tool or codebase needs.
What is the difference between HEX, RGB and HSL?
HEX and RGB describe red, green and blue values. HSL describes hue, saturation and lightness. HSL is often easier when you want to make a color lighter, darker or less intense.
What is a good contrast ratio?
Aim for at least 4.5:1 for normal text. Large text can pass at 3:1, but stronger contrast is easier to read. Always test button text, links and form labels.
Why does the same color look different on screens?
Brightness, calibration and color profiles change how colors appear. The code is fixed, but the display is not. Check important brand colors on more than one screen.
Can I convert CMYK to web colors?
Yes, but treat it as an estimate. Print color and screen color do not match perfectly. If the brand has official web values, use those instead.