Free Color Converter Online - Convert HEX, RGB, HSL & CMYK Instantly
Type in any format — HEX, RGB, HSL, or CMYK — and all other formats update in real time.
Usage Examples
Click any color to load it into the converter
Blue accent — common primary button color
Red — error states and destructive actions
Emerald green — success states and confirmations
Orange — warning alerts and highlights
Pure black — text color and high contrast
Purple — creative sections and gradients
How to Use Color Converter
Type or Pick a Color
Enter a color in any format — HEX, RGB, HSL, or CMYK — or use the color picker to select visually.
See All Formats Instantly
All four formats update in real time as you type. The color preview swatch changes to show the current color.
Copy or Explore Examples
Use the copy button on each card to grab a specific format. Click any example below to load it instantly.
Frequently Asked Questions
Color Formats
What is HEX color format?
HEX (hexadecimal) color format represents colors using six hexadecimal digits preceded by a hash symbol (#RRGGBB). The first two digits represent red (00–FF), the next two green, and the last two blue. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. HEX is the most common color format in CSS and web development, widely supported across all browsers and design tools. Shorthand three-digit HEX (#RGB) expands each digit: #F80 becomes #FF8800, making it a compact alternative for simple web design color palettes.
What is the difference between RGB and HSL?
RGB (Red, Green, Blue) defines colors by mixing three light channels, each from 0 to 255 — it is an additive color model that maps directly to how screens emit light. HSL (Hue, Saturation, Lightness) describes colors by their position on a color wheel (hue 0–360°), intensity (saturation 0–100%), and brightness (lightness 0–100%). RGB is intuitive for screens and programming because it matches hardware behavior. HSL is far more intuitive for humans doing color design — adjusting just the lightness slider produces predictable lighter or darker shades without changing the hue, which makes creating CSS color palettes and theme variations much easier.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing — inkjet printers, offset printing, and laser printers all use it. Unlike RGB which adds light, CMYK works by subtracting light reflected from white paper using layers of ink. Colors are defined as percentages (0–100%) of each ink. For example, pure red in CMYK is 0% C, 100% M, 100% Y, 0% K. Always use a color converter to convert RGB or HEX values to CMYK before sending designs to a professional printer, because the RGB color space is larger than CMYK and some vibrant screen colors simply cannot be reproduced in print.
What is RGBA?
RGBA is an extension of RGB that adds an Alpha channel for opacity and transparency. The Alpha value ranges from 0 (fully transparent) to 1 (fully opaque). For example, rgba(52, 152, 219, 0.5) creates a semi-transparent blue that lets the background show through at 50% opacity. RGBA is widely used in CSS for overlays, box shadows, backdrop filters, and fading effects. Modern CSS also supports the eight-digit HEX format (#RRGGBBAA) where the last two hex digits define alpha — #3498db80 is 50% transparent blue. Use RGBA when you need colors that blend smoothly with varying backgrounds without creating separate image assets.
Practical Use
How do I convert HEX to RGB?
To convert HEX to RGB manually, split the six-digit HEX code into three pairs: RR, GG, BB. Convert each pair from hexadecimal to decimal individually. For #3498db: the pair 34₁₆ = 3×16 + 4 = 52, 98₁₆ = 9×16 + 8 = 152, and db₁₆ = 13×16 + 11 = 219, giving rgb(52, 152, 219). This color converter automates the process instantly as you type — just enter any valid HEX value and the RGB, HSL, CMYK, and RGBA equivalents appear immediately. You can also use the built-in color picker to select any color visually and see all format conversions.
How do I adjust a color's brightness?
The easiest way to adjust brightness in web design is using the HSL color space. Keep the same hue and saturation values, and only change the lightness (L) percentage. For example, hsl(204, 70%, 53%) gives a standard blue; increasing lightness to 70% produces a lighter tint while decreasing to 30% creates a darker shade — all without shifting the underlying hue. RGB adjustments are more complex because you must scale all three channels (R, G, B) proportionally. HSL is the preferred color space for generating CSS theme variations, hover states, and accessible color palettes precisely because brightness is a single, independent parameter.
Why do colors look different on different screens?
Colors appear differently across screens due to variations in display technology (LCD, OLED, Retina), factory color calibration, user brightness settings, and the native color gamut of each panel (sRGB, DCI-P3, Adobe RGB). Your operating system's color profile also affects how it interprets RGB values before sending them to the display. For critical design work, use a hardware-calibrated monitor, preview your designs on multiple devices, and always build with the sRGB color space as the baseline since it is the web standard. This color converter uses sRGB math internally to ensure consistent CSS-ready output regardless of your screen configuration.