Free HEX / RGB / HSL / CMYK Color Converter — Online Tool

Convert between HEX, RGB, HSL, CMYK, HWB, and LAB color spaces instantly with live preview and copy-ready output. Runs entirely in your browser.

Color Converter

Color Input
Live Preview
Manual Input
All Formats
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CMYK
cmyk(76%, 47%, 0%, 4%)
HWB
hwb(217, 23%, 4%)
LAB
lab(57, -11, -63)
CSS Output
Variable --color-primary: #3B82F6;
rgb() color: rgb(59, 130, 246);
hsl() color: hsl(217, 91%, 60%);
hex color: #3B82F6;
Recent Colors Last 20 colors

How to Use the Color Converter

  1. Pick a color using the native color picker or type a HEX value directly.
  2. Convert formats — type in any format (HEX, RGB, HSL, CMYK, HWB, LAB) and click "Update from Input" to auto-convert to all others.
  3. Copy any format — click the Copy button next to any format to grab it instantly.
  4. Use CSS output — copy ready-to-use CSS variables, rgb(), hsl(), or hex values with one click.
  5. Random color — click Random to explore new colors and see all format conversions.
  6. Check history — your last 20 converted colors are saved automatically for quick access.

Why Use This Color Converter

Designers and developers constantly need to convert between color formats for different use cases. HEX is great for CSS, RGB for programmatic manipulation, HSL for intuitive color selection, CMYK for print design, HWB for human-friendly editing, and LAB for perceptually uniform conversions. This tool eliminates the need for multiple apps by combining everything into one interface.

All conversions happen instantly in your browser with no server requests. Your color history is stored locally in localStorage and never leaves your device.

Frequently Asked Questions

HEX (#FF5733) uses hexadecimal digits — compact and widely used in CSS. RGB (255, 87, 51) defines red, green, blue channels (0-255) — useful for programmatic manipulation. HSL (11°, 100%, 60%) uses hue, saturation, lightness — more intuitive for humans. CMYK (0%, 82%, 100%, 0%) is subtractive — used in print design. HWB (11°, 0%, 60%) is hue, whiteness, blackness — easier to create tints and shades. LAB (53, 64, 52) is perceptually uniform — great for color differences and adjustments.

Your recent colors are stored locally in your browser's localStorage — never sent to any server. The last 20 converted colors persist across sessions until you clear your browser data.

Use HEX for CSS and web design (most compact). Use RGB when you need to programmatically adjust individual channels. Use HSL for intuitive color picking (e.g., "make it lighter"). Use CMYK for print design. Use LAB for precise color science and perceptual adjustments.

Use Cases

HEX to RGB for CSS

Convert HEX color codes to RGB values for use in CSS rgba() functions, enabling transparent color overlays and dynamic opacity effects.

HSL for Dynamic Colors

Convert to HSL format to programmatically adjust hue, saturation, and lightness for generating color variations, themes, and dynamic UI styling.

CMYK for Print Design

Convert web colors to CMYK format for accurate print design output, ensuring your printed materials match your digital designs.

Cross-Platform Consistency

Ensure color consistency across web browsers, mobile apps, and design tools by converting between formats that different platforms require.

Accessibility Adjustments

Convert colors to LAB format for perceptually uniform adjustments, helping you fine-tune colors for better accessibility and contrast compliance.