Color Convert

🎨 Overview

Convert colors between RGB, RGBA, CMYK, HSL, HSV, CIE LAB, XYZ, CIE LCH, and more — for developers and designers.

📖 How It Works

A color space is a mathematical model for color. RGB suits screens, CMYK suits print, HSL suits adjustments, CIE LAB suits matching. Formulas convert between spaces.

✨ Features

• Many formats: RGB, RGBA, HEX, CMYK, HSL, HSV, CIE LAB, XYZ, CIE LCH, ANSI256, and more.
• Instant results: All spaces update as you enter a color.
• Preview: Swatches show the converted color.
• Color names: Nearest standard color name when possible.
• Accurate math: Professional conversion algorithms.
• Local processing: Runs in your browser.

💡 Steps

1. Enter a color value (many formats accepted).
2. Press Enter or click "Convert".
3. See results in every supported color space.
4. Review swatches and values.
5. Copy the format you need for your project.

📋 Supported Formats

• Input: RGB, RGBA, HEX, HSL, HSV, color names, and more.
• Output: RGB, RGBA, HEX, CMYK, HSL, HSV, CIE LAB, XYZ, CIE LCH, ANSI256, color names.
• Examples: rgb(255, 0, 0), #ff0000, red, hsl(0, 100%, 50%), etc.

🎯 Use Cases

• Web development color conversion.
• Design-to-code handoff.
• CMYK for print workflows.
• Cross-platform color themes.
• Accessibility checks.
• Brand color standards.

🔧 Color Spaces

• RGB: Red, green, blue — screens, 0–255.
• RGBA: RGB plus alpha 0–1.
• HEX: Hexadecimal, e.g. #ff0000.
• CMYK: Cyan, magenta, yellow, black — print, 0–100.
• HSL: Hue, saturation, lightness — easy to adjust.
• HSV/HSB: Hue, saturation, value/brightness — common in pickers.
• CIE LAB: Perceptually uniform — good for matching.
• XYZ: Device-independent standard space.
• CIE LCH: Lightness, chroma, hue — analysis.

⚠️ Notes

• Colors may look different across devices.
• CMYK is for print; on-screen preview may differ.
• Named colors are approximate matches.
• ANSI256 is mainly for terminal use.
• All conversion is local.

💻 Examples

/* RGB */
color: rgb(255, 0, 0);

/* HEX */
color: #ff0000;

/* HSL */
color: hsl(0, 100%, 50%);

/* RGBA */
color: rgba(255, 0, 0, 0.8);

// Set element color
element.style.color = 'rgb(255, 0, 0)';

// Get computed color
const computedColor = getComputedStyle(element).color;

/* Figma/Sketch color values */
fill: #ff0000
stroke: rgb(255, 0, 0)
opacity: 0.8

❓ FAQ

• Why do the same colors look different on different devices?
  Displays, calibration, and color management vary. Use standardized spaces when consistency matters.
• What is the difference between CMYK and RGB?
  RGB is additive (screens); CMYK is subtractive (print). They have different gamuts.
• What is the difference between HSL and HSV?
  HSL uses lightness; HSV uses value/brightness — they behave slightly differently when adjusting color.
• When should I use CIE LAB?
  For perceptually uniform matching, color difference, and color management.
• How are color names chosen?
  We match against a standard palette and pick the closest name — not always exact.