react-cie-1931

A React component for rendering an interactive CIE 1931 chromaticity diagram.

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, allowing users to visualize color spaces, plot color primaries, and explore color relationships. It is particularly useful for color science, design, and digital imaging applications.

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:

import { ChromaticityDiagram } 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 with sRGB primaries and D65 whitepoint. Additional props can be passed to customize its appearance and behavior, such as defining specific color spaces or adjusting scales.

<ChromaticityDiagram
  inputPrimaries={{ r: [0.64, 0.33], g: [0.3, 0.6], b: [0.15, 0.06] }} // sRGB
  outputPrimaries={{ r: [0.708, 0.292], g: [0.17, 0.797], b: [0.131, 0.046] }} // DCI-P3
  whitepoint={{ x: 0.3127, y: 0.329 }} // D65
  xScale={0.8}
  yScale={0.9}
  inputPrimariesColor="rgba(0, 255, 0, 0.8)"
  outputPrimariesColor="rgba(255, 0, 0, 0.8)"
/>

Learn More

Explore the Storybook stories to see interactive 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.