XYZ to HSL Converter
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
0.4124
0.2126
0.0193
hsl(0, 100%, 50%)
This XYZ color is outside the sRGB gamut. RGB values have been clamped before HSL conversion.
HSL Output
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
Related tools
Last updated: 2026-05-28 ·
Reviewed by Nham Vu