Free Color Converter Online
Type in any format — HEX, RGB, HSL, or CMYK — and all other formats update in real time. Includes color picker and live preview.
Approx. Blue
HEX
#RRGGBB — web standard
Invalid HEX format
RGB
Red, Green, Blue (0-255)
Invalid RGB format
HSL
Hue (0-360), Sat%, Light%
Invalid HSL format
CMYK
Cyan, Magenta, Yellow, Key (0-100%)
Invalid CMYK format
Usage Examples
Click any color to load it into the converter
#3498db
↗
Blue accent — common primary button color
#e74c3c
↗
Red — error states and destructive actions
#2ecc71
↗
Emerald green — success states and confirmations
#f39c12
↗
Orange — warning alerts and highlights
#000000
↗
Pure black — text color and high contrast
HSL
↗
Purple — creative sections and gradients
Key Features
Multi-Format Support
Convert between HEX, RGB, HSL, CMYK, and RGBA formats instantly.
Live Preview
See a real-time color preview swatch that updates as you type or pick.
Color Picker
Built-in color picker for visual selection from the full sRGB gamut.
Instant Conversion
All formats update in real time as you type — no buttons needed.
Frequently Asked Questions
General
What is the Color Converter?
The Color Converter translates colors between all major web and print color formats in real time: HEX (#RRGGBB), RGB (red, green, blue), HSL (hue, saturation, lightness), HSLA (with alpha/opacity), RGBA (with alpha), and CMYK (cyan, magenta, yellow, key). Enter a color in any of these formats and the tool instantly shows the equivalent values in every other format, along with a live color preview swatch and an approximate color name.
How to Use This Tool
- Type a color value into any format card — HEX, RGB, HSL, or CMYK — or click the color picker to select visually.
- All other format cards update instantly in real time, and the color preview swatch changes to match.
- Copy individual format values using the copy button on each card, or click an example below to load a preset color.
Example
Input:
#3498db
Output:
RGB: rgb(52, 152, 219) HSL: hsl(204, 70%, 53%) CMYK: cmyk(76%, 31%, 0%, 14%)
Details
How do I quickly generate lighter and darker variants of a color for hover states?
Switch to the HSL format. Keep the same Hue and Saturation values, and only change the Lightness percentage. For example, hsl(204, 70%, 53%) is a standard blue; set Lightness to 70% for a lighter hover state, and 30% for a darker active/pressed state. This produces perceptually uniform color variations without shifting the hue.
Why does my CMYK conversion look duller than the original HEX color?
The RGB color space (used by screens) is larger than the CMYK color space (used by printers). Many vibrant on-screen colors, especially bright greens, neon tones, and deeply saturated blues, simply have no exact CMYK equivalent. This is called "out-of-gamut" conversion. Before sending a design to print, always convert your palette to CMYK and expect some color shift.
What is the difference between the eight-digit HEX format (#RRGGBBAA) and RGBA?
Both encode alpha (opacity), but they use different syntax. Eight-digit HEX uses hex for alpha too: #3498db80 means the color #3498db at 50% opacity. RGBA uses a decimal alpha value: rgba(52, 152, 219, 0.5). Eight-digit HEX is newer (CSS Color Level 4) and is supported in all modern browsers.
How does the tool handle shorthand three-digit HEX codes like #ABC?
Three-digit HEX expands by doubling each digit: #ABC becomes #AABBCC. Each hex digit is duplicated because the 4-bit nibble is extended to an 8-bit value. This shorthand has been supported in CSS since CSS1 and is a convenient way to specify web-safe colors.
Can this tool help me check color contrast for accessibility (WCAG)?
This color converter does not compute WCAG contrast ratios directly, but it provides the RGB values you need to calculate them. To check contrast, take the RGB outputs for your foreground and background colors and compute relative luminance. Many browser DevTools now include built-in contrast checkers that accept HEX values directly.