Color Converter
Convert between HEX, RGB, RGBA, HSL, HSLA, CMYK, and CSS color names. Client-side only, instant results.
Detected format: HEX
Color Preview
#3B82F6
Complementary Color
#C47D09
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1)cmyk(76%, 47%, 0%, 4%)100% Client-Side Processing
All color conversions are performed entirely in your browser. No data is sent to any server.
How the Color Converter Works
This free online color converter instantly translates between all major color formats used in web development and design. Enter a HEX code like #3B82F6, an RGB value like rgb(59, 130, 246), an HSL value, a CMYK value, or even a CSS color name like dodgerblue and get instant results in every format.
The converter auto-detects your input format and shows a live color preview swatch alongside its complementary color. Use the built-in color picker for visual selection. Every conversion uses accurate color math performed entirely in your browser.
Color Formats Explained
| Format | Example | Common Use |
|---|---|---|
| HEX | #3B82F6 | CSS, web design, HTML |
| RGB | rgb(59, 130, 246) | CSS, screens, digital design |
| HSL | hsl(217, 91%, 60%) | CSS, intuitive color adjustments |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print design, physical media |
| CSS Name | dodgerblue | Quick CSS prototyping |
Frequently Asked Questions
How do I convert HEX to RGB?
A HEX color code like #3B82F6 consists of three pairs of hexadecimal digits representing Red, Green, and Blue channels. Each pair is converted from base-16 to base-10: 3B = 59, 82 = 130, F6 = 246, giving rgb(59, 130, 246). This tool does it instantly for you.
What is the difference between RGB and CMYK?
RGB (Red, Green, Blue) is an additive color model used for screens and digital displays — colors are created by adding light. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used for print — colors are created by absorbing light with ink. The same color can look different between RGB and CMYK due to their different gamuts.
What is HSL and why should I use it?
HSL stands for Hue, Saturation, and Lightness. It's a more intuitive way to think about color: Hue is the color wheel degree (0-360), Saturation is the intensity (0-100%), and Lightness is brightness (0-100%). It makes it easy to create color variations by simply adjusting one parameter.
Can I enter CSS color names like 'tomato' or 'steelblue'?
Yes! This converter recognizes all 148 standard CSS named colors. Just type the name (e.g., 'coral', 'darkslateblue', 'limegreen') and it will be converted to all other formats instantly.
What is a complementary color?
A complementary color sits opposite your chosen color on the color wheel. This tool calculates it by inverting each RGB channel (255 minus the value). Complementary colors create high contrast and are widely used in design for visual impact.
Does this tool work offline?
Yes. Once the page is loaded, all conversions are performed client-side using JavaScript color math. No server calls are made, so it works without an internet connection.