ChromaMath

Base Color Space (OKLCH)

Manual Input (Hex, RGB, CSS Color)

Lightness (L) {{ (lightness ?? 0).toFixed(2) }}

Chroma (C) {{ (chroma ?? 0).toFixed(3) }}

Hue (H) {{ ((hue ?? 0) % 360).toFixed(1) }}°

Extract from Image

Upload or capture an area to set the base color.

Tap/Drag for color

Perceived Lightness (OKLCH L)

Threshold Controls

Low T: {{ thresholdLow.toFixed(2) }} High T: {{ thresholdHigh.toFixed(2) }} Blur: {{ thresholdBlur }}px

Link Harmony

{{ isHarmonyConnected ? 'Moving any color shifts the entire harmony.' : 'Adjust individual colors without affecting others.' }}

Proportional Area Distribution

Mathematical representation of compositional weight.

Tonal Range Analysis (L)

Spread of perceived lightness across the palette.

Chroma Range Analysis (C)

Spread of color intensity (saturation) across the palette.

OKLCH Spatial Distribution (3D)

Geometry of Lightness (Y-axis), Chroma (Radius), and Hue (Angle).

High-Precision Extractor

Perform detailed color extraction on the enlarged view.

Threshold Controls

Dark T: {{ thresholdLow.toFixed(2) }} Light T: {{ thresholdHigh.toFixed(2) }} Blur: {{ thresholdBlur }}px

Export & Share

"{{ aiPrompt }}"

Optimized for Midjourney, DALL-E, and cinematic AI generation.

Palette Canvas Studio

Paint with your three palette colours and watch the pixel distribution update live.

Aspect Ratio

Guides

Tool

Brush {{ brushSize }}px

Scale {{ stencilScale.toFixed(1) }}x

Blur Radius {{ blurRadius }}px

SVGs will be converted to the active color.

Target

{{ col.hex }} {{ canvasPixelStats[i].toFixed(1) }}%

Composition AI Prompt

"{{ canvasAiPrompt }}"