Color Converter

About This Tool

HEX — 6-digit hexadecimal, widely used in CSS and design tools. RGB — Red, Green, Blue values from 0–255, the native format for screens. HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%); more intuitive for color adjustments. CMYK — Cyan, Magenta, Yellow, Key (Black) percentages; used in print design.

Type directly into any editable field and press Enter or click away to convert. Use the color picker or preset swatches for quick selection.

How to Use

1. Click the color picker or click a preset swatch to choose a starting color.
2. Type a value into any HEX, RGB, or HSL field and press Enter to convert.
3. Click Copy next to any format to copy that value to your clipboard.

Use Cases

Front-end developers convert design tool colors (often HEX) to CSS variables. Print designers convert screen colors (RGB/HEX) to CMYK for accurate print reproduction. Brand guidelines often specify colors in multiple formats for different use cases.

FAQ

• Why does CMYK have no input field? — CMYK is a subtractive color model used for print. Converting CMYK back to RGB/HEX is lossy because the color gamuts differ, so only RGB→CMYK conversion is shown.
• Are HSL values rounded? — Yes, HSL values are rounded to the nearest integer for display. Minor rounding may cause a tiny difference when converting back to RGB.
• What is the difference between HSL and HSV/HSB? — HSL uses Lightness (0% = black, 100% = white, 50% = pure color). HSV/HSB uses Value/Brightness (0% = black, 100% = full-intensity color). This tool uses HSL.