Color Converter (HEX, RGB, HSL, CMYK)
Convert colors between HEX, RGB, HSL and CMYK instantly. Flexible input, live swatch, and clickable tints and shades of any color.
About the Color Converter (HEX, RGB, HSL, CMYK)
This color converter translates any color between HEX, RGB, HSL and CMYK the moment you enter it. Input is deliberately forgiving: type #f80, #ff8800, rgb(255, 136, 0), plain 255, 136, 0 or hsl(32, 100%, 50%) — or just use the native color picker — and all four notations appear instantly, each with its own copy button.
A large swatch shows the current color, and beneath it a row of nine tints and shades — the color progressively mixed toward white on one side and black on the other. Every variant is clickable, so you can walk a color lighter or darker step by step and grab the exact code, which is perfect for building hover states and palette scales.
Everything is computed locally with standard color-space math, making this a quick companion for CSS work, brand palettes and print handoffs.
How to Use the Color Converter (HEX, RGB, HSL, CMYK)
- 1Type a color in any format — HEX, RGB or HSL — or use the picker.
- 2Read the converted values in all four notations.
- 3Copy any format with its copy button.
- 4Click a tint or shade to walk the color lighter or darker.
Frequently Asked Questions
How do I convert HEX to RGB?
Enter the hex code (with or without the #, in 3- or 6-digit form) and the RGB value appears immediately. The math: each pair of hex digits is one channel in base 16, so #ff8800 is red ff (255), green 88 (136), blue 00 (0) → rgb(255, 136, 0). Shorthand #f80 expands each digit, giving the same result.
What is HSL and when is it better than HEX?
HSL describes a color by hue (0–360° on the color wheel), saturation and lightness percentages. It's far more intuitive to manipulate than HEX: darken a button by lowering L, mute it by lowering S, shift the hue without touching the rest. CSS supports hsl() everywhere, so many design systems define palettes in HSL and let tooling convert.
Why does CMYK look different when printed?
Screens emit light (RGB, additive) while print reflects it through cyan, magenta, yellow and black inks (CMYK, subtractive) — and the CMYK gamut is smaller, so vivid RGB colors, especially bright greens and blues, cannot be reproduced exactly. The values here use the standard conversion formula; for color-critical print work, always confirm with your printer's ICC profile.
What are tints and shades?
A tint is the color mixed with white (lighter); a shade is the color mixed with black (darker). The row under the swatch shows four tints, the base color and four shades in 20% steps. Designers use such scales for hover and active states, backgrounds and text variants of one brand color — click any step to make it the active color.
Does this tool support transparency (alpha) values?
The converter works with opaque colors — alpha values in inputs like rgba() are ignored, and the outputs are solid rgb()/hsl() codes. To add transparency in CSS, append the alpha yourself: rgba(255, 136, 0, 0.5), hsl(32 100% 50% / 50%), or 8-digit hex like #ff880080.