Logo

MonoCalc

/

Color Space Converter

Converter

Input Color

Converted Values

Enter a color value and click Convert to see all color space representations.

Color Space Quick Reference

HEX

#RRGGBB — web & CSS

00–FF per channel

RGB

Red, Green, Blue — screens

0–255 per channel

HSL

Hue, Saturation, Lightness

H:0–360°, S/L:0–100%

HSV/HSB

Hue, Saturation, Value

H:0–360°, S/V:0–100%

CMYK

Cyan, Magenta, Yellow, Key — print

0–100% per channel

CIE LAB

Perceptual color model

L:0–100, a/b:−128–127

CIE XYZ

Device-independent, all visible colors

D65 reference white

CSS Name

140+ W3C named colors

e.g. tomato, coral

About This Tool

Color Space Converter – HEX, RGB, HSL, HSV, CMYK, LAB, and XYZ

Colors can be described in many different ways depending on the context — a web developer needs a HEX code for CSS, a graphic designer reaching for a Pantone swatch thinks in CMYK, while a computer vision engineer works in CIE LAB. This Color Space Converter translates any color between all major formats instantly, so you never have to guess or rely on an imprecise eyeball estimate.

What Is a Color Space?

A color space is a mathematical model that organizes colors in a way that is useful for a specific technology or purpose. Every color space represents the same physical reality — human-visible light — but slices it differently:

  • RGB (Red, Green, Blue) — additive model used by every digital screen. Each channel ranges from 0 to 255. A value of rgb(255, 0, 0) is pure red; rgb(0, 0, 0) is black; rgb(255, 255, 255) is white.
  • HEX — the same RGB values written in hexadecimal and prefixed with #. #FF0000 equals rgb(255, 0, 0). Shorthand 3-digit notation (#F00) is expanded by doubling each digit.
  • HSL (Hue, Saturation, Lightness) — a perceptual model used widely in CSS. Hue is the color wheel angle (0–360°), Saturation is the color intensity (0–100%), and Lightness runs from black (0%) through pure color (50%) to white (100%).
  • HSV / HSB (Hue, Saturation, Value/Brightness)— similar to HSL but with a different definition of the third axis. At full saturation and value (100%, 100%), you get the pure hue; at zero value you always get black. Adobe Photoshop's color picker uses HSB.
  • CMYK (Cyan, Magenta, Yellow, Key/Black) — the subtractive model used in color printing. Inks are mixed on white paper, so mixing all four at 100% gives black (or near-black). Each channel is a percentage from 0 to 100%.
  • CIE XYZ — a device-independent color model that covers the full range of colors visible to the human eye (the CIE 1931 standard observer). It is the mathematical foundation for most other color spaces.
  • CIE LAB (L*a*b*) — derived from XYZ and designed to be perceptually uniform: equal numerical steps produce roughly equal perceived color changes. L* is lightness (0–100), a* is the green–red axis, and b* is the blue–yellow axis.

Conversion Formulas Used

All conversions are routed through RGB as an intermediate format:

  • HEX ↔ RGB: direct hexadecimal parsing and formatting of two-digit groups.
  • RGB → HSL: normalize channels to 0–1, find the min/max, then derive hue from which channel is dominant, saturation from the delta, and lightness from the average.
  • RGB → CMYK: K = 1 − max(R′, G′, B′); each CMY channel is then (1 − channel − K) / (1 − K) where channels are normalized to 0–1.
  • RGB → XYZ: apply sRGB gamma (linearize), then multiply by the standard sRGB-to-XYZ 3×3 matrix for the D65 illuminant.
  • XYZ → LAB: divide by the D65 reference white, apply the CIE transfer function (cube root above the epsilon threshold, linear below), then compute L* = 116f(Y/Yn) − 16, a* = 500(f(X/Xn) − f(Y/Yn)), andb* = 200(f(Y/Yn) − f(Z/Zn)).

Reading the Output

After conversion the tool shows every format side-by-side with one-click copy buttons for each value. A live color swatch updates instantly so you can verify the color visually. The closest CSS named color is found by computing the CIE LAB distance between your input and all 140+ standard W3C color names, then returning the smallest match — a useful reference for accessibility descriptions and documentation.

Common Use Cases

  • Web development— translate a designer's HSL specification into the HEX code your CSS needs.
  • Print production— convert a brand's sRGB HEX code into CMYK percentages before sending to a print vendor.
  • Accessibility auditing — get LAB values to compute WCAG contrast ratios or delta-E color differences between foreground and background.
  • Design tools — quickly move between the HSB value a Figma or Photoshop picker shows and the CSS HSL or HEX your code expects.
  • Data visualization — generate palette variants by tweaking HSL lightness while keeping hue and saturation constant, then export to HEX for charting libraries.

Limitations

Conversions assume sRGB with D65 white point. Wide-gamut color spaces such as Display P3 or Adobe RGB will clip to the sRGB gamut. CMYK output is a device-independent approximation — production print work should use an ICC profile matched to your press (e.g., Fogra39 or US Web Coated SWOP). Alpha/opacity is not modified by any conversion; the RGBA output always uses alpha = 1 as a convenience baseline.

Frequently Asked Questions

Is the Color Space Converter free?

Yes, Color Space Converter is totally free :)

Can I use the Color Space Converter offline?

Yes, you can install the webapp as PWA.

Is it safe to use Color Space Converter?

Yes, any data related to Color Space Converter only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

How does this color space converter work?

Enter a color value in any supported format — HEX, RGB, HSL, HSV, CMYK, LAB, XYZ, or a CSS named color — and the tool instantly converts it to all other formats simultaneously. All conversions use the sRGB color space with the D65 illuminant as the reference white, which matches the standard used by most screens and web browsers.

What is the difference between RGB, HSL, and HSV?

RGB describes a color as a mix of Red, Green, and Blue light intensities (0–255 each) and is the native model for screens. HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value/Brightness) are perceptual models that make it easier to intuitively adjust a color. HSL is most common in CSS; HSV (also called HSB) is used in many design applications such as Adobe Photoshop.

When should I use CMYK instead of RGB?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print production. Printers mix physical inks, so they need CMYK percentages rather than RGB light values. If you are preparing artwork for a printer, always supply CMYK values. Note that CMYK has a smaller color gamut than sRGB, so some vivid screen colors cannot be reproduced exactly in print.

What are the LAB and XYZ color spaces used for?

CIE XYZ is a mathematically precise color model that covers all colors visible to the human eye and is device-independent. CIE LAB (L*a*b*) is derived from XYZ and is designed to be perceptually uniform — equal numerical differences correspond to roughly equal perceived color differences. Both are used in color science, high-precision color matching, ICC color profiles, and accessibility contrast calculations.

How accurate is the CMYK conversion?

The CMYK values shown are an sRGB-to-CMYK approximation without a specific ICC print profile. Professional print workflows require a device-specific ICC profile (such as US Web Coated SWOP or Fogra39) to get precise ink percentages. Use these values as a starting point and verify with your print vendor's preferred profile.

What is a CSS named color and how is the closest one found?

CSS named colors are the 140+ standard color keywords defined by the W3C (e.g. "tomato", "dodgerblue", "goldenrod"). The tool finds the closest named color by computing the CIE LAB distance between your input color and every named color, then returning the one with the smallest perceptual difference.