react-cie-1931

CIE 1931 Chromaticity Diagram

A React component for rendering an interactive CIE 1931 chromaticity diagram with WebGL-accelerated rendering.

Overview

The CIE 1931 color space, also known as the CIE XYZ color space, is a fundamental model for representing colors based on human perception. Developed by the International Commission on Illumination (CIE) in 1931, it maps all visible colors within a horseshoe-shaped diagram, often referred to as the chromaticity diagram. This diagram represents:

Chromaticity: The x and y coordinates on the diagram correspond to the color's hue and saturation, independent of brightness.
Color Gamut: The outer boundary shows the purest, most saturated colors (monochromatic light), while the interior represents mixed or less saturated colors.
White Point: The central area approximates neutral or white light.

This React component, react-cie-1931, renders an interactive version of the CIE 1931 chromaticity diagram with smooth performance and accurate color representation, making it ideal for color science, design, and digital imaging applications.

Features

Interactive Zoom & Pan: Mouse wheel to zoom, click and drag to pan
WebGL Rendering: Smooth performance with hardware acceleration
Multiple Color Spaces: Display and compare different color gamuts
Planckian Locus: Optional black-body radiation curve
Accessibility: ARIA labels and keyboard navigation support
Responsive Design: Adapts to container size with proper scaling

Requirements

React 19.0+ - This component is built specifically for React 19 to take advantage of the latest features and optimizations.

Installation

To use the react-cie-1931 component in your React project, follow these steps:

Install the package via npm or pnpm:

npm install react-cie-1931
# or
pnpm add react-cie-1931

Import the component into your React application:

// Named import (recommended)
import { ChromaticityDiagram } from 'react-cie-1931';

// Or default import
import ChromaticityDiagram from 'react-cie-1931';

// With TypeScript types
import { ChromaticityDiagram, type ChromaticityDiagramProps } from 'react-cie-1931';

Use the component in your JSX:
```
<ChromaticityDiagram />
```

Basic Usage

The ChromaticityDiagram component can be used as-is for a default visualization of the CIE 1931 color space. You can customize its appearance and behavior with various props:

<ChromaticityDiagram
  colorSpaces={[
    {
      name: "sRGB",
      primaries: { r: [0.64, 0.33], g: [0.3, 0.6], b: [0.15, 0.06] },
      whitepoint: [0.3127, 0.329],
      color: "rgba(255, 0, 0, 0.8)"
    },
    {
      name: "Display P3",
      primaries: { r: [0.708, 0.292], g: [0.17, 0.797], b: [0.131, 0.046] },
      whitepoint: [0.3127, 0.329],
      color: "rgba(0, 255, 0, 0.8)"
    }
  ]}
  showPlanckianLocus={true}
  colorSpace="display-p3"
  axisLabelColor="#333"
  gridLineColor="rgba(0, 0, 0, 0.2)"
/>

Learn More

Explore the interactive Storybook documentation to see examples and learn about the customization options available for the react-cie-1931 component.

For more information, source code, and to report issues, visit the GitHub repository: github.com/derekrein/react-cie-1931.