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

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

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

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

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-07-01 · Reviewed by Nham Vu