Tools Color ConvertersXYZ to xyY Converter

Color translation utility for interface systems, design handoff, and production workflows

Instantly convert XYZ to xyY and xyY to XYZ.

Convert XYZ to the xyY color space. This page follows the same polished product structure as the CSS converter tools while adapting the live experience to real color previews, format channels, and production-ready output.

Converter

Keep the base color on top, swap directions in one click, and convert between XYZ and xyY in real time.

Base color

Use the shared live preview as the anchor point for both color formats.

Live preview

Shared source for every active conversion field on this page.

#0F172Argb(15, 23, 42)hsl(222.2, 47.4%, 11.2%)

Conversion

Edit either side, copy any result, or swap the displayed direction.

Original

XYZ

Converted

xyY

#0F172A

xyz(0.921, 0.881, 2.312)

#0F172A

xyY(0.2239, 0.2142, 0.88)

Luminance

Canonical page shared by this workflow: XYZ to xyY. The reverse direction is still available in the same interface via the swap control.

Current color spectrum

A responsive tonal strip generated from the active color preview.

xyz(0.921, 0.881, 2.312) -> xyY(0.2239, 0.2142, 0.88)

#CFD1D4

#93979F

#0F172A

#0B1120

#080C15

Live summary

Useful context while moving between screen color formats, print workflows, and color science representations.

Current conversion

xyz(0.921, 0.881, 2.312)

xyY(0.2239, 0.2142, 0.88)

Live swatch

#0F172A

rgb(15, 23, 42)

Fast handoff formats

#0F172A

rgb(15, 23, 42)

hsl(222.2, 47.4%, 11.2%)

Why this matters

Translate one live color between engineering, design, print, and video-friendly models without losing track of its visual appearance.

How to Convert XYZ to xyY

Canonical guidance that also applies to the reverse conversion inside the same page.

Step 1: Define the source format precisely

Enter the source color using the channels of XYZ. The tool keeps the live preview synchronized so you can validate the color visually while editing the numeric or textual values.

Step 2: Normalize the color through the internal RGB preview

Every supported format is normalized into a single live screen preview. That shared representation keeps the conversion stable while preserving the same visual color across both sides of the interface.

rgb(15, 23, 42)

Step 3: Read the target format and copy the output

Once the live preview is resolved, the target format updates immediately. Copy the generated value directly into your design tool, frontend codebase, or production handoff documentation.

xyY(0.2239, 0.2142, 0.88)

Common XYZ to xyY Reference

A quick reference table based on a curated palette of common sample colors.

Preview	XYZ	xyY
#0F172A	xyz(0.921, 0.881, 2.312)	xyY(0.2239, 0.2142, 0.88)
#2563EB	xyz(20.215, 15.313, 80.471)	xyY(0.1743, 0.132, 15.31)
#7C3AED	xyz(25.107, 13.425, 81.373)	xyY(0.2094, 0.112, 13.42)
#10B981	xyz(21.523, 36.39, 26.654)	xyY(0.2545, 0.4303, 36.39)
#F59E0B	xyz(49.948, 43.895, 6.159)	xyY(0.4995, 0.4389, 43.9)
#EF4444	xyz(38.711, 22.908, 7.851)	xyY(0.5572, 0.3298, 22.91)

XYZ to xyY Converter Information

Background notes for design systems, visual QA, color science, and frontend implementation.

Understanding XYZ

XYZ is a foundational device-independent color model often used as an intermediate step for color science, format translation, and accurate gamut-aware workflows.

Understanding xyY

xyY separates chromaticity from luminance, making it useful for display calibration, color science workflows, and chromaticity diagram reasoning.

Why convert XYZ and xyY?

Design consistency: Keep one visual color aligned across UI mockups, code, and production deliverables.
Workflow translation: Move between web-native, print-oriented, and color-science formats without manually rebuilding the color each time.
Cleaner handoff: Give design, brand, and engineering teams the exact representation they need for the same color decision.