HWB stands for Hue, Whiteness, Blackness. Hue is the color angle (0–360°), Whiteness is the proportion of white mixed in (0–100%), and Blackness is the proportion of black mixed in (0–100%). It is part of CSS Color Level 4 and is often more intuitive than HSL because you tint or shade a hue directly.

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 primaries needed to match a color. Y corresponds to luminance, while X and Z carry chromaticity information.

How is HWB converted to CIE XYZ?

The conversion uses a three-step chain: (1) HWB is converted to sRGB (0–255) using the CSS Color Level 4 HWB algorithm. (2) Each sRGB channel is divided by 255 and gamma-expanded (linearized) to remove the sRGB transfer function. (3) The linear sRGB triplet is multiplied by the IEC 61966-2-1 matrix 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.9505, Yn = 1.0000, Zn ≈ 1.0890), which is the standard reference for sRGB and most digital displays. Pure white (H=0, W=100%, B=0%) gives X ≈ 0.9505, Y = 1.0000, Z ≈ 1.0890.

What happens when Whiteness + Blackness exceed 100%?

Both values are normalized proportionally so they sum to 100%, resulting in a gray tone between pure white and pure black. This matches the CSS Color Level 4 specification behavior.

Can I use the XYZ output directly 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.

HWB to XYZ Converter

Enter HWB values and instantly get the CIE XYZ tristimulus values with a live color swatch and step-by-step conversion math.

HWB Input

Hue (°) 210°

Whiteness (%) 10%

Blackness (%) 20%

Pick a color

hwb(210 10% 20%)

CIE XYZ Output

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.

Conversion Steps

Follow the math — each intermediate value is shown below.

Copied!

Summary

This tool converts HWB (Hue, Whiteness, Blackness) color values to CIE XYZ tristimulus values using the standard sRGB D65 transformation matrix. Adjust hue (0–360°), whiteness (0–100%), and blackness (0–100%) with sliders or number inputs. The tool shows intermediate sRGB and linear-light values alongside the final X, Y, and Z output, so you can follow every step of the conversion.

How it works

Set the Hue (0–360°), Whiteness (0–100%), and Blackness (0–100%) using sliders or number inputs.
If Whiteness + Blackness equals or exceeds 100%, both are normalized proportionally (producing a gray).
The HWB values are converted to sRGB (0–255) using the standard CSS Color Level 4 algorithm.
Each sRGB channel is divided by 255 and then gamma-expanded (linearized) to remove the sRGB transfer function.
The linear sRGB triplet is multiplied by the IEC 61966-2-1 D65 matrix to produce X, Y, Z tristimulus values.
Click "Copy color()" to copy the CSS color(xyz-d65 X Y Z) string or click any channel icon to copy a single value.

Use cases

Convert CSS hwb() color values to CIE XYZ for color science pipelines.
Feed XYZ tristimulus values into L*a*b*, L*u*v*, or chromatic adaptation transforms.
Verify HWB-to-XYZ output when building design tools or custom color pickers.
Prepare color data for ICC profile work or print production workflows.
Cross-reference CSS HWB colors with CIE XYZ for textile or physical color matching.
Understand the full HWB→sRGB→linear→XYZ chain by inspecting every intermediate value.
Build tone-mapping or gamut-mapping pipelines that operate in CIE XYZ space.
Generate XYZ reference values for unit tests of custom color conversion libraries.

Frequently Asked Questions

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