Convert between CIE XYZ (D65) and ordinary colors. XYZ is the root space every other color space is defined against — Y is literally luminance — and this converter exposes it in the color(xyz-d65 …) form CSS supports, computed with the standard sRGB matrices.
Settings
Generated locally in your browser — your settings and results never leave this page.
The root of the tree
Every color space this site touches is defined as mathematics on CIE XYZ — the 1931 encoding of standardized human color response. sRGB is a matrix away, Lab a response-curve away, OKLab two matrices and a cube root away. XYZ itself is rarely a destination; it is the reference everything meets at, and occasionally exactly what you need to inspect.
Worked example: rgb(255, 215, 0)
Gold in the root coordinates:
linearize channels, then the sRGB matrix: X = 0.6554 Y = 0.6986 ← luminance Z = 0.1003 css form: color(xyz-d65 0.6554 0.6986 0.1003)
That Y — 0.6986 — is the exact relative luminance WCAG contrast uses: gold reflects 69.9% of white’s light. One coordinate, two standards connected. The D65 white point itself sits at (0.9505, 1.0, 1.089), a triple worth recognizing in debugging sessions.
Who actually converts to XYZ
Implementers verifying a color pipeline stage by stage; developers bridging camera/colorimeter data (often XYZ-native) into web colors; anyone computing luminance-derived quantities from first principles; and the curious, for whom XYZ is where the “why” of every other space becomes visible.
D65 versus D50, one last time
This page speaks display-referenced D65, matching CSS color(xyz-d65 …). Print-side XYZ frequently arrives D50-referenced; the Lab converters here adapt internally. Mixing the two references without adaptation is the classic source of “my whites look yellow” bugs.
Reference values, computed live
The root space benefits most from anchors, since almost nobody reads raw XYZ. Seven familiar colors and their D65 tristimulus values:
| Color | RGB | XYZ (D65) |
|---|---|---|
| tomato | rgb(255, 99, 71) | 0.4684, 0.3064, 0.0941 |
| mediumseagreen | rgb(60, 179, 113) | 0.2096, 0.3439, 0.2116 |
| mediumpurple | rgb(147, 112, 219) | 0.3061, 0.2291, 0.6983 |
| goldenrod | rgb(218, 165, 32) | 0.4263, 0.4192, 0.0721 |
| crimson | rgb(220, 20, 60) | 0.3058, 0.1604, 0.0576 |
| olivedrab | rgb(107, 142, 35) | 0.1604, 0.2259, 0.0511 |
| steelblue | rgb(70, 130, 180) | 0.1875, 0.2056, 0.4616 |
The Y column alone justifies the table: it is each color’s exact WCAG relative luminance, so gold’s high Y versus indigo-class values explains — in one number — why one makes a plausible light background and the other a plausible text color. X and Z rarely need reading individually; Y earns a permanent place in your toolkit.
How to use the XYZ Color Converter
- Enter XYZ values – 0.2647, 0.2712, 0.9770 – or any ordinary color to see its XYZ.
- The result updates live as you type – no convert button needed.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
What is CIE XYZ, in one paragraph?
The 1931 root space of colorimetry: three coordinates built from standardized human cone responses. Every color space you use – sRGB, Lab, OKLab – is defined as math on top of XYZ. Y is luminance outright; X and Z carry the chromatic remainder. rgb(30, 144, 255) sits at X 0.2856, Y 0.2744, Z 0.984.
Why is the Y component special?
Y is photometric luminance – the same quantity WCAG contrast ratios are computed from. Read Y from this tool, plug (Y+0.05)/(Y+0.05) ratios, and you have hand-computed a contrast check; the Contrast Checker automates precisely that.
What white point does this converter use?
D65, the sRGB/display standard – matching CSS color(xyz-d65 …). Print-side XYZ often arrives D50-referenced; the Lab tools here perform that adaptation internally when converting to lab().
Are XYZ components bounded like RGB channels?
Loosely: for sRGB colors under D65, each lands within 0 to about 1.09 (Z's white value). Nothing enforces the sRGB gamut inside XYZ though – it happily describes colors and even non-colors far outside, which is exactly what makes it a universal hub.
When would a web developer ever touch XYZ?
Rarely directly – but it explains the machinery: why linearization matters, where luminance comes from, what gamuts are. Debugging a color pipeline or implementing conversions yourself, XYZ is the checkpoint to verify against.
Is color(xyz …) usable in real CSS today?
Yes – color(xyz-d65 …) ships in all modern engines as part of CSS Color 4. It is niche by design; its practical role is precision interchange rather than daily styling.
How do I verify this converter independently?
White must give roughly (0.9505, 1.0000, 1.0890) – the D65 white point – and any gray a Y equal to its WCAG relative luminance. Both identities hold here and are asserted in the test suite.
