Color Converter
Convert colors between HEX, RGB, HSL, and CMYK formats with live preview.
CSS Usage
.element {
color: #7C3AED;
color: rgb(124, 58, 237);
color: hsl(263, 83%, 58%);
}About Color Converter
Color conversion between HEX, RGB, HSL, and CMYK is a daily task for web developers, UI designers, and graphic artists. Different contexts require different color formats: CSS uses HEX and RGB, design tools often work in HSL for intuitive color adjustment, and print production requires CMYK values. A real-time color converter eliminates the manual math of converting between color models, letting designers and developers instantly get the exact color values they need in any format for any medium -- from web CSS to print production.
Color Model Comparison Guide
HEX (#RRGGBB) is the most common CSS color format, using hexadecimal values 00-FF for each red, green, and blue channel. CSS also supports shorthand (#RGB) and 8-digit HEX with alpha (#RRGGBBAA). RGB (Red, Green, Blue) is an additive color model where (0,0,0) is black and (255,255,255) is white. CSS supports both rgb() and rgba() for transparency. HSL (Hue, Saturation, Lightness) is the most human-intuitive model: hue is a degree on the color wheel (0=red, 120=green, 240=blue), saturation controls vibrancy (0%=gray, 100%=vivid), and lightness controls brightness (0%=black, 50%=pure color, 100%=white).
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used exclusively in print. Unlike screens that emit light (additive RGB), printed materials absorb light, requiring the opposite color model. Not all RGB colors can be accurately represented in CMYK, so colors may shift when converting between screen and print. CSS Color Level 4 introduced new color functions including oklch(), oklab(), color-mix(), and relative color syntax, offering perceptually uniform color spaces and powerful color manipulation directly in CSS. This converter instantly synchronizes all four color models as you adjust any value.
Frequently Asked Questions
What color formats are supported?
This tool supports HEX (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), HSL (e.g., hsl(11, 100%, 60%)), and CMYK (e.g., cmyk(0%, 66%, 80%, 0%)). Enter a value in any format and all others update automatically.
What is the difference between RGB and CMYK?
RGB (Red, Green, Blue) is an additive color model used for screens and digital displays. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used for print. Colors may look slightly different between the two due to different color gamuts.
How do I use HEX color codes?
HEX codes are 6-character strings prefixed with # (e.g., #FF5733). Each pair of characters represents Red, Green, and Blue values in hexadecimal (00-FF). They are the most common format in CSS and web development.