OKLCH Color Space Visualization
This 3D visualization shows the OKLCH color space, which is a perceptually uniform color model that represents colors in three dimensions:
- L (Lightness): Ranges from 0 (black) to 1 (white), shown on the vertical axis
- C (Chroma): Represents the colorfulness or saturation, shown as distance from the central axis
- H (Hue): Represents the color type (red, green, blue, etc.), shown as the angle around the central axis
The 3D model helps visualize how perceptually uniform the OKLCH space is compared to other color spaces like RGB or HSL. Each point represents a color, with its position determined by its OKLCH values and its displayed color matching its actual appearance.
Color Picker
OKLCH Values
Interaction Guide
- Rotate: Click and drag to rotate the color space
- Zoom: Use mouse wheel to zoom in and out
- Pan: Right-click and drag to move the view
- Color Selection: Use the color picker to select a color and see its position in the OKLCH space
Understanding the Visualization
The 3D visualization represents the OKLCH color space with the following mappings:
- L (Lightness) → Y-axis (vertical)
- C (Chroma) → Distance from center
- H (Hue) → Angle around Y-axis
Notice how the color space forms a rounded, irregular shape. This is because not all combinations of L, C, and H values correspond to displayable colors (some are out of gamut). The visualization shows only the valid, displayable colors.
The selected color is highlighted with a pulsing dot in the 3D space, with projection lines showing its coordinates. This helps you understand how different colors are positioned within the OKLCH color space.