Color Converter
Convert colors between HEX, RGB, HSL and more formats.
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
What's the difference between HEX and RGB?
They represent the exact same colors, just in different notation. HEX uses base-16 numbers (#FF5733) while RGB uses decimal values (255, 87, 51). The visual result is identical. HEX is more compact, RGB is easier to manipulate in code.
When should I use HSL instead of HEX?
HSL shines when you need to create color variations. Keep the hue the same, adjust saturation or lightness and you get consistent shades and tints. It's much more intuitive than trying to tweak individual HEX digits. Design systems and CSS custom properties work especially well with HSL.
What is the alpha channel?
Alpha controls opacity, from 0 for transparent to 1 for fully opaque. This converter reads the visible color, but it does not preserve alpha in the output fields.
Can I convert CMYK colors here?
Paste a CMYK value and the tool estimates the matching screen color. Treat the result as a reference, not a print proof - real CMYK output depends on ink, paper and printer profile.
Why does the same HEX code look different on different screens?
Screen calibration, brightness settings and color profiles all affect how colors appear. A HEX code defines a specific color value, but the hardware interprets it differently. This is why designers use calibrated monitors for color-critical work.