Color Converter | HEX to RGB, HSL & CMYK

Quick Start Guide

  1. Select input format: HEX, RGB, or HSL.
  2. Enter value: Type or paste your color code (e.g., #3B82F6).
  3. View results: Instantly see the color converted to all other formats, including CMYK.
  4. Adjust visually: Click the color swatch to open your browser's native color picker.
  5. Copy or export: Click copy on any result format to use it, or export this color's values to JSON or CSV.

Understanding Color Formats

All formats always shown

HEX, RGB, HSL, and CMYK values for your color are always computed and copyable in the results panel, regardless of the Quick/Web/Advanced mode selected. The mode only controls which input fields are editable — Quick shows HEX only, Web adds RGB, Advanced adds HSL — not which formats are available to copy.

RGB vs. HSL vs. CMYK

RGB is additive color (used on screens — red, green, and blue light combine toward white). CMYK is subtractive color (used in print — cyan, magenta, yellow, and black ink combine toward black). HSL re-expresses the same RGB color as hue/saturation/lightness, which is often easier for humans to reason about when adjusting a color's brightness or intensity without changing its hue.

Screen colors and print colors can differ

The CMYK value shown here is a standard mathematical conversion from RGB — it is a useful starting point, but actual printed color depends on the printer, ink, and paper profile used. For color-critical print work, confirm against a physical proof or your printer's color profile.

What this calculator does not cover

This converts a single color between formats — it does not check color contrast/accessibility ratios or generate multi-color palettes. For layout dimensions and image sizing, see the Aspect Ratio Calculator.

Features

Multi-Format Support: Convert instantly between HEX, RGB, HSL, and CMYK formats for any design or development project.

Color Preview: Visual color swatch lets you see the exact color you are working with in real-time.

Copy to Clipboard: One-click copy for any format, ready to paste into your CSS or design tool.

Real-Time Validation: Immediate feedback if an input value is invalid or out of range.

Export Values: Save this color's HEX/RGB/HSL/CMYK values to JSON or CSV for design documentation.

Common Use Cases

Web Development: convert design specs (Figma/Sketch) to CSS formats, switch between HEX for CSS and RGB for JS manipulation, and get HSL values for creating color palettes/themes.

Print Design: convert web colors (HEX/RGB) to print-ready CMYK and ensure brand consistency across digital and print media.

Frequently Asked Questions

RGB (Red Green Blue) is for screens/digital (additive color). CMYK (Cyan Magenta Yellow Key) is for print (subtractive color). Always convert to CMYK before sending artwork to a printer.
A HEX code like #FF6B2B splits into pairs: FF=255 (Red), 6B=107 (Green), 2B=43 (Blue). Each pair is a base-16 number converted to 0-255. Paste any HEX code into this converter and it gives you RGB, HSL, and CMYK instantly.
HSL (Hue, Saturation, Lightness) is intuitive for humans — you can adjust lightness or saturation without touching the hue. It is widely used in CSS design work and color palette generation. This converter supports full HSL input and output.
Click the color swatch in the results panel to open your browser's native color picker. Pick any color visually and every format (HEX, RGB, HSL, CMYK) updates automatically.
Yes — click on any color format (HEX, RGB, HSL, or CMYK) to copy it to your clipboard. HEX codes are ready for CSS, RGB values work in design software or JS. Copy whichever format you need for your project.
Conversions are mathematically precise. HEX and RGB are directly convertible (each HEX digit represents 4 bits), HSL is calculated from RGB using standard formulas, and CMYK uses a standard RGB-to-CMYK conversion. Screen colors (RGB/HEX/HSL) convert exactly; the CMYK value is a good starting point for print but final printed color still depends on your printer, ink, and paper.
Yes. In guest mode you can export your calculations to JSON. Signing in adds PDF and CSV export. Click the export button to download your results — useful for record-keeping, sharing, or importing into other tools.
Yes. Your calculation history is saved automatically. As a guest you can keep up to 50 calculations per workspace on your device. Sign in for free to keep up to 100 per workspace and access them from any device.
Yes. The Color Converter is free to use with no sign-up required. A free account adds more calculation history, multiple workspaces, and access to your saved data from any device.