What is the valid range for X, Y, and Z?

For the D65 sRGB reference white the normalized range is X=0–0.9505, Y=0–1.0000, Z=0–1.0890. Values outside this range are accepted; resulting RGB channels are clamped to 0–1 before HSL conversion and an out-of-gamut warning is shown.

What happens when an XYZ color is outside the sRGB gamut?

Many XYZ colors cannot be represented in sRGB. This tool clamps each linear RGB channel to 0–1 before gamma encoding, which produces the nearest displayable color. An out-of-gamut warning appears when clamping occurs.

Which illuminant does this tool use?

D65 (standard daylight, 6500 K) with reference white Xn=0.95047, Yn=1.00000, Zn=1.08883. D65 is the standard illuminant for sRGB and is the most common choice for web and display work.

How is HSL calculated from sRGB?

Lightness is the average of the max and min sRGB channel values. Saturation is the difference divided by the double-lightness complement. Hue is derived from the dominant channel and the channel differences, producing a 0–360° angle.

What does X=0.4124, Y=0.2126, Z=0.0193 convert to in HSL?

Those XYZ values correspond to sRGB red (#FF0000), which in HSL is hsl(0, 100%, 50%) — a fully saturated red at mid lightness.

Does this tool send any data to a server?

No. All conversion math runs entirely in your browser using JavaScript. No data is transmitted anywhere.

XYZ to HSL Converter

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

Enter CIE XYZ tristimulus values and instantly get the equivalent HSL color with hue, saturation, and lightness outputs plus a live preview swatch.

CIE XYZ Input

X 0.4124

Y (Luminance) 0.2126

Z 0.0193

hsl(0, 100%, 50%)

HSL Output

H (Hue)

S (Saturation)

L (Lightness)

Conversion Steps

1 XYZ input: X=0.4124, Y=0.2126, Z=0.0193
2 XYZ → Linear RGB (D65 matrix): Rl=1.0000, Gl=0.0000, Bl=0.0000
3 Linear RGB → sRGB (gamma encode): R=1.000, G=0.000, B=0.000
4 sRGB → HSL: H=0°, S=100%, L=50%

Copied!

Summary

Enter CIE XYZ tristimulus values and instantly get the equivalent HSL color with hue, saturation, and lightness outputs plus a live preview swatch.

How it works

Enter X, Y, and Z values using the number inputs or sliders (typical normalized range 0–1; D65 reference white is X=0.9505, Y=1.0000, Z=1.0890).
XYZ values are multiplied by the inverse sRGB D65 matrix to produce linear RGB channel values.
Linear RGB is gamma-encoded with the sRGB transfer function (IEC 61966-2-1) to produce non-linear sRGB in the 0–1 range.
sRGB values are clamped to 0–1 (out-of-gamut XYZ inputs are flagged) and converted to HSL via the standard max-min algorithm.
Hue (0–360°), saturation (0–100%), and lightness (0–100%) are displayed alongside the hsl() CSS string.
A live color swatch previews the resulting color; copy buttons let you grab the hsl() string instantly.

Use cases

Convert spectrophotometer XYZ measurements into CSS-ready hsl() values.
Inspect the hue and saturation of a CIE XYZ color specification.
Translate color science data (ICC profiles, ΔE calculations) into HSL for CSS theming.
Verify that a CIE XYZ color is within the sRGB gamut before using it in design.
Build color palettes starting from device-independent CIE XYZ primaries and fine-tune in HSL.
Cross-reference paint or ink XYZ specifications with web HSL equivalents.
Quickly estimate the perceptual lightness and chroma of an XYZ color from a research paper.
Bridge colorimetry workflows with front-end development color systems.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu