CIE XYZ is a device-independent color space defined by the International Commission on Illumination (CIE) in 1931. The X, Y, and Z values — called tristimulus values — represent the amounts of three imaginary primary colors needed to match a given color. Y corresponds to luminance, while X and Z carry chromaticity information.

How is HSL converted to XYZ?

The conversion uses a two-step chain: (1) HSL is converted to sRGB (0–1 per channel) using the standard hue-to-RGB formula, then each channel is gamma-expanded (linearized) to remove the sRGB transfer function. (2) The linear sRGB triplet is multiplied by the sRGB-to-XYZ matrix (IEC 61966-2-1) to produce X, Y, Z values referenced to the D65 illuminant.

What white point does this tool use?

This tool uses the CIE D65 illuminant white point (Xn = 0.95047, Yn = 1.00000, Zn = 1.08883), which is the standard reference for sRGB and most digital displays. The Y channel equals 1 for pure white.

What are the typical ranges for X, Y, and Z?

For colors within the sRGB gamut, X typically falls in the range 0–0.9505, Y in 0–1.0000, and Z in 0–1.0890. Pure white (hsl 0, 0%, 100%) gives X ≈ 0.9505, Y = 1.0000, Z ≈ 1.0890. Pure black gives X = Y = Z = 0.

Can I use XYZ values in CSS?

Yes. Modern browsers support the color() function with the xyz-d65 color space (CSS Color Level 4): color(xyz-d65 X Y Z). The copy button outputs this format. Check browser compatibility before using in production.

HSL to XYZ Converter

Name: HSL to XYZ Converter
Availability: InStock
Author: Nham Vu

Enter HSL values and instantly get the equivalent CIE XYZ tristimulus values with intermediate sRGB and a live color swatch.

HSL Input

Hue 0 – 360

Saturation (%) 0 – 100

Lightness (%) 0 – 100

Pick a color

CIE XYZ Output

hsl(210, 75%, 50%)

X Red-like

0 – 0.9505

Y Luminance

0 – 1.0000

Z Blue-like

0 – 1.0890

Intermediate Linear sRGB (0 – 1)

sRGB gamma-expanded to linear light; multiplied by IEC 61966-2-1 D65 matrix.

Copied!

Summary

Enter HSL values and instantly get the equivalent CIE XYZ tristimulus values with intermediate sRGB and a live color swatch.

How it works

Enter Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) or use the color picker.
The tool converts HSL to sRGB (0–255) and displays the normalized linear RGB channels.
Each linear sRGB channel is multiplied by the IEC 61966-2-1 matrix to produce X, Y, Z.
The resulting CIE XYZ tristimulus values are shown with 4-decimal precision.
Click any copy icon or the main button to copy individual values or the CSS color() string.

Use cases

Prepare color values for ICC profile work or color science pipelines.
Convert design-tool HSL colors to CIE XYZ as a stepping stone to L*a*b* or L*u*v*.
Verify camera white-balance matrices by checking expected XYZ tristimulus values.
Feed X, Y, Z values into colorimetric calculations such as chromatic adaptation transforms.
Cross-reference CSS HSL values with XYZ for print or textile color matching.
Build custom tone-mapping workflows that operate in CIE XYZ space.

Frequently Asked Questions

Related tools

Hsl To Lab Hsl To Cmyk Rgb To Xyz

Last updated: 2026-05-28 · Reviewed by Nham Vu